最终结果预览
1.新建文档
参数：宽1680px、高1100px，布景亮灰色（#F9F9F9）
2.添加网格
网上有良多栅格系统可供下载，是我们成立属于自己的栅格系统最好的参考。若是你以前没有利用过栅格系统，本文就是简单的入门。它让你的工作变得轻松而有章可循，是原型结构最得力的助手。
下载960栅格系统，地址http://960.gs/
下载完成后，来到“templates”文件夹，利用photoshop打开960 12 列栅格。
下面我们要把栅格导入到我们的工作文档。选择“12列栅格”图层组，拼合图层组并复制粘贴进工作文档。
此刻我们需要基准栅格。基准栅格是元素留白、行高档取值的主要参考。首先，新建文件，宽搞均为24px，删除布景，新建一条1px高度的单线，置于画布最底部。界说图案：编纂-界说图案，给图案起一个轻易记忆的名字。
3.起头设计
此刻栅格系统成立完成，可以起头设计了。我们把整个网站分成5个大部门：
1.页眉
2.插图
3.内容区-左
4.内容区-右
5.页脚
我们习惯于自上而下的设计。选择矩形选择工具，绘制一个横贯整个画布宽度的矩形选区，高度120px。打开标尺工具能保证绘制的切确度，120px高刚好占到5个垂直标的目标的栅格，然后填充深灰色（#2C2C2C）。这个页眉首要用于放置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宽度以内。
选择渐变工具，颜色设置黑色到透明。我们将利用该渐变来埋没失踪960px宽度以外的部门。
确保渐变类型为“线性渐变”，沿着960px参考线最左边一条拖拽鼠标，直到中心一条参考线遏制，右侧不异。
10.添加插图区文本
插图区放置一整页的插图，这里我们将采用纯文本的展示体式格局。文字大小45pt、Arial，写入筹备好的宣传口号。紧接着不才方利用17pt写入一些介绍文字。最后把文字跟Logo一样左对齐。
11.添加滑动展示
显示参考线，利用矩形工具在右侧两条参考线间建立选区，高度占8个栅格（即140px），然后减去上下各一个像素来建造投影。
为滑动展示区添加投影，颜色#2C2C2C，距离1px，大小10px。
接下来我们需要在滑动展示区放置一些姑且的替代内容，这里我把自己blog的截屏拿了过来。设置图片尺寸跟滑动展示区布景图一致，选择-编纂-缩短，10px，反选后删除多余区域。
12.内容部门
利用矩形选择工具，拔取插图区下方的部门，然后选择渐变工具，颜色设置为#F0F0F0到透明，向下拖拽完成渐变。注重不要拖拽太远，要保证页面最底部的颜色信息在#F9F9F9摆布。
13.左侧内容区
通俗文字样式：Arial 18pt #9C9C9C
带下划线链接样式：#A3BBCC
添加声名文字
14.添加处事列表
首先为列表添加题目，文字样式：Arial 25pt 加粗 #262626.
列表内容的文字样式：Arial 18pt #9C9C9C。
列表前的圆点，你可以利用椭圆工具绘制也可以利用快捷键Alt+7添加后改变颜色（#A4BCCD）来完成。
最后把所有的内容对齐到栅格。
频频这个过程添加其他内容。
15.右侧内容区
右侧内容区用来展示比来新闻的精选集。
首先为列表添加题目，文字样式：Arial 25pt 加粗 #262626，然后水平对齐到左侧内容区的题目。
接下来为新闻添加题目，文字样式 Arial 18pt #A4BDCD，然后跟左侧内容区文本对齐。
新闻列表的文字样式：Arial 16pt #9C9C9C。
利用不异的样式建造此外2份新闻。
16.页脚
我们最后的一个部门就是页脚，用来放置一个登陆框、联系信息和少量链接。
利用矩形选择工具建立选区，而且填充深灰色（#262626）。
我们来增添表单。首先建立题目，文字样式：Arial 20pt Bold (#FFFFFF)，置于页脚的左侧。然后利用矩形选择工具建立2个选区作为输入框，填充白色，输入框默认文字样式：Arial 16pt #9C9C9C。
利用圆角矩形绘制提交按钮，然后添加内暗影，不透明度改为305,大小和扩展均为0，距离10px。添加“健忘密码”链接，样式：Arial 13pt 下划线 #A4BDCD.
17.页脚的右半部门
最后我们来完成联系信息。添加题目，文字样式：Arial 20pt B加粗 (#FFFFFF) ，而且水平对齐到左侧表单题目。然后添加联系信息，文字样式：Arial 16pt #FFFFFF.
18.检查结构和平衡
利用栅格和参考线来检查元素是不是对齐、并连结一致性。
若是没有，请实时调整。
19.欢呼，你已经完成了
值得道贺，你已经小小体味了若何利用栅格系统结构网站，可以自界说属于自己的根基系统。
强烈建议你多应用该系统以达到熟练的水平，让它酿成你的第二感官。利用该系统会使作为设计师的你工作倍儿轻松。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
