作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。
约定：
1、本文的软件是Photoshop CS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
Let’s start the tutorial.
让我们开始教程
Open Photoshop and create a new document 1020 by 1550px
打开Photoshop，新建一个文档，尺寸：1020*1550px
Step 1
Select Paint Bucket Tool, set the foreground color to #76b8b9 and click one time on your document.
步骤1
选择油漆桶工具，设置前景色为 #76b8b9。单击一次，对您的文档设置背景色。
Step 2
Select Ellipse Tool, make sure that the foreground color is set to white and create this white shapes:
步骤2
选择椭圆工具，前景颜色设置为白色，创建下图的两个白色的椭圆：
For each of this shape I will apply a Gaussian Blur of about 50 – 60px. To apply a Gaussian Blur go to Filter>Blur>Gaussian Blur.
You may lower the opacity if it’s needed.
Here is my result (a nice fading light):
对每个椭圆，我用 50 — — 60px 的高斯模糊。应用高斯模糊：滤镜 > 模糊 > 高斯模糊。（在做高斯模糊前，会提示栅格化形状，确定即可）
如果感觉需要，您可以降低不透明度。（基本上不需要再降低不透明度了）
这是我的结果 (漂亮的渐隐光效)：
Step 3
Now I will select Line Tool and I will create those 2 lines. Please see the screenshot. For the first line I have used this color: #669495 and for the second one, this color: #9cd8d9
步骤3
参考样张，选择直线工具创建2条直线。第一条直线，颜色： #669495 ，第二条直线，颜色： #9cd8d9
Step 4
I will select Type Tool and I will add my logo. I will write: “healthy tips”.
For healthy I will apply this layer styles:
步骤4
用文字工具，添加我的徽标。写上文字："healthy" 和 "tips"。
对healthy应用图层样式：颜色： # 698c8e
healthy的字体设置如下：原教程中的字体没有找到，只能找了一个比较接近的字体
tips的字体设置如下：也是找了一个接近的字体替换原教程的字体，字体的颜色： # fcf30b
Here’s my result
这是我做的效果
Step 5
Having Type Tool selected I will add the links for navigation. I have use the same layer styles and the same font used for the word “healthy” from the logo.
步骤5
用文本工具添加导航链接。用和healthy相同的图层样式和相同的字体。实际上，我用的是Brush Script MT字体。
Step 6
I will select Rectangle Tool and I will create this shape. Color used: #edec62
步骤6
用矩形工具创建矩形（46，162，439，50）。颜色： #edec62
Step 7
I will select Direct Selection Tool, and I will drag a little bit from the bottom – right corner of the shape
步骤7
用直接选择工具选中黄色的矩形，拖动右下角的点往右下角的方向拖动一点
虽然原文没有说明，个人觉得这里还是要加上投影
效果如下：
Step 8
With Type Tool I will add some text over this shape. I have applied the following layer styles:
步骤8
用文字工具在黄色的区域上添加一些文字。并添加如下的图层样式：
颜色叠加的颜色：# b3b303
My result:
结果如下：
Step 9
With Type Tool I will continue to add some more text
步骤9
继续用文本工具添加一些文字
Step 10
I will create a button, using again Rectangle Tool and Direct Selection Tool. For the text over the button I have applied the layer styles from step 8. My result
步骤10
用和步骤8相同的方法创建一个按钮（（347，415，140，20），颜色： #ffde00 ），按钮的文字是see more …
Step 11
On this step I will use some icons from Premium Files section. I will go to Health/Fitness Vector Icons, I will download them and I will choose an icons showing an apple and I will place it on my document. I will play a little bit with Free Transform Tool (Ctrl +T) till I have something that I like. Here is my result:
步骤11
在此步骤中，我会从Premium Files下载一些图标。我将去Health/Fitness Vector Icons，下载并会选择一个苹果图标显示在我的页面上。我会使用自由变换工具 (Ctrl + T)做一些微调，直到我满意为止。这里是我的结果：
Step 12
Here I will repeat Step 6, 7 and 8 and I will create this shapes.
步骤12
现在，将重复步骤6、7、8，创建如下的形状：
（45，490，926，47），颜色： #f1c96a
（590，502，140，20），颜色： #f3f2d6，图层样式用内阴影
复制上面的形状，旋转180度，然后平移到合适位置，颜色： #f3f2d6，图层样式用内阴影，内阴影的参数设置如下：
（900，494，50，20），颜色： #fedd02
（56，637，257，32），颜色： #ffde00
Step 13
With Type Tool I will add the text over them
步骤13
用文字工具在上面添加一些文本
For “Looking for more healthy tips? Subscribe now!” I have used “Adventure” font with the following layer styles:
对文字Looking for more healthy tips? Subscribe now!，我用Adventure字体（实际使用Brush Script STD），并且采用下面的图层样式：
颜色叠加的颜色：# b3b303
For “Latest Articles” I have applied this layer styles:
对文字Latest Articles采用下面的图层样式
颜色： #45989c
做好如下：
用文本工具添加一些文本
Step 14
With Rectangle Tool I will create this white shape
步骤14
用矩形工具创建如下的白色矩形：（48，693，298，194）
Step 15
With Pen Tool I will create this 2 black triangles and I will apply a Gaussian Blur of about 14px. Here’s my result
步骤15
用钢笔工具添加两个黑色的三角。
对黑色的三角形添加高斯模糊，参数是14px（这个参数还是要斟酌一番，我用的是20px）
Step 16
Next using some images I will create another 5 thumbnails
步骤16
接下来重复创建另外5个，并且添加一些图片的缩略图
Step 17
I will repeat again the steps 6, 7, 8 and I will create this shape:
步骤17
我将重复步骤6、7、8创建下面的形状：（57，1145，258，32），颜色： #ffde00
Step 18
With Type Tool I will add some dummy text
步骤18
用文字工具添加一些文本
Step 19
From our Premium Files – Food Vector Icons and Health/Fitness Vector Icons I will add some vector icons
在 Premium Files – Food Vector Icons 和 Health/Fitness Vector Icons 上找到一些图标并添加之
我最终的结果如下：
心得：
如何在PS中画出纯色的直线？
一般在PS中画直线，用的是直线工具。可是直线工具和矩形工具一样，默认是以形状图层的形式出现的。形状图层的优点是抗锯齿，会通过插值计算出阴影的颜色，这样就不会有锯齿的感觉。而且形状图层在缩放时，也能达到很好的抗锯齿的效果。不过，抗锯齿的效果用在水平线和垂直线上就没有意义了（因为根本没有锯齿），PS在画水平线（或垂直线）时，在直线的旁边添加了一条阴影，这个就有点画蛇添足，有点捣乱了。如下图：
有人提到，可以在PS中关闭抗锯齿的选项，我没有找到，如有哪位网友知道，不妨告知。
在咨询了一些人之后，给出了一个不错的解决方法
新建图层》用钢笔工具画一条水平线》对钢笔工具的水平线进行描边，如图：
在本教程中，步骤3中的两条直线，如果用直线工具，感觉就是比较模糊。用钢笔工具加描边，感觉就是比较锐利。
更多PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 相关文章请关注PHP中文网！
