栅格化系统，也可称作网格系统，英文名为grid systems，最早是一种普遍适用于平面设计的风格和方法，即用等比例的网格来规范画面的设计元素，使之达到和谐统一的视觉效果。这种风格在二战后迅速风靡，今天已经成为平面印刷品的主流设计风格之一。可以把它看做是几何法则在美学和设计领域的发展和延伸，在透视和黄金风格法则之后。

栅格化系统在网页设计中的应用，第一个好处就是规范了各元素之间的关系，使元素与元素之间因为一个统一的内在法则而相互联系，进而形成和谐的美感；第二，规范的元素安排也更利于产品用户形成舒适的使用习惯，就是说使产品更易用，也就增加了产品的亲和力以及粘性；最后当然也是最重要的一点，如果你设计的页面元素统一、尺寸规范，应该是更受前端欢迎的，因为这样的设计相对来说开发起来更容易。

既然说了这么多好处，润壤今天就来介绍一个辅助栅格化设计的神器，其实呢，也算作是一款必备的PS插件，它的名字就叫做GUIDEGUIDE。它可以快速建立包括间距在内的横纵栏目，将你的网页瞬间大卸八块，妈妈再也不用担心我找不到参考线啦~~~(～￣▽￣)～

下载

首先，可以去http://guideguide.me下载该插件。进入网站之后，找到如下图的下载链接，

打开下拉菜单点选相应的PS版本，

然后点击下载，完成之后你会收到一个.zxp文件。

安装

安装这里提供两个方法：

第一个是常规法，如果你是高富帅，安装的是正版Adobe套装，辣么打开其下属软件 Adobe Extension Manager， 安装插件。安装好之后打开PS，在【窗口 > 扩展功能】下你就能找到GUIDEGUIDE。

第二种方法，如果您像题主一样，只搞了个快速版，其实同样可以使用GUIDEGUIDE插件。

1、保证关闭所有Adobe软件，找到PS安装位置（右键PS图标点击【属性 > 快捷方式 > 打开文件位置】）

2、进入文件夹Plug-ins > Panels，将.zxp文件复制到该目录下。

3、直接把.zxp文件的文件名后缀改为.zip，解压缩到同名文件夹。

4、打开PS，如果在【窗口 > 扩展功能】下找到GUIDEGUIDE，OK，大功告成。

使用

GUIDEGUIDE插件的版本不同，界面会有所不同，但是最基本的用途都是差不多的，如下图：

写到这里大概就差不多啦，介绍了这么好用的神器润壤就不用大家寄来感谢信啦，有空请多关注润壤学院的其他内容，下期再见！！