在本网页设计教程中，我们将在Photoshop中创建一个轻盈而圆滑的布局。我们将使用960网格系统，如果你以前没有用过，没问题，我将向你展示它是如何工作的，以及它如何帮助你设计更好的布局。
最终结果
下面，你可以看到我们正在创建的最终结果。单击图像将显示给您全面的版本网页布局。
准备:下载960网格系统模板
在开始创建布局之前，请转到960. g下载网格系统。然后解压缩ZIP文件并打开PSD文件，其中包含12列网格;你可以在960_download > templates > photoshop文件夹中找到这个文件。
如果你查看你的图层面板，你会看到你有标准的Photoshop背景图层和两个组。
你可以删除Layer 1组，因为我们不需要它了。12 colgrid组应该永远保持领先地位．要隐藏网格时，你不需要它，只需点击这个组的眼睛图标在图层面板切换它的可见性。
除了您看到的红色条，PSD文件还包含一些非常有用的指南。要查看这些参考线，点击查看>显示>参考线(你可以使用快捷键Ctrl+;切换你的参考线的可见性)。
首先增加文档的大小
1开始我们的布局设计，点击图像>画布大小，设置宽度为1200 px高度为1300 px，单击“确定”。
创建背景
2使用油漆桶工具(G)填充背景的颜色# ADBFCA．
3.双击背景图层解锁。再次双击该图层打开图层样式窗口，按照下图设置图层样式渐变叠加图层样式。
4现在，我们要在布局的顶部创建一个白色径向渐变。首先，创建一个新图层，用白色填充。
5双击该图层打开图层样式窗口，设置填充不透明度来0％并使用下面图片中的设置渐变叠加图层样式。
当图层样式窗口仍然打开时，点击你的图像，并移动你的布局顶部的渐变。看看下面的图片作为参考。名字这一层径向梯度．
6在工具面板中选择水平文字工具(T)，在你用该颜色创建的白色渐变上方写上你的站点名称# EBF0F3．对于这个布局，我只使用了无数的职业家庭，但你可以自由使用任何你想要的字体。
7双击这个文本图层打开图层样式窗口，按照下图设置样式。
创建导航栏
8创建一个新组(图层>新建>组)并命名它导航栏．选择圆角矩形工具(U)，设置半径来10 px和颜色为#DCDCDC，并创建一个圆角矩形的尺寸960 px通过65 px．双击该图层打开图层样式窗口，按照下图设置样式。
请注意:在创建圆角矩形时，打开信息面板(F8)来查看它的尺寸(宽和高)。此外，要在画布上创建更多的参考线，点击并按住尺子(它们在Photoshop GUI的两侧)，然后拖动到画布上。
9用水平文字工具为你的导航菜单添加文字，颜色:#B5B5B5．
添加一个渐变叠加使用下图中的设置为每个文本层添加图层样式。
10创建一个新组并命名它分隔符．
11从工具面板中使用直线工具(U)，设置重量来1 px，按住Shift键保持直线，创建一条从导航栏顶部到底部的竖线，颜色:#F3F3F3．
12复制这个图层(Ctrl+J)，选择移动工具(V)并点击键盘上的右箭头，将这个图层向右移动一个像素。更改这一行的颜色为#B8B8B8．这样做可以创建一个非常好的嵌入效果，微妙但增加了设计的细节。
13选择separators组中的两个图层(按住Ctrl键并在图层面板中单击它们)，通过从图层面板底部的“创建新图层”按钮拖动它们来复制这些图层。创建尽可能多的分隔符，并将它们放在导航菜单项之间。
设计搜索栏
14创建一个新组并命名它搜索栏”。然后选择圆角矩形工具(U)，设置重量来4 px并创建一个圆角矩形的尺寸220 px通过35像素在导航栏的右边，颜色:#E5E5E5．
15用水平文字工具(T)写下文字"输入并按回车键进行搜索在你的搜索栏中，使用颜色#BBBBBB．
16对于搜索图标，我们将从名为功能图标设置．下载套装，打开包装，寻找搜索图标，然后在Photoshop中打开它。将搜索图标放入画布中，使用移动工具将其移动到相应位置;把这个图标放在你搜索栏的左边，并命名它的图层为"搜索图标”。
建立“近期项目”区域
17创建一个新组并命名为"最近的项目”。
18选择圆角矩形工具(U)，设置半径来10 px并创建一个圆角矩形的尺寸960 px通过280 px使用颜色#F1F1F1．
19双击该图层打开图层样式窗口，按照下图设置样式。
命名此图层为"bg”。
20.选择矩形工具(U)创建一个矩形的尺寸960 px通过40像素，使用颜色为#D8D8D8．
21双击该图层打开图层样式窗口，按照下图设置样式。
移动这个矩形到圆角矩形的顶部，并命名这个图层窗口的顶部．
22由于我们在前面的步骤中创建的矩形，我们的大圆角矩形的上角不再是圆角了。然而，我们可以很容易地纠正这个错误。
右键单击顶部栏图层并选择创建剪切蒙版．现在顶部栏层使用下面的图层作为蒙版，矩形的顶部角再次圆角化。
23用水平文字工具(T)书写文字"最近的项目，颜色:#C5C5C5．
双击该图层打开图层样式窗口，按照下图设置样式。
24选择矩形工具(U)创建一个矩形的尺寸460 px通过240 px，使用颜色为#949494．双击该图层打开图层样式窗口，按照下图设置样式。
把这个矩形放在“Recent Projects”区域的中间。
25在Photoshop中打开一张你喜欢的图片，用移动工具(V)将其移动到你的文档中。将这张图片放在“Recent Projects”区域中间矩形的上方。
右键单击该图层并选择创建剪切蒙版，然后说出来图像，最后，将其不透明度设置为70％．
26创建一个新层，打开参考线(使用Ctrl+;切换参考线的可见性)，选择矩形选框工具(M)，创建如下图所示的选区。选择渐变工具(G)并拖动a#CCCCCC为透明线性渐变从你选择的右边到左边。
名字这一层离开梯度并将其不透明度设置为30%．
27复制左侧渐变图层(Ctrl+J)，然后点击编辑>变换>水平翻转。将此图层移动到Recent Projects区域的右侧，并命名它对梯度．
28创建一个新组并命名它分隔符．选择直线工具(U)，设置重量来1 px并创建一条水平线，宽度为240 px，使用颜色为#E2E2E2．在第一条线下面新建一条线，但这次使用颜色:#FAFAFA．
29复制你在上一步中创建的两条线五次(按住Ctrl键，在图层面板中单击选择这两个图层，并将它们拖到新建一个图层在图层面板底部的图标)。
30.使用移动工具(V)排列所有这些线，这样在Recent Projects区域的每一边都有三个分隔线。
31创建一个新组并命名它箭头．
选择椭圆工具(U)，按住Shift键以确保你会创建一个完美的圆，并在图像的左侧Recent Projects区域创建一个小圆，颜色:#F1F1F1．
32点击排除重叠的形状区域按钮，按住Shift键，并在第一个圆内创建一个小圆。要在创建圆圈时移动它，请按住空格键。
名字这一层左圆．
33选择自定义形状工具(U)，右键单击你的图像并选择一个你喜欢的箭头。按住Shift键在圆圈内创建一个箭头，颜色:#F1F1F1．
名字这一层左箭头键．
34按住Ctrl键并单击左边的圆圈和左边的箭头层来选择它们。然后拖动这两个图层新建一个图层点击图层面板底部的图标来复制它们。
35点击:编辑>变换>水平翻转，并将这两个图层移动到图像的右侧。将这些图层的名称更改为对圆而且右箭头．然后设置箭头组的不透明度为65％所以这个组中的所有图层的不透明度都是65%。
36用水平文字工具(T)为最近的项目添加文字，颜色:#ADADAD．
创建“服务”区域
37创建一个新组并命名它服务．选择圆角矩形工具(U)，设置半径来10 px，并创建一个圆角矩形的尺寸960 px通过350 px，使用颜色为#F1F1F1．名字这一层服务bg．
38我们将使用与recent projects区域背景相同的图层样式。打开最近的项目组，右键单击bg图层并选择复制图层样式．然后右键单击“services bg”图层并选择将图层样式粘贴．
39选择矩形工具(U)创建一个矩形的尺寸960 px通过40像素使用颜色#D8D8D8．名字这一层服务窗口的顶部．把这个图层放在圆角矩形的顶部，右键单击并选择创建剪切蒙版．
40右键单击最近项目组的顶部栏图层并选择复制图层样式．然后右键单击服务顶部栏图层并选择将图层样式粘贴．
41写下这个词"服务，颜色:#C5C5C5并使用与Recent Projects区域文本相同的图层样式。
42创建一个新层，打开参考线，用矩形选框工具(M)创建一个选区，如下图所示。然后使用渐变工具(G)拖动#CDCDCD透明渐变从你的选择顶部到底部。命名此图层为梯度并将其不透明度设置为30%．
43现在我们将把“服务”区域分成三列;960网格系统使这对我们来说非常容易。每一列的宽度为300 px(这意味着四个红色条)。
44为了勾画这三列，我们将使用两个分隔符。
首先，创建一个新组并命名它分隔符．然后选择直线工具(U)，设置重量来1 px创建两条垂直线——第一条直线的颜色为#CDCDCD第二个用的颜色是#FAFAFA．复制这两条线，选择移动工具(V)并排列你的分隔线，创建你的三个列。
看看下面的图片，看看你必须把分隔符放在哪里。
45用水平文字工具在你的三个列中分别添加一些文字，颜色:#8 e8e8e．我还创建了三个可以用图像替换的正方形。
46创建一个新组并命名它按钮．在前一个组中创建一个新组并命名它第一个按钮．
47选择圆角矩形工具(U)，设置半径来6像素并创建一个圆角矩形的尺寸100 px通过28 px，使用颜色为#F1F1F1．
双击该图层打开图层样式窗口，按照下图设置样式。
48用文字工具(T)书写文字"阅读更多在按钮上，颜色为#AFAFAF．
49复制第一个按钮组两次(右键单击图层面板中的组，然后选择重复组）.
然后把这两个新按钮放在第二和第三列的中间。
创建“关于我们”区域
50创建一个新组并命名为"关于我们”。用圆角矩形工具(U)创建一个圆角矩形(130,130,130,130,0,0,0,0,0,0,0,0,0,0,0)620 px通过360 px．名字这一层bg．
右键单击services bg图层并选择复制图层样式．然后右键单击“bg”图层并选择将图层样式粘贴．
51选择矩形工具(U)创建一个矩形的尺寸620 px通过40像素，使用颜色为#D8D8D8．
名字这一层窗口的顶部．右键单击services top bar图层并选择复制图层样式．然后右键单击顶部栏图层并选择将图层样式粘贴．
右键单击该图层，然后选择创建剪切蒙版．
52用文字工具(T)书写文字"关于我们在圆角矩形的顶部，颜色:#C5C5C5．从services文本图层复制图层样式并粘贴到此图层。
53打开参考线，用矩形选框工具(M)创建一个选区。使用渐变工具(G)拖动a#CDCDCD为透明线性渐变从你选择的顶部到底部。命名此图层为"梯度并将其不透明度设置为30%．
54创建一个新组并命名为"分隔符”。用直线工具创建两条垂直线，第一条直线的颜色:#CDCDCD第二个用的颜色是#FAFAFA．把这个分隔符放在“关于我们”区域的中间。
55用水平文字工具在About us区域的两列内添加一些文字，颜色:#8 e8e8e．
设计“联系我们”区域
56再创建一个圆角矩形，就像我们在“最近的项目”、“服务”和“关于我们”区域做的那样。这个矩形的尺寸应该是300 px通过360 px．
57现在，我们要为我们的网站设计联系表单。
用矩形工具创建三个矩形，颜色:#E6E6E6．添加一个中风使用下图中的设置为每个矩形添加图层样式。
58用水平文字工具(T)写下文字"的名字”、“电子邮件”和“主题在前面三个矩形旁边，颜色为#BBBBBB．
制作“发送”按钮
59接下来，我们将创建发送按钮。首先，选择圆角矩形工具(U)，设置半径来6像素并创建一个圆角矩形的尺寸100 px通过30 px，使用颜色为#EFEFEF．双击该图层打开图层样式窗口，按照下图设置样式。
用文字工具(T)书写文字"发送在按钮上，颜色为#AFAFAF．
一个简单的页脚
60最后，用水平文字工具(T)在布局的页脚添加一个版权声明，颜色:#999999．
我们完成了!
我希望你喜欢这个教程。您可以查看下面的最终结果图像，也可以单击它来查看全面的版本网页布局。
下载源文件
如果您想用本教程中使用的Photoshop文件检查您的工作，请下载下面的文件。
- light-and-sleek-layout.zip(ZIP, 1.24 mb)
在Flickr上分享你的作品!
您遵循本教程的内容了吗?如果你有，为什么不让我们看看你能做什么加入六次修订Flickr组上传你自己的作品?
相关内容
- 如何用Photoshop创建一个干净的博客设计
- 如何在Photoshop中制作一个绿色和光滑的网页布局
- 如何在Photoshop中设计一个空间未来画廊布局
