作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
约定：
1、本文的软件是PhotoshopCS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
Let’sstartthetutorial.
让我们开始教程
OpenPhotoshopandcreateanewdocument1020by1550px
打开Photoshop，新建一个文档，尺寸：1020*1550px
Step1
SelectPaintBucketTool,settheforegroundcolorto#76b8b9andclickonetimeonyourdocument.
步骤1
选择油漆桶工具，设置前景色为#76b8b9。单击一次，对您的文档设置背景色。
Step2
SelectEllipseTool,makesurethattheforegroundcolorissettowhiteandcreatethiswhiteshapes:
步骤2
选择椭圆工具，前景颜色设置为白色，创建下图的两个白色的椭圆：
ForeachofthisshapeIwillapplyaGaussianBlurofabout50–60px.ToapplyaGaussianBlurgotoFilter>Blur>GaussianBlur.Youmaylowertheopacityifit’sneeded.Hereismyresult(anicefadinglight):
对每个椭圆，我用50——60px的高斯模糊。应用高斯模糊：滤镜>模糊>高斯模糊。（在做高斯模糊前，会提示栅格化形状，确定即可）
如果感觉需要，您可以降低不透明度。（基本上不需要再降低不透明度了）
这是我的结果(漂亮的渐隐光效)：
Step3
NowIwillselectLineToolandIwillcreatethose2lines.Pleaseseethescreenshot.ForthefirstlineIhaveusedthiscolor:#669495andforthesecondone,thiscolor:#9cd8d9
步骤3
参考样张，选择直线工具创建2条直线。第一条直线，颜色：#669495，第二条直线，颜色：#9cd8d9
Step4
IwillselectTypeToolandIwilladdmylogo.Iwillwrite:“healthytips”.ForhealthyIwillapplythislayerstyles:
步骤4
用文字工具，添加我的徽标。写上文字："healthy"和"tips"。
对healthy应用图层样式：颜色：#698c8e
healthy的字体设置如下：原教程中的字体没有找到，只能找了一个比较接近的字体
tips的字体设置如下：也是找了一个接近的字体替换原教程的字体，字体的颜色：#fcf30b
Here’smyresult
这是我做的效果
Step5
HavingTypeToolselectedIwilladdthelinksfornavigation.Ihaveusethesamelayerstylesandthesamefontusedfortheword“healthy”fromthelogo.
步骤5
用文本工具添加导航链接。用和healthy相同的图层样式和相同的字体。实际上，我用的是BrushScriptMT字体。
Step6
IwillselectRectangleToolandIwillcreatethisshape.Colorused:#edec62
步骤6
用矩形工具创建矩形（46，162，439，50）。颜色：#edec62
Step7
IwillselectDirectSelectionTool,andIwilldragalittlebitfromthebottom–rightcorneroftheshape
步骤7
用直接选择工具选中黄色的矩形，拖动右下角的点往右下角的方向拖动一点
虽然原文没有说明，个人觉得这里还是要加上投影
效果如下：
Step8
WithTypeToolIwilladdsometextoverthisshape.Ihaveappliedthefollowinglayerstyles:
步骤8
用文字工具在黄色的区域上添加一些文字。并添加如下的图层样式：
颜色叠加的颜色：#b3b303
Myresult:
结果如下：
Step9
WithTypeToolIwillcontinuetoaddsomemoretext
步骤9
继续用文本工具添加一些文字
Step10
Iwillcreateabutton,usingagainRectangleToolandDirectSelectionTool.ForthetextoverthebuttonIhaveappliedthelayerstylesfromstep8.Myresult
步骤10
用和步骤8相同的方法创建一个按钮（（347，415，140，20），颜色：#ffde00），按钮的文字是seemore…
Step11
步骤11
Step12
HereIwillrepeatStep6,7and8andIwillcreatethisshapes.
步骤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
Step13
WithTypeToolIwilladdthetextoverthem
步骤13
用文字工具在上面添加一些文本
For“LookingformorehealthytipsSubscribenow!”Ihaveused“Adventure”fontwiththefollowinglayerstyles:
对文字LookingformorehealthytipsSubscribenow!，我用Adventure字体（实际使用BrushScriptSTD），并且采用下面的图层样式：
For“LatestArticles”Ihaveappliedthislayerstyles:
对文字LatestArticles采用下面的图层样式
颜色：#45989c
做好如下：
用文本工具添加一些文本
Step14
WithRectangleToolIwillcreatethiswhiteshape
步骤14
用矩形工具创建如下的白色矩形：（48，693，298，194）
Step15
WithPenToolIwillcreatethis2blacktrianglesandIwillapplyaGaussianBlurofabout14px.Here’smyresult
步骤15
用钢笔工具添加两个黑色的三角。
对黑色的三角形添加高斯模糊，参数是14px（这个参数还是要斟酌一番，我用的是20px）
Step16
NextusingsomeimagesIwillcreateanother5thumbnails
步骤16
接下来重复创建另外5个，并且添加一些图片的缩略图
Step17
Iwillrepeatagainthesteps6,7,8andIwillcreatethisshape:
步骤17
我将重复步骤6、7、8创建下面的形状：（57，1145，258，32），颜色：#ffde00
Step18
WithTypeToolIwilladdsomedummytext
步骤18
用文字工具添加一些文本
Step19
我最终的结果如下：
心得：
如何在PS中画出纯色的直线？
一般在PS中画直线，用的是直线工具。可是直线工具和矩形工具一样，默认是以形状图层的形式出现的。形状图层的优点是抗锯齿，会通过插值计算出阴影的颜色，这样就不会有锯齿的感觉。而且形状图层在缩放时，也能达到很好的抗锯齿的效果。不过，抗锯齿的效果用在水平线和垂直线上就没有意义了（因为根本没有锯齿），PS在画水平线（或垂直线）时，在直线的旁边添加了一条阴影，这个就有点画蛇添足，有点捣乱了。如下图：
有人提到，可以在PS中关闭抗锯齿的选项，我没有找到，如有哪位网友知道，不妨告知。
在咨询了一些人之后，给出了一个不错的解决方法
新建图层》用钢笔工具画一条水平线》对钢笔工具的水平线进行描边，如图：
在本教程中，步骤3中的两条直线，如果用直线工具，感觉就是比较模糊。用钢笔工具加描边，感觉就是比较锐利。