作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。
约定：
1、本文的软件是Photoshop CS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
In this Photoshop tutorial we’re going to learn how to create a web 2.0 layout, As we go through the tutorial we’ll deal with so many Photoshop techniques. Seems kind of long? that’s because it’s very detailed. I assure you’ll find easy to follow and to get done, just give it a try!
在本PS教程中，我们将学习如何创建web 2.0的布局，随着我们通过本教程我们会学习很多PS技巧。似乎太长了吗？这是因为它非常详细。我保证你照着做会发现很容易，试试看！
Step 1
To keep everything aligned we’re going to use 960s Grid System (Get it from here) once downloaded open up the file “960_grid_24_col.psd”.
We’ll start by creating layer from background, right-click on the layer “Background”, then choose Layer From Background. and call it “bg”.
步骤1
为了对齐元素，我们打算用960s Grid System（从这获得），下载后打开960_grid_24_col.psd文件
一开始从背景创建图层，在Background上右键，选择背景图层，命名为bg
由于本翻译不使用960s Grid System，故本步改为新建文档，尺寸：1020px*1800px
Step 2
As we’ll use guides so much, we need to view our Rulers. In order to do that go to View > Rulers.
步骤2
我们需要参考线，我们需要显示我们的标尺。为此，点击：视图 > 标尺
Step 3
We need to set lower borders for the header area, therefore we’ll drag a new horizontal guide after 100px. go to View > New Guide, Position: 100.
步骤3
我们需要设定头部区域的边框，为此在100px的位置拖动一条水平的参考线。点击：视图 > 新建参考线，位置：100
Step 4
Let’s create our header. we’ll start by creating a selection of 1020x100px. then click Shift+Backspace to fill it (with any color just for now).
步骤4
现在创建头部区域。我们首先创建一个1020px*100px的选区。然后按Shift+Backspace填充（用当前的前景色填充）
建议：不太常见的做法，一般用矩形工具创建一个矩形（0，0，1020，100），区别是矩形工具会新建一个图层
Give it a Gradient Overlay according to the following image:
按照下图设置矩形的渐变叠加的图层样式
渐变编辑器的颜色：#161616，#202020，#131313
Now call this layer: “header_bg”.
命名此图层为header_bg
Step 5
Write your Web site title with these settings:
- Font Family: Rockwell (get it from here)
- Font size: 30px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: Won’t matter, cause we’re gonna give it a Gradient Overlay
步骤5
按照下面的设置，用文字工具添加网站的标题
- 字体：Rockwell
- 字体大小：30px
- 字体样式：Regular
- 消除锯齿方式：平滑
- Color: 不需设置，因为我们要添加渐变叠加
Now add a Gradient Overlay to your text with the following settings:
现在按照下面的设置对你的文字添加渐变叠加
渐变编辑器的颜色：#528037，#84ac49
To align your Web site title with the header background; Select your title layer and “header_bg” layer then click on Align vertical centers.
为了对齐网站的标题在头部的背景，选择你的标题图层和header_bg图层，然后点击垂直居中对齐（点击：图层 > 对齐 > 垂直居中）
Step 6
Write your navigation text with these settings:
- Font Family: Arial
- Font size: 20px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ffffff
步骤6
按照下面的设置添加导航文字：
- 字体： Arial
- 字体大小： 20px
- 字体样式： Regular
- 消除锯齿样式：平滑
- 颜色： #ffffff
Create a rounded rectangle which will represent a hovered link. it should be about 65x35px size – 5px radius, (fill it with any color for now).
对悬停的链接添加一个圆角矩形（551，33）。尺寸：65px*35px，半径5px，（填充任意颜色）
Give it a Stroke and Gradient Overlay according to the following image:
按照下图对圆角矩形设置描边和渐变叠加的图层样式：
描边的颜色： #9dca5d
渐变编辑器的颜色：#528037，#84ac49
Before we move to the next step, just make sure to keep your layers well-organized, Here’s how mine looks!
在做下一步之前，要确保图层的组织严密（将这些图层归并到header组），这里是我做的样子 ！
Step 7
It’s time to create the featured designs area. we’ll start by setting our lower borders by adding a new horizontal guide after 430px.
步骤7
该创建特色区域了。为了设置边框，在之前的水平参考线下方的430px处添加一条水平参考线。
Create a selection of 1020x430px as a background for the featured designs area. and fill it with any color.
给特色区域添加背景，创建一个1020px*430px的选区。用任意颜色填充。
建议：用矩形工具新建一个矩形（0，100，1020，430）
Then give it a Gradient Overlay with the following settings:
然后按照下图设置渐变叠加：
渐变编辑器的颜色：#528037，#84ac49
Now let’s create the glaze effect! create a selection of 1020x120px, fill it with any color.
现在创建亮釉效果！创建一个选区1020px*120px，用任意颜色填充。
建议：用矩形工具新建矩形（0，410，1020，120）
And then add a Gradient Overlay. use the image below for reference.
然后按照下图设置渐变叠加
渐变编辑器的颜色： #81aa48，#84ac49
Now reduce this layer opacity to 40%
调整该图层的不透明度为40%
Step 8
Let’s add some touches! with the Single Row Marquee Tool create a 1px selection and align it like the following:
现在添加一些润色！用单行选择工具创建一个1px的选区，如下对齐
Set your foreground color to #acd86e then click on Shift+Backspace to fill it; make sure to use foreground color as a filling option.
设置你的前景色为#acd86e，然后按Shift+Backspace填充选区；确保填充模式是前景色。
建议：用直线工具创建一条直线（0，100，1020，1），颜色： #acd86e。
I guarantee you’ll have perfect pixel details
我保证你会有完美的单像素元件
We’re done creating the background elements. so make sure to give them ideal names, organize them, and group them together.
我们完成背景元素。一定要给他们理想的名称，组织他们，把他们归并到一组。
Step 9
Let us be more accurate! drag two new guides according to the following image
步骤9
为了更精确的定位！如下图拖动两条参考线（分别在之前的两条参考线的内侧50px处）
Write some welcoming words with these settings:
- Font Family: Rockwell
- Font size: 40px
- Font weight: Regular
- Anti-aliasing setting: Sharp
- Color: #f4f4f4
按照下面的设置添加欢迎文字：
- 字体： Rockwell
- 字体大小： 40px
- 字体样式： Regular
- 消除锯齿样式：锐利
- 颜色： #f4f4f4
I personally have written: “Here’s our brand new work. Oops Welcome!” ;) but we need to emphasize the word “Welcome!” in somehow. so basically we’ll give it a Gradient Overlay. follow up with the image
我们写好：Here’s our brand new work. Oops Welcome!。;)。 但我们需要以某种方式强调Welcome一词。因此，我们会按照下图给它添加渐变叠加。
为了完美的解决此步，用文字工具分别写出Here’s our brand new work.和Oops和Welcome!，然后对Welcome!添加渐变叠加的图层样式
渐变编辑器的颜色： #2f3032，#2f3336
Now drag two new horizontal guides according to the following image
现在按照下图拖动两条新的水平参考线（一条和文字的底部对齐，另一条在之前的参考线下方50px处），通过计算两条参考线的位置大致是220px和270px
Before we say goodbye to this step, just make sure to organize your text layers.
在和本步骤说拜拜之前，组织你的文字图层（归并到一组）
Step 10
Start by creating a selection of 250x150px (fill it with any color), this will be our image holder.
Call this layer “pic_holder” and try aligning it like the image above.And give it a Stroke
步骤10
创建一个选区，尺寸：250px*150px（任意色填充），这将是我们的图片块
命名此图层为pic_holder，按照下图移到合适的位置，并按照下图添加描边
建议：用矩形工具新建一个矩形（100，299），并按照下图添加描边的图层样式
描边的颜色：#496d23
Let’s add an image of a featured design, to do so go to File > Place and select an image. call its layer “pic”, and make sure to put it right above the layer “pic_holder”.
Right-click on “pic” layer and choose Create Clipping Mask.
在特色区域添加一个图片，为此，点击：文件 > 置入，选择一个文件。命名此图层为pic，确保pic图层在pic_holder图层的上方。
右键pic图层，并选择创建剪贴蒙版
