本教程我们将学习如何使用960栅格系统设计网站界面。该栅格系统会优化网站设计流程。

终极效果预览

1.新建文档

参数：宽1680px、高1100px，背景亮灰色（#F9F9F9）

2.添加网格

网上有很多栅格系统可供下载，是我们建立属于自己的栅格系统最好的参考。假如你以前没有使用过栅格系统，本文就是简单的进门。它让你的工作变得轻松而有章可循，是原型布局最得力的助手。

下载960栅格系统，地址http://960.gs/

下载完成后，来到“templates”文件夹，使用photoshop打开960pix宽、12列栅格。

下面我们要把栅格导进到我们的工作文档。选择“12列栅格”图层组，拼合图层组并复制粘贴进工作文档。

现在我们需要基准栅格。基准栅格是元素留白、行高等取值的重要参考。首先，新建文件，宽搞均为24px，删除背景，新建一条1px高度的单线，置于画布最底部。定义图案：编辑-定义图案，给图案起一个轻易记忆的名字。

 返回工作文档，新建图层，填充图案：编辑-填充，使用刚才定义图案进行填充。

最后，我们要使用参考线标记我们的工作区域。新建参考线：视图-新建参考线，选择“垂直”，在360px、840px、1320px新建参考线。

3.开始设计

现在栅格系统建立完成，可以开始设计了。我们把整个网站分成5个大部分：

页眉

插图

内容区-左

内容区-右

页脚

 4.添加页眉

我们习惯于自上而下的设计。选择矩形选择工具，绘制一个横贯整个画布宽度的矩形选区，高度120px。打开标尺工具能保证绘制的正确度，120px高恰好占到5个垂直方向的栅格，然后填充深灰色（#2C2C2C）。这个页眉主要用于放置logo和导航栏。
 

5.插进你的logo

在页眉的左上方插进logo，对齐到第二列栅格，这样就给了网站40px的内边距。本项目Logo字体我采用50pt Century Gothic，填充亮蓝色（#ADC7D9），通过对文字“grid”加粗、填充白色来跟前面的文字“blue”区分。接下来给Logo添加内阴影效果，降低内阴影不透明度到25%，间隔：2px、大小：5px。

6.添加导航

导航栏我们采用以文字为主的列表形式，这样可以营造干净整洁的视觉效果。选择18pt Arial写进导航栏文字，“Home”使用白色，其他文字都使用亮灰色（#BBBBBB）。调整页眉所有的元素垂直居中对齐。

7.添加插图区

我把这一部分称作插图区是根据他的用途来命名的-他展示了页眉的主要信息。重复页眉的做法绘制矩形选区，高度240px，然后填充跟logo一致的亮蓝色（#ADC7D9）。我们来添加渐变填充，混合模式“叠加”，不透明度30%。

8.创建插图区背景

公司名为“Bluegrid”，为了突出主题，我们创建一个栅格背景。使用跟前面创建基准栅格相同的办法。新建文件宽高均为25px，删除北京，绘制1px的单线置于画布的底部和右边沿，然后定义图案。

9.添加插图区背景

在所有图层上方新建图层，编辑-填充，使用新定义的图案填充。

旋转15°，应用白色叠加。新建空缺图层，跟白色栅格图层拼合并命名为“grid”。

混合模式选择“柔光”，按住Ctrl键单击插图区背景层取得选区，ctrl+Shift+I反选后删除多余的栅格。

下面显示参考线，接下来的工作就是确保插图区“grid”图层的网格线在960px宽度以内。

感谢 靓哥 的投稿 本文仅代表作者观点，与楚天站长站立场无关。