在这个教程中，你将学习到如何在Photoshop中创建一个漂亮简洁的绿色基调的网页布局。

最终效果

先看看我们最终的成果，单击图片可查看完整比例的设计图。

设置Photoshop文档

1、在Photoshop中新建一个宽980像素，高830像素的文档。背景色为白色。

2、如果你的Photoshop界面中没有显示标尺，选择视图>标尺打开（Ctrl + R也可打开或关闭标尺）。

3、在画布上拖出两条垂直辅助线和两条水平辅助线（点击标尺后保持不放，然后拖向画布），分别放置到文档的边缘。在这些辅助线之间，我们将为内容创建背景。

创建背景

4、选择圆角矩形工具(U)，设置半径为10像素，颜色为#E0E0AC，然后在整个画布上创建一个圆角矩形（从画布左上角拖至右下角）。命名图层为”bg“。

5、现在，我们打算让画布变得大一点。首先，我们将在文档的顶端腾出点空间，以放置网站的标记。点击图像>画布大小(Alt + Ctrl + C)，按照下图的设定其中参数。

6、再次选择图像>画布大小(Alt + Ctrl + C) ，按照下图进行设定。

7、单击激活图层面板中的背景图层，设置前景色为#6C821C，使用油漆桶工具(G)填充背景图层。

8、在“背景”图层之上创建一个新图层，命名为”渐变”。

9、选择渐变工具，在“渐变”图层上从上至下使用由白到黑的渐变。

10、设置“渐变”图层的模式为叠加，不透明度为10%。

11、确定当前图层为”渐变” ，选取图层>图层蒙版>显示全部。

12、选择渐变工具，从文档底部从下到上进行由黑到透明的填充。

13、在”渐变”图层上单击右键，选择“转换为智能对象”。

14、执行“滤镜>杂色>添加杂色”操作，使用如下参数（数量为1.8%，平均分布）。

15、新建图层，选择画笔工具，设置颜色为白色，主直径为300像素，在画布的上部创建一条白线。

16、将刚才的图层命名为“高光”，设置不透明度为50%。

17、在“bg”图层下新建一图层，按“D”键重置前景色为黑色，背景色为白色，执行“滤镜>渲染>云层”。

18、右键单击该图层，选择“转换为智能对象”，并将图层命名为“纹理”。

19、确保“纹理”图层已被选择，执行“滤镜>模糊>动态模糊”。其中角度为90，距离为549像素。

20、执行“滤镜>锐化>锐化”。

21、为“纹理”图层增加图层蒙版（图层>图层蒙版>显示全部)。

22、选择渐变工具，从文档底部从下到上进行由黑到透明的填充。

23、将“纹理”图层的模式设置为重叠，不透明度为40%。

设置文档内容的背景

24、双击“bg”图层，打开图层样式窗口，勾选外发光，设置混合模式为“正片叠底”、不透明度为10%，发光颜色为#33302e，图素大小为12像素，其余为默认值。

25、创建新图层，命名为“阴影”。设置前景色为#2A2009，选择铅笔工具，设置主直径为25像素，在圆角矩形的底部创建一个圆点。

26、右键单击“阴影”图层，选择“转换为智能对象”。

27、执行“编辑>自由变形”(Ctrl + T)，将圆点拉伸为至圆角矩形宽度类似的位置。

28、执行“滤镜>模糊>高斯模糊”，半径为7.6像素。

29、设置“阴影”图层的模式为“正片叠底”，不透明度为30%，并置于“bg”图层之下。

创建导航条

30、现在，我们开始制作导航条。选择矩形工具，颜色设置为#D8D8A5。

31、在前面创建的大圆角矩形之上新建一高度为60像素的矩形，并命名图层为“导航条”。

提示：按F8打开信息面板以便查看高度等信息。

32、在图层面板中双击“导航条”图层，打开图形样式窗口。设置参数如下图。

33、你可能注意到了，添加了导航条之后，大圆角矩形的顶部已不再圆滑。为了纠正这个问题，我们即将使用剪贴蒙版。右键单击“导航条”图层，选择“创建剪贴图层”。

