如何在Photoshop中创建自己的自定义网格系统
网格是一种流行的网站构建方法。 它更加一致，使各个部分成比例地正确。 CSS Grid框架的两个示例是960.gs或Skeleton 。 但是，使用网格框架的限制之一是灵活性会降低。
我们受框架规范及其作者方法的约束，在许多情况下，这些规范可能不适合我们的网站要求。
在本文中，我们将向您展示如何为CSS和Photoshop创建自定义网格 。 为了简化该过程，我们将使用几种工具。 让我们来看看。
安装指南
首先，我们需要安装GuideGuide ，这是一个Photoshop扩展程序来创建辅助线，专门用于轻松创建Grid。 为了能够安装GuideGuide，您的Photoshop必须至少为CS4。
可以通过Adobe Extension Manager如下安装Photoshop扩展。
计算你的网格
在Photoshop中设置辅助线之前，我们需要计算网格，其中包括总宽度，列宽，列号和列装订线 。 这些可以使用Heroku.com的网格计算器轻松完成。
在此示例中，我想为1000px指定总宽度，为装订线宽度指定30px ，并为列数指定10 。 然后，此工具将自动生成实际的内容宽度以及适当的列宽 。
您也可以下载生成CSS网格。
创建网格
是时候回到Photoshop了。 转到此菜单： 窗口>扩展以在Photoshop侧栏中显示GuideGuide面板。 然后，创建一个新的Photoshop画布，设置按照Fulll宽度画布宽度-于我而言，这是1000像素 。
根据网格计算器中的字段，填写GuideGuide面板中的字段-“装订槽”，“列宽”和“列号”。
然后，在GuideGuide面板中，转到“ 设置”选项卡。 在此标签中，您会找到一些预设的指导线。 选择“ 轮廓”预设可在画布边缘创建辅助线。
我们已经完成了，这是我们准备用于设计网站的自定义网格。
此外，您可以通过扩展画布的宽度在画布的左侧和右侧添加更多的呼吸空间，然后在新图层中添加矩形以为网格的列创建可视助手。
在下面下载我们示例的PSD。