开发响应式网页的时候经常会使用12栅格作为响应标准，这就要求设计在设计页面的时候也使用12栅格标准。我们可以手动通过辅助线创建栅格，但是这样太麻烦了。所以我们可以使用一个创建栅格的动作。
PS的创建栅格动作下载地址：
链接：http://pan.baidu.com/s/1gePemY3 密码：up7i
ps创建12栅格效果图
如何使用PS创建栅格的动作？
Step1
首先在百度云盘里下载我提供的动作文件，它看起来是下面这个样字，960_GRIDS.atn 文件后缀atn的意思就是action，photoshop可以识别这个文件。
960grids
Step2
然后我们将这个文件放置到Ps的目录下的acitons文件夹当中。C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Actions路径大概是我这个样字的，不过具体的路径取决于你将PS安装在什么地方。这个文件夹先不要关闭后面用到。
ps安装动作目录
Step3
最后打开PS随便新建一个文档，点击菜单上面的窗口，动作打开动作面板。
打开动作面板
然后我们回到上一个步骤当中说不要关闭的文件夹C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Actions双击960_GRIDS.atn，创建12栅格的动作就会被加载到动作列表当中，像下图这个样字。
当然你也可以不用打开PS直接双击960_GRIDS.atn启动PS，再新建文档。
动作面板
我们在动作面板当中选中12 Column Grid。不是前面的打勾或者小方框，是选中，选中以后条目的背景就会有灰度，最后点击播放的三角箭头，Photoshop就会自动创建一个12栅格的文档。
ps创建12栅格效果图
附带的这个动作会创建一个GRID OVERLAY的图层。
栅格图层
TIPs
1.使用这个栅格系统的时候可以改变GRID OVERLAY的透明度，这样使用的时候就可以透过栅格来掌握元素的比例了。
2.对已经编辑过的PSD文档，在创建这个栅格系统到时候会对每一个步骤的修改弹出对话框进行询问，因为默认情况下这个动作会把文档修改成1020x700px的文档，如果你的文档不是这个尺寸，文档发生变化的时候就会要求你确认。你可以在确认的过程当中填写自己想要的文档值，不过我建议还是在进行设计之前就提前把12栅格创建好，然后再对文档尺寸进行调整。
3.这是一个960grids12栅格的PS创建动作，960的目的是为了兼容尽可能多的机器，比如一些老旧式的4：3的机器。虽然在实际应用的时候可能已经不多了，不过我认为这种兼容性的保证还是有必要的。
4.如果你设计的是全尺寸的网站，推荐创建好栅格以后按照比例放大。
网友评论