如何在Photoshop中设计网页的网格！ - 北京传诚信

设计网页的网格方法1

第一种方法使用GuideGuide 卡梅伦McEfee建立垂直列。这Photoshop插件被认为是处于测试阶段，但是从我与它的经验的一切工作得很好，甚至有谈GuideGuide 2的发布，其中将包括更多的功能。GuideGuide页面上可以找到安装说明。还有一个使用它的视频教程是由罗素布朗一起在Adobe 。

成立于5秒您的网格

确定利润率列和排水沟宽度，数量。然后点击“创建指南”。如果你设计样稿的画布宽，做快速的数学运算，使保证金长度要限制你的960像素的网格允许。例如，如果在画布是1200像素宽，然后左，右边缘将每个120像素。

例如12列设置为120像素的20万像素的排水沟和利润率。

您还可以设置基线网格这样，但你最终很多导游。一个更好的选择可能是方法上的一个有特色的的迈克贵金属的方法及工艺视频 ...

方法和工艺的可扩展的基线网格

这里是一个步骤的简要介绍设立一个可扩展的基线网格。

建立网格的基准值，然后创建您的图案模板。基线网格是由领先的正文中（或行高）。例如，如果您的设计的主体副本是在13点Helvetica，在18分的领先，那么你将成立一个18像素的基线网格。创建一个Photoshop文件，该文件是您的基线网格的高度，填补了底部的像素，并留下其余的像素透明。在这种情况下，画布的尺寸将1个像素宽和18像素高。“全选”，然后保存为一个新的模式。您可以通过编辑→定义图案... 转到调整图层→模式，并选择新创建的网格图案。 根据需要，调整不透明度。

列和基线网格1的方法的一个例子。

优点

你会得到一个可选的基线网格，您可以使用独立的垂直的柱网。基线网格，可以创建视觉上的混乱，当在顶部的设计样稿奠定。使用这种方法，它可以只在需要时进行切换。如果你喜欢使用您的网格指南，这是更好的解决方案。您可以隐藏和显示网格通过一个简单的快捷方式。

缺点

使用垂直参考线来标记文档中的其他元素，可很难，因为你可能会混淆他们与电网。方法2相比，网格你的选择是不具体或全面（如设置的横向模块的高度）。数学网格线的确定，不一定会配合像素网格。这意味着你的导游，可以在某些情况下，下降不均，并最终被定位实际像素的中间。这种方法需要两个独立的进程相比只是一种方法，即将来创建一个垂直和基线网格，。

设计网页的网格方法2

模块化网格模式是所有功能于一身的的网格解决方案 。该工具创建一个垂直的柱状网格和基线网格所有作为一个模式 。采用模块化的网格模式有两种方法 ：

除了对Photoshop 的应用程序面板，这也适用于烟花，GIMP和微软Expression设计 。请注意，您必须有最新的软件（Adobe CS5或等值的其他应用程序之一中）和本小组的互联网连接工作。话虽这么说，如果您已经创建了一个模式，并将其保存在资料库中，然后你就可以访问它，而无需任何其他 。

Web应用程序浏览器，Firefox，Safari和Opera。Web应用程序使您可以创建一个网格模式和所有格式的浏览器直接下载 。

无论你选择，随便挑一个模块的宽度，排水沟宽度和基线数量，以及模块化的网格模式，没有休息。您也可以指定一个水平模块的高度。

优点

这是一种快速的方式来获得这一切，全在一层。您可以选择下载一个Photoshop的格局文件，PNG，或透明遮罩。您可以标签的模式，并把它们在一个文件夹，这样您就可以回来，几乎没有设置需要在所有的电网。释放的指南被用于其他目的。您可以指定高度垂直模块，建立一个整体的垂直的节奏。网格可以覆盖不同程度的不透明，让你设计，你可以把它少分心。支持比Photoshop的应用。

缺点

如果你的画布是广泛的，然后进行网格模式将使其扩展到整个页面，这可能是恼人的，使其难以看到的内容的界限。这可以是固定的几种方法：应用图层蒙版来约束电网只是主要内容区。绘制一个矩形区域（例如，960 × 1200像素）的主要内容的大小，并适用于网格图层样式，在这种情况下的填充设置为0％。这种方法迫使你选择基线网格，防止您刚刚创建垂直柱状模块。它需要手动隐藏和显示网格层，没有键盘快捷键的好处。

总结的几点思考

我们希望这些方法将提高您的效率和精度，在建立一个网格。最后，你的方式成立网格将取决于您的工作流程。评估您的需求，然后选择最适合他们的方法。两种方法都需要最少的设置，但可以节省大量的时间和挫折。

其他资源

如果既不方法您的利益，相当有几个模板也将做的工作。我建议检查柯以敏瓦格纳的布局模板和罗比曼森的960万像素的网格模板 。此外，网格系统链接到一些优质的资源和工具 。

选择北京网站建设公司-传诚信，优质服务，绝对不容错过 ！