优化网站设计流程 使用960栅格系统设计网站界面

3.开始设计
现在栅格系统建立完成，可以开始设计了。我们把整个网站分成5个大部分：
1.页眉
2.插图
3.内容区-左
4.内容区-右
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的单线置于画布的底部和右边缘，然后定义图案。