34、现在，我们将创建当前页面按钮的背景。选择矩形工具，设定颜色为#A6A43F，生成一个高60像素的小矩形。

35、设定图层的名称为“当前页面按钮”，不透明度为15%。

36、右键单击“当前页面按钮”图层，选择“创建剪贴蒙版”。

37、按住Ctrl键，在图层面板上选择最上面的四个图层，按Ctrl + G将其命名为“背景和导航条”。

38、按T键选择文字工具，为导航条增加文字内容，颜色设定为#A6A43F。字体按照你的喜好自由设定。

定义“首页特写”区域图案

39、现在，我们将创建一个图案。新建一个5px*5px的文档，背景为透明。

40、设定前景色为#2A2009，选择铅笔工具，将其主直径设为1像素，在文档中央创建一个正方形。

41、然后执行“编辑>定义图案”，注意命名尽可能的容易记忆和识别。然后就可以关闭这个文档了。

创建“首页特写”区域

42、选择矩形工具，创建一高度为330像素的矩形，颜色随意。

43、在刚才生成的图层上双击，打开图层样式窗口，按照下图设定参数。（将高级混合中的不透明度设为0，再选择之前定义的图案进行叠加，不透明度设为5%。）

44、将刚才的图层命名为“图案”。

45、选择圆角矩形工具，半径设为8像素，颜色设定为#A6A43F，创建一高度为240像素、宽度为940像素的圆角矩形。

46、命名图层为“特写背景”，将不透明度设定为50%。

47、选择矩形工具，颜色设定为#A6A43F，创建一宽610像素高220像素的矩形作为特写图片的背景。命名当前图层为“图片背景”。

48、使用移动工具插入你中意的图片。

49、将图片放置在刚才创建的矩形中，右键单击图片图层，选择“创建剪贴蒙版”，然后命名为“图片”。

50、选择文字工具（T），在特写区域的右侧增加一些文字。文字大小、颜色以及字体尽量接近下图设定。将这些文字图层组合成“特写区文字”组。

创建回应按钮

51、我们现在开始制作位于特写区下部的两个按钮。选择圆角矩形工具，设定半径为8像素，颜色为A6A42F，创建一个小圆角矩形，命名图层为“按钮一”。

52、我们想把按钮顶部的圆角弄直，为了达到这个目的：

1. 确保按钮图层为当前图层。
2. 选择“路径选择工具”，点击按钮，每个圆角上出现了两个锚点。
3. 选择“转换点工具”，依次点击按钮上方的四个锚点。
4. 选择“直接选择工具”，按住Shift键，挪动圆角锚点，形成直角。

53、设定“按钮一”图层的不透明度为30%。

54、然后使用文字工具增加内容，颜色为#EAEAB7。

55、你还可以增加图标。我使用的是Function网站发布的免费图标。

56、将文字、图标以及按钮图层放在一个名为“按钮一”的组中。

57、按照上述步骤，使用不同文字和图标，生成另一个按钮。

58、为了有效组织文件，将有关特写的图层都组合在一起，并命名为“首页特写”。

创建3D丝绸带

59、选择“矩形工具”，创建一高度为130像素的矩形，颜色为#A6A43F，命名图层为“丝带背景”。

60、选择“圆角矩形工具”，设定半径为10px，在刚才创建的丝带背景的左侧创建一圆角矩形。你可以拖出一些辅助线以便提供一些便利。

61、点击激活刚才创建的圆角矩形的矢量蒙版，然后选择“圆角矩形工具”，在选项栏中选择“从形状区域减去”，在圆角矩形左上方新建一圆角矩形。

62、创建一新图层，右键单击，选择“创建剪贴蒙版”。

63、然后选择“渐变”工具，从左到右填充由白色至透明色的渐变。可参考下图。

64、设定图层模式为“叠加”，不透明度为30%，命名为“高光”。

65、选择“圆角矩形工具”，设定颜色为#878533，在“丝带背景”图层之上创建一圆角矩形。

66、然后选择矩形工具，在选项工具条中选择“从形状区域减去”，在我们不需要的绿色圆角矩形区域创建矩形。

67、然后双击图层打开图层样式窗口，设定内阴影，不透明度设为10%，角度120度，距离4像素，大小5像素，混合模式为“正片叠底”，其余为默认值。

