如何用PS设计一个矢量插图式网站
在这一章设计教程中，你将会学到如何用Photoshop设计出一个标题栏中有矢量插图的专业网站设计。你还会学到很多技巧，例如如何用钢笔工具绘图和用层设计出的个性的内容框。
首先我们来预览一下最终效果：
怎么样？是不是很帅呀。OK，我们现在开始吧，当然开始之前得感谢蛋蛋同学帮我们翻译怎么好的教程，为了保持原汁原味，特定留下英文部分，以后的教程也会如此，大家有什么不懂的地方留言吧！
Setting Up the Photoshop Document
新建文档
1 Open up Photoshop, create a new document that is 950 pixels by 1280 pixels and with a white background (#FFFFFF).
1.打开PS,新建一个宽950像素，高1280像素的文档，背景色为白色。
Creating the Header Section Background
设计标题栏背景
2 Select the Rectangular Marquee Tool (M) and create a rectangular selection across the top part of the canvas. The height of the rectangle should be around 170-190 pixels.
2.选择矩形选框工具，在新建文档顶端画出一个长方形，高约170-190像素。
3 Set the foreground color to #49B0D9 and the background color to #BCE2EF and then select the Gradient Tool (G) with the Linear Gradient option. Drag the linear gradient from the top of the selection downwards to create the linear gradient in the rectangular selection.
3.将前景色设成#49B0D9，背景色设成#BCE2EF。选择渐变工具，在矩形区域内由上往下拖动，使之成渐变的效果。
Drawing the Mountain Range in the Header
在标题栏绘出山群
4 Create a new layer. With the Pen Tool (P), begin to make a mountain backdrop (see the figure below); try to keep the mountains proportional to each other. Once you’ve created the mountain range, right-click on the mountain range drawing and select “Make Selection…” to convert the pen path to a selection.
4.新建层。用钢笔工具画出山群（参见下图），画的时候尽量使山群彼此成比例。画完后将山群变为选中状态。
5 Fill the mountain range selection with any color, double-click on its layer to open up the Layer Styles dialog box, and then add the layer styles shown in the following figures.
5.将选中的山群填充任意颜色，双击该层打开图层样式对话框，按照下列图示设置图层样式。
Your mountains should look something like this:
完成后的山群应该是这样的：
6 On the highest two mountain peaks, create a random selection over the tops of the mountains using the Lasso Tool (L).
6.用套索工具在最高的两座山的峰顶任意画出两个选区
7 Fill the selections with a white color (#FFFFFF), double-click on the layer to open up the Layer Styles dialog box, and then add a Stroke layer style following the settings on the following figure.
7.将选区填充成白色。双击该层弹出图层样式对话框，选择描边，照下图进行设置。
You should have something like this:
完成后的效果应该是这样的：
Drawing the Grassy Area in the Header
绘出标题栏中草地部分
8 Create a new layer. Make a selection underneath your mountains using the Rectangular Marquee Tool (M). The selection should be no more than about 100px in height.
8.新建层。在山群下方用矩形选框工具画出一个长方形，高不超过100像素。
9 Set your foreground color to #8AA426 and your background color to #6F841F. Use the Gradient Tool (G) with the Linear Gradient option to drag a linear gradient from the top of the selection down to the bottom of the selection.
9.将前景色设成#8AA426，背景色设成#6F841F。选择渐变工具，从上往下拖。
10 Add some noise using Filter > Noise > Add Noise.
10.点击滤镜—杂色—添加杂色，参数如下图。
You should have something like this:
完成后的效果应该是这样的：
Drawing Hills in the Header
在标题栏中绘出小山
11 Create a new layer. Using the Pen Tool (P), create a small “hump” somewhere on the grassy area; this will be one of our hills. Once the small hump/hill has been drawn, right-click on the path, and choose “Make a Selection…” to covert the pen path to a selection, and then fill in the selection with any color.
11.新建层。用钢笔工具在草地上任意位置画出一个小山丘。这将是小山中的一座。画完后将钢笔路径变成选中状态，给选区填充任意颜色。
12 Add a Gradient Overlay by double-clicking on the layer to open up the Layer Styles dialog box using the settings in the following figure.
12.双击该层，弹出图层样式对话框，照下图进行设置。
You should have something like this:
完成后的效果应该是这样的：
13 Select the hump/hill by holding down CTRL and clicking on the hump/hill layer. Add a stroke to the hump/hill selection, Edit > Stroke…, using the settings in the following figure.
13.按住CTRL键不放，单击小山丘所在层，给该选区描边。单击编辑—描边，照下图进行设置。
14 Now, delete the flat bottom part of the hump/hill by using the Rectangular Marquee Tool (M), making a selection along the flat edge at the bottom, and then using Edit > Clear or pressing the Delete key.
14.现在，用矩形选框工具沿着小山丘底部画出一个矩形，单击编辑—清除，或按Delete键。
15 Repeat the previous steps (Steps 11 – 14) but this time, don’t add the stroke (in Step 13).
15.重复11—14部。不过注意，这一过程中不需要13步中的描边。
Drawing the Clouds in the Header
绘出标题栏中的云朵
16 We are now going to add some clouds to our sky area. Create a new layer. Use the Elliptical Marquee Tool to create a circle somewhere above the mountains, around the sky area.
16.我们现在要在天空部分画出云朵。新建层。选择椭圆选框工具在山群上方的某个位置画出一个圆。
17 Add to your selection by holding down the SHIFT key and drawing another circle, making sure that both circles overlap. Repeat this process until you have a shape that resembles a cloud.
17.按住SHIFT键不放画出另一个圆，确保两圆重叠。重复上述过程，直到画出一个类似云朵的图形。
18 Fill the selection with a white color (#FFFFFF) and then apply the following layer styles.
18.将云朵选区填充白色，按照下图设置涂层样式。
19 Repeat the Steps 16 – 18 to create as many clouds as you want. Try to experiment with the Layer Opacity to add a bit of depth to the clouds.
19.重复16—18部，画出你认为合适数量的云朵。试着调整图层透明度使云朵更具质感。
Your clouds should now look like this:
完成后的效果应该是这样的：
Applying a Nice Text Treatment for the Website Title
给网站的标题设计一个漂亮的字体
20 Using the Horizontal Type Tool (T), add your website’s title on the top left corner of the canvas – this will serve as our site’s title/logo. Feel free to use whatever font settings you wish, but the tutorial uses “Verdana” with a font size of 26pt.
20.选择横排文字工具，在标题栏的左上角写上网站名称——这就将成为你网站的LOGO。选择任意你喜欢的字体，教程中用的是“Verdana”，26点。
21 Add the following layer styles to website title text layer.
21.按照下列图示设置图层样式。
Your website title should look something like this:
完成后的效果应该是这样的：
Creating the Navigation Bar
设计导航条
22 Create a new layer. Using the Rectangular Marquee Tool (M), make a selection at the bottom of your grassy area. Make sure that the selection slightly overlaps the grassy area.
22.新建层。用矩形选框工具在草地底部画出一个矩形。确保矩形选区部分覆盖草地。
23 Fill the selection with any color then add the following Gradient Overlay layer styles in the following figures.
23.将选取填充任意颜色，按照下列图示设置图层样式。
24 Using the Horizontal Type Tool (T), add your navigation links to the navigation bar.
Creating the Content Area and Content Boxes
24.用横排文字工具在导航条上写出链接项目名称。
Creating the Content Area and Content Boxes
创建内容域名和内容框
25 Create a new layer. Using the Rectangular Marquee Tool (M), make a selection underneath your navigation all the way down to the very bottom of the canvas. Fill the selection with a white color (#FFFFFF) then add the following layer styles.
25.新建层。用矩形选框工具在导航条下拉出一个矩形，直到第一部建立的图层底部。将选取填充白色，按照下列图示设置图层样式。
You should have something like this:
完成后的效果应该是这样的：
26 The stroke you just added should be visible underneath the navigation bar, if it’s not, use the Move Tool (V) to move the background down until it appears. The stroke should be directly underneath the navigation. Use the Zoom Tool (Z) to zoom in to the stroke underneath the navigation bar. Use the Rectangular Marquee Tool (M) or the Single Row Marquee Tool to make a 1px selection right below the stroke underneath the navigation. Fill that 1-pixel selection with a white color (#FFFFFF).
26.你之前设置的描边应在导航条下部显现出来。如果没有显现，用移动工具将背景下拉，直到看到描边为止。用缩放工具放大导航条下的描边。用矩形选框工具或单行选框工具在描边正下方画出一个1像素的选区，并将其填充为白色。
27 Using the Rounded Rectangle Tool with a radius set to 15px.
27.选择圆角矩形工具，半径设为15像素。
Underneath the navigation bar, create a rounded rectangle shape and draw out a rounded rectangle. Set the color of the shape to a white color (#FFFFFF) and then add then add a 1px stroke using the color #D3D3D3.
在导航条下方画出一个圆角矩形，将其填充为白色，为其描边，颜色为#D3D3D3。
28 With the Rectangular Marquee Tool (M), make a selection over the top half of your rounded rectangle shape. Fill the selection with white color (#FFFFFF).
28.在你刚刚画出的圆角矩形顶端用矩形选框工具画一个矩形，将其填充为白色。
29 Load a selection around the rounded rectangle shape by holding down CTRL and clicking on the rounded rectangle layer.
29.按住CTRL键，单击圆角矩形层。
30 Make the white rectangle layer from Step 28 the active layer, and then make an inverse selection, Select > Inverse (Shift + Ctrl + I). Delete the stuff beneath the inverse selection, Edit > Clear or by pressing the Delete key.
30.将28步中的白色矩形层选中，单击选择—反选，以清除反选区域以下部分。选择编辑—清除，或按DELETE键均可。
31 Where the vertical linear gradient ends, we need to add a gray border at the bottom. Create a new layer. Using the Rectangular Marquee Tool (M), create a 1px horizontal line across the content box and then fill the selection with a color of #D6D6D6, Edit > Fill… (Shift + F5).
31.新建层。在圆角矩形上端矩形的下部用矩形选框工具画出一个1像素的线条，将选区填充颜色#D6D6D6。单击编辑—填充即可。
32 Repeat the Steps 25 – 31 to create more content boxes as needed.
32.重复25—31步，画出你所需要数量的内容框。
33 As an added touch, fill your content boxes with dummy content and pictures.
33.给内容框中添加文字或图片。
Creating the Footer
设计页脚
34 Duplicate your grassy area layer. Move it to the bottom of the canvas using the Move Tool (V).
34.复制草地图层。用移动工具将其移到最底部。
35 Resize the height of the footer with Edit > Free Transform (Ctrl + T), and resizing the grassy area by dragging the transform controls, leaving a 1px gap at the top of the footer area.
35.重新设定页脚高度。单击编辑—自由变换路径，通过拖拉变形控制点调整草地部分高度，页脚顶端留出一个1像素的空隙。
36 Create a 1px line all the way across the footer using the Rectangular Marquee Tool (M) or the Single Row Marquee Tool, and then filling the selection with a color of your choice using Edit > Fill… (Shift + F5).
36.用矩形选框工具在页脚顶端画出一个1像素的线条，将线条填充成任意你喜欢的颜色。单击编辑—填充即可。
37 Finally, add your footer information to the footer area.
37.最后，在页脚处写上必要信息即可。
Congratulations, You’re Finished!
恭喜！这样你就大功告成了！
If you followed along the tutorial, you should come out with something that looks like the following figure, click on it to see the full-scale version.
如果你按照教程一步一步来，那么最终完成后的效果应该是这样的：
如果你觉得有困难，可以到这里下载源文件进行练习：illustrative_web_design.zip ，也可以向我们提问！