68、在丝带右侧重复上述步骤。

69、将刚才和丝带有关的图层组合成“丝带”组。

70、在“丝带背景”图层下创建一新图层，利用前面叙述的方法生成阴影。

71、选择“圆角矩形工具”，半径为8像素，颜色为#E1E0C1，创建四个220px*110px的圆角矩形。

72、将这四个图层的不透明度调为50%，并组成“图片”组。

73、选择“横排文字工具”，在文档底部增加一些文字。你还可以参考之前的做法添加一些图标。

74、使用文字工具，颜色为#E0E0A，在文档顶端创建站点名称。

75、双击图层，设定图层样式，添加渐变叠加，其中模式为叠加，不透明度15%，其余为默认值。

77、最后，在丝带中将放入四张图片，基本完成页面设计。

恭喜！我们终于完成了这个教程。

————————
译者的话：经过1个下午的翻译，这篇教程终于完工。最大的感受就是教程制作是一件耗时费力的工作，高手能把自己的一些工作流程做成教程分享给大家，实在是一个高尚的行为，向作者致敬！

Firefox不仅仅是一个很棒的浏览器（即便你不是网页设计人员，也可以使用Firefox，当然需要你有一定的好奇心），它还是网页设计人员的好朋友。在Firefox中，你可以完成几乎所有的网页测试工作，结合图片编辑软件和代码编辑器，Firefox能让你更快更好的完成设计工作。

这篇博客并不打算列出所有和网页设计有关的Firefox组件列表，而是想把作者日常使用的那些相关组件介绍给同好。

我十分乐意倾听您如何在网页设计中使用Firefox以及更好的组件推荐。

首先，Firefox在默认安装后，没有内建任何关于网页开发设计的功能，尽管如此，它仍然有一些非常实用的功能，现列举如下：

1. Firefox内置一个漂亮的源代码查看器，能亮显并格式化HTML和CSS代码（右键>查看网页源代码）
2. 内置错误控制台（工具>错误控制台）
3. 内置网页信息查看器，能够将当前网页中使用的资源分类列举出来（右键>查看页面信息），如果看到不错的背景图片或者flash文件，你可以在网页信息中查找并保存。

我喜欢的Firefox网页开发组件

Firebug：我最喜欢的组件！你有没有想过在浏览器中即时的编辑一个网页，但同时又不丢失你的源代码？如果有这样的想法，Firebug就可完成你的心愿。比如说，你可以在浏览器中实时地编辑和查看CSS，当你觉得满意后，将CSS再拷贝到你的样式表中。是不是很酷？

Colorzilla：Colorzilla是一个颜色拾取器，安装后出现在浏览器的状态栏中，能让你获取页面中任何一点的颜色信息，这样就省去了你在样式表中查找特定颜色的麻烦。

FireFTP：FireFTP是一个FTP客户端，一个可以在Firefox浏览器中启动的客户端。有了它之后，谁还需要一个单独的FTP应用程序呢？

YSlow：YSlow能够测试你的网页各项内容的表现速度，并且告诉你瓶颈所在，还针对性地提出加速的建议！

Codetech：一个内嵌于Firefox的文本编辑器。能够在一个新的标签页打开或在一个浮动窗口中打开。

Screengrab：如果你曾为截取长长的网页烦恼、为要在Photoshop中裁剪不必要的部分郁闷，那Screengrab组件可让你一键实现这些功能。有了Screengrab，你可以截取网页当前显示的部分或者整个网页，然后将其拷贝到剪贴板，或者直接保存到硬盘中。没错，这些功能只需要点一下鼠标。

IETab：尽管我们都不怎么感冒IE，但是大多数网友都使用IE。因此，与其打开IE查看你最新的网页修改，你还不如安装IETab插件，然后在Firefox中新建一个标签页打开IE。我知道，在Firefox中使用IE感觉很奇怪，但也不失为一种方法。

Web Developer Toolbar：这个组件不用介绍了，地球人都知道。网页设计人员必备组件。

最后，如果你知道其他有用的网页设计相关组件，请在下面的评论中告诉我，我将洗耳恭听。