作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页ps教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
约定：
1、本文的软件是PhotoshopCS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
Step0–Startbysetting-upthedocument
步骤0：设置文档
Openanewdocument:dimensions1200×1640pixelsandresolution72pixels/inch.
新建文档：尺寸：1200px*1640px，分辨率：72px/英寸
Tokeepeverythingalignedwecanusethe960sGridSystemfromhere;itisnotessentialinthiscase,becausewecanusethePhotoshopGuides(Ctrl+Rtoactivaterules,View>NewGuidetoaddtheguide),but,howyoucanseeintheprevioustutorials,sometimesitcanhelp.
为了对齐元素，我们在这儿可以用960网格布局系统；在这里是没有必要的，因为我们可以用PS的参考线（Ctrl+R激活标尺，视图>新建参考线去增加参考线），不过，你可以参考之前的教程，有时能很好的帮助我们
Step1–Background
步骤1：背景
We’regoingtocreatethebasiclayersforthebackground.InthiscaseIhadapreciseideaonhowtoseparatethedifferentblockstocreatethelayout,whyWell,mytutorial,mywebdesigns,everstartfromasketch(orawireframe),itisusefuljusttokeepinmindwhatisthefinalaim;butit’sclearthatduringthedesignprocesswewillprobablyaddnewelements.
我们要创建基本的背景层。在这种情况下，我在布局上精确的区分不同的块，为什么？好了，我的教程，我的网页设计，不断从草图（或线框）中来，它可以帮助记住每块的最终目的是什么，但很明显，在设计过程中，我们可能会添加新的元素。
So,inthiscase,we’llcreate5containers,wherewe’lladdthecontent.
所以，在本教程中，我们要创建5个不同的区域，每个区域添加不同的内容
Addafirstlayer,itwillbeourbackground,withthecolor#ededed.Rasterizethelayer(color#ededed)andaddasubtlenoiseeffect(Filter>Noise>AddNoise…Amount0,5–0,8;checkGaussianandMonochromatic).
添加第一个图层，这会是我们的背景，颜色：#ededed。栅格化图层（颜色：#ededed），并添加一个细微的杂色效果（滤镜>杂色>添加杂色，数量：0.5-0.8；勾选高斯分布和单色）
Drawarectangleonthetopofthepage(usingtheRectangleTool,color#cddcec)and,again,rasterizetheshapeandaddasubtlenoiseeffect(Filter>Noise>AddNoise…Amount0,5–0,8;checkGaussianandMonochromatic).AddaGradientOverlay(SoftLight,54%,fromblacktowhite,Angle90%andScale75%).
在页面的顶部画一个矩形（0，0，1200，128）（用矩形工具，颜色：#cddcec），再次，栅格化图层并添加一个细微的杂色（滤镜>杂色>添加杂色，数量：0.5-0.8；勾选高斯分布和单色）。添加一个渐变叠加（柔光，54%，从黑到白，角度90，缩放75%）
Add,usingtheRectangleTool(U),anewshape(color#608bb6,heightaround400pixels)forthemiddlecontainer,setBlendModetoColorBurnandFillto75%and,thenaddawhiteStrokeof1pixel(fromLayerStyle).Finallytherectangularshapeforthecredits(thefooter),usethesametoolandcolorofthemiddlecontainer,butnowsetBlendtoLinearLightandOpacityto70%.
用矩形工具添加一个矩形（0，753，1200，400）（颜色：#608bb6，高度400px）作为中部区域，设置混合模式为颜色加深，填充为75%，然后添加一个1px的白色描边（从图层样式面板上）。最后，在底部添加一个矩形（0，1592，1200，48）显示字幕（页脚），用和中部区域同样的工具和颜色，只是设置混和模式为线性光（应该是线性加深），不透明度为70%
Belowthefinalresult.
下面是最终的结果
Step2–Backgrounddetails
步骤2：背景细节
Wewanttogivemorecharactertoourbackground!
Addanewlayer(Ctr+Shift+N)andusetheSingleRowMarqueeTooltoadda1pixelwhitelineonthetopodthecanvas.
我们想给背景添加更多的符号
新建一个图层（Ctrl+Shift+N），用单行选框工具在画布的顶部添加一个1px的白色的线
建议：用直线工具画一条直线（0，0，1200，1）比较好
Nowopenanewdocument12×1pixels,unlockthebackgroundlayerandhideitfromtheLayersPalette.Zoomto3200%,addanewlayerandusingtheRectangularMarqueetooladdtwo1×1pixelsquare,fillonewiththecolor#fffandtheotheronewith#000,asshownbelow.ThengotoEdit>DefinePattern.
现在新建一个文档，12px*1px，解锁背景图层并在图层面板中隐藏它。放大至3200%，新建图层，并用矩形选框工具创建2个1px*1px的正方形，一个填充颜色：#ffffff，另一个填充颜色：#000000，如下图所示。然后点击：编辑>定义图案
建议：用铅笔工具比较合适
Wehaveanewpatternthatwe’regoingtouse,gobacktoourmaindocument.Createanewlayerand(withtheRectangularMarqueeTool)drawaselectionthatcoversthewholecanvas,fillitwitharandomcolor,setFillto0%thenaddPatternOverlayfromLayerStyle.
我们即将用我们新建的图案，回到我们的主文档。创建一个新的图层，命名为pattern（用矩形选框工具），画一个覆盖整个画布的选区，随便用一个颜色填充，设置填充为0%，然后添加一个图案叠加的图层样式
Nowit’stimetocreatetheclouds!
接下来是创建云
Youcanadd5guides(84px–186px–600px–1014px–1118px)inordertolimittheworkarea,thenusetheEllipseTooltoaddsomeshapesasshowntocreatethebasicshapes.SelectallthelayersfromtheLayersPalette(Ctrl+clickonlayers)andthenCtr+Gtogrouptheshapes.
你需要添加5条参考线（84px–186px–600px–1014px–1118px）去划分各个工作区域，用椭圆工具按下图添加一些形状去创建基本形状。在图层面板上选择这些层（Ctrl+Click这些图层），然后按Ctrl+G把这些形状归并到一个组
DuplicatethegroupandconvertthecopytoaSmartObject–rightclickonthegroupinthelayerpalette,thenConvertToASmartObject–resterizeitandaddasubtlenoiseffect.Nowyouhavetohidetheexcesspartofthecloudsusingalayermask:Ctrl+clickonthe“Top-background”layerthumbnail(intheLayerPalette),inordertocreateaselectionwhichexcludesthebottomoftheclouds,thenselecttheclouds’layerandaddavectormask.
复制该组并把副本转换为智能对象——在图层面板上组上右键，然后选择转换为智能对象——栅格化图层并添加细微的杂色特效。现在，你必须使用一个图层蒙版隐藏超出部分的云：Ctrl+鼠标单击Top-background图层缩略图图（在“图层”调板中），创建一个选区，不包括底部的云彩，然后选择cloud层并添加图层蒙版。
Thenapplythefollowingstyle.
然后按照下图添加样式，在图层面板将pattern层移到最顶端
颜色叠加的颜色：#ededed
Nowwedrawaniceshadowfortheclouds.Duplicatetheclouds’layerandpositionatethecopyjustbelowtheoriginallayer,setthefillto0%andapplythefollowingstyle.
现在我们给云添加一个漂亮的阴影。复制cloud图层，然后把副本摆放到当前图层的下方（偏右一点的位置），设置填充为0%，然后按照下图添加样式
注：在添加样式之前，还要进行一部分操作，就是把复制云的下半部删除掉
选择云副本的层，然后用矩形选框工具创建如下的选区
按delete键，删除云的副本的下半部
然后填充为0%，并按照下图添加样式
渐变颜色编辑器：左侧的颜色：#4d76a4，右侧的不透明度为80%
Atthispointusethesametechniquestodrawotherclouds.
在这一块上，使用相同的技术来画其他云。云的颜色叠加的颜色选择白颜色
Step3–Headerdetails
Timetoaddthelogo.UsethePenTool(color#79a7db)todesignabilloboard(doubtsonhowtousethePenToolReadthisfantasticarticlewrittenbySebastiano),usetheLineTooltoaddthetwowhitesegments.Thenaddthefollowingstyletothebillboard.
步骤3：头部区域的细节部分
投影的颜色：#79a7db
ApplythesameDropShadowforthetwowhitelinestoo.
给两条白色的直线添加相同的投影，距离改为2
AddthetextusingtheHorizontalTypeTool(T),usingtheBallparkFont,thenaddaDropShadowandasoftGradientOverlay.
用文字工具添加一些文本，字体：Ballpark，并添加一些投影和柔和的渐变叠加的样式，投影和渐变叠加的颜色都是：#79a7db
Afterthelogowearegoingtodrawanice,andsimple,robotcharacterusingZoom,PenTool,EllipseToolandRoundedRectangleTool.Thereisn’ttheneedtoexplainstepbystephowtocreatetherobot,takealooktotheimagebelowand,ataglance,you’llunbderstandhowtodrawour“friend”.
在完成Logo后，我们使用缩放工具、钢笔工具、椭圆工具、圆角矩形工具绘制一个漂亮的、简单的、机器人符号。不需要解释一步一步如何创建机器人，一起来看看下面的图片，一看，你就会明白如何画好我们的friend。
GroupalltheshapesusedtocomposetherobotandAddaLayerMask,aspreviouslydone,toobtainthefollowingresult.
把这些形状归成一组，组成机器人，并添加一个图层蒙版，以前也做过，得到以下结果。
画这个机器人太复杂了。直接在网上找了一张安卓的图片替代这个机器人
Nowwehavetodrawthebirdandthebadge.WeusethePenTool,theBrushToolantheHorizontalTypeTool.Takealookbelowtounderstandhowtoenhanceourlayoutwithasweetand,Irepeat,verysimpleillustration.
现在我们就来画鸟和徽章。我们使用钢笔工具，画笔工具、横排文字工具。看看下面一个小贴士，很简单的例子，以了解如何提高我们的布局。
注：鸟也不画了，直接在网上找
将鸟的图像添加到合适的位置
在鸟的左上侧用矩形工具添加一个矩形，颜色：#ebefbc
用添加锚点工具在矩形的左侧中间添加一个锚点
将新增的锚点往右侧拖动
给该形状添加如下的图层样式：
用直线工具在鸟和形状之间画一条白色的直线
用文字工具在浅黄色形状中添加文字followus，字体：Ballpark
Step4–Firstcontainer
步骤4：首内容区域
Firstofallcreatetheboxwherewewillinserttheinformationoftheteam’smembers.UsetheRectangleTooltodrawa480×425whitebox,addtwogreylinesasshown(CreateClippingmasktolimitethesegmentswithinthewhitebox),andaddalsoatext(useDeliciousFont).
首先要创建一个区域显示团队成员的信息。用矩形工具创建一个白色矩形（532，192），尺寸：480px*425px，如下图添加两条灰色（#eeeeee）的直线（（532，200）和（532，606））（创建剪贴蒙版以使直线只显示在白色矩形的内部），并添加一段文本（字体：Delicious），并按照下图对白色矩形和文字添加样式：
WiththehelpoftheGuidesandHorizontalTypeTool,addphotosandinformationabouttheteam’smember.InthiscaseweuseLucidaSans.
在网格的帮助下，用文字工具，添加团队成员照片和信息。在这里，我们用字体：LucidaSans
设计师姓名文字的字体设置如下：颜色：#1b77a8
身份文字的字体如下：颜色：#a8b9c9
说明信息的字体如下：颜色：#898989
按钮的颜色：#1b77a8
按钮上的文字字体：颜色：#ffffff
Drawawhite“arrow”usingthesametechniqueseenforthe“followus”ribbon.CreatearectangularshapewiththeRectangleToolandthenwiththehelpofGuides,AddAnchorPointToolandDirectSelectionTooltransformitinaniceribbon.
用和followus飘带相同的技术画一个白色的arrow。在网格的帮助下，用矩形工具创建一个矩形，用添加锚点工具添加锚点，然后用直接选择工具把它变成一个漂亮的飘带
Addtheshadowtotheribbon.Duplicatethelayerjustcreated(youcantemporarilyhidethemainshape),setcolorto#000andopacityto5%.RightclickontheshapeandgotoFreeTrasformPathandactivateswarpmodestoobtainthefollowingresult.
给飘带添加投影。复制刚才创建的图层（你可以暂时隐藏主形状），设置颜色为#000000，把不透明度设置为5%。在形状上右键选择自由变换路径并激活变形模式，调整成如下的样子
UsetheHorizontalTypeTooltocreatea“-–-–-–--”string,youcanrasterizeandtrasformittocreatethefollowingeffect.Alsoaddasoftdropshadow.
用文字工具添加-–-–-–--文本，你可以栅格化它并按照下面的效果变换，并添加一个柔软的投影
Finallyaddthetext(usingDeliciousFont).
最后添加一些文字（字体：Delicious）
Nowcreatethreeblockswithdescriptionsofservicesthatthestudioprovides.Inthissectionweusetheawesomeiconsets,createdbyAsherAbbasiforWeGraphics,Wappvol.2andWappvol.1.
Remember:inthiscasetheguidesarereallyusefultofillwithiconsandtextthesection.
现在创建3个块用来描述该工作室提供的服务。在这里，我们要使用一些图标集，AsherAbbasi制作的WeGraphics中的Wappvol.2和Wappvol.1
记住：在这儿，网格能在这儿帮助你摆放图标和文字
标题的字体：颜色：#10789b
段落文字的字体：颜色：#585858，文字右对齐
Addthree“dots”(withanicedropshadow)andenhancethetextwitha1pxwhitedropshadowasshownbelow.
添加三个dots（有着漂亮的投影），颜色：#5a8cc1，并且按下图对之前的文字添加1px的白色投影
点的投影，投影的颜色：#a3c6e6
文字的投影
Wecreatealsoanicemenu,justbelowthewhitebox,itshouldbeclearhowtorealizethismenuatthispoint.WeaddjustasoftInnerShadowtothe“arrows.”
我们要创建漂亮的菜单，在白色的矩形的下方，为了清楚的知道如何实现该菜单，我们要对arrows添加内阴影的样式，并添加文字
Step5–Themiddleribbon
步骤5：中间的飘带
Themiddleelementofourdesignisaninformativeinfographicthatisintroducedbyabigribbonthatcontainsaslogan.Inordertorealizethisribbonwewillcreate5customshapesusing,asusual,thePenTool(Iremind,again,thatifyouareabeginneryoucanreadPhotoshopForBeginners:Thepentooltolearnmoreabouthowtousethistool).Takealookbelowtounderstandwhatkindofshapesweneedtodraw(note:wewilluse#497287forthemainshapesand#798ea4forthedarkershapes).
中间的元素，我们的设计是一个内容丰富的信息图表区域，其引入的是一个大的飘带，其中包含一个标语。为了实现这一功能区，我们像往常一样使用钢笔工具创建5个自定形状，（我再次提醒的是，如果你是一个初学者，你可以阅读入门：Photoshop的钢笔工具，以了解更多有关如何使用这工具）。让我们一起来看看究竟需要绘制什么样的形状，（注：主要形状的颜色：#497287和较深的形状的颜色：#798ea4）。
注：也可以用矩形工具加直接选择工具，来完成相似的形状，如下图，为了醒目，各自用了亮眼的颜色
再分别改颜色，主要形状的颜色：#497287，较深的形状的颜色：#798ea4
WhataboutthestyleWell,weapplythesamestyleforthe“front-shape,”asyoucanseebelow(thepattern,thatwearegoingtouse,isfromOldPaperPatternsonWeGraphics).
样式设置为什么样？好的，我们将添加和front-shape一样的图层样式，就像下图一样（图案，我们打算用的是OldPaperPatternsonWeGraphics）
投影的颜色：#445055
图案叠加的图案用的是自定义的图案，效果也差不多
12*24的图案，左边和上边各一条线，颜色：#f0f0f0
Forthetwolittletrianglesweapplythefollowingstyle:
给2个三角形添加如下的样式：
左侧的三角形
右侧的三角形
Finnallyaddtheslogan.
最后，添加标语
Step6–Theinfographic
步骤6：信息图表
Theideaofaddingalittleinfographicbornsfromtheneedtosynthesizethecreativeprocessofourfictionarydesignstudio.Belowyoucanseethefinaleresult(obvious,it’sjustasimplisticexampleofhowyoucandescribeacreativeprocessbehindthedevelopmentofaproject).
添加简约的信息图表的想法来自需要合成我们的创建过程的设计工厂。下面是你看到的最终结果（很显然，它只是一个简单的例子说明，你可以描述的一个创造性的过程在后面的过程中）
Startdesigningthetwocircles(holddownShifttodrawaperfectcircumference,color#3d3d3d).Setthe,fortheleftshape,Fillto0%;fortherightshape,setBlendModetovividLightandFillto35%.Addthestyleasshownbelow(itisthesameforboththeshapes,PatternOverlayfotheleftshapeapart).
在开始设计两个圆（（240，840，275，275）和（572，837，275，275））（按住Shift键去画一个非常完美的圆，颜色：#3d3d3d）。设置，左侧的圆，填充为0%；右侧的圆，设置混合模式为亮光，填充为35%。按照下图设置图层样式（两个圆都设置一样的，再对左侧添加图案叠加）
内发光的颜色：#aac1d1
再对左侧的添加图案叠加样式，图案是12*12，左上角8*8的黑色方块
Notethattheleftcircleuseacustompattern,wecancreatethispatternadoptingthesametechniqueoftheStep2.
注意左侧的圆用了自定义的图案，我们可以用步骤2中的技术创建这个图案
UseEllipseTool(createthelittlewhitecircleonetimeandthenduplicateittouseagain)andtheLineTool(Weight:3px,color#ffffff)todesignthegraphontheleft.Groupalltheshapesandthelinescreated,duplicatethegroup,convertittosmartobjectandthenrasterizeit.Nowyoucanaddthestyletothelayer.
用椭圆工具（创建小的白色的圆一次，然后复制需要的个数），和直线工具（粗细：3px，颜色：#ffffff），设计左侧的圆。把这些形状和直线归成一组，复制组，转换成智能对象并栅格化。现在，你可以添加图层样式
投影的颜色：#94acb5
UsingthePenTooltodrawsometags(usingvibrantcolors:#d82f4c,#edcd59,#4d85a2,#598b3b)andthennameitusingHorizontalTypeTool,youcanapplyasoftdropshadwotoboth,tagandtext.
接下来用钢笔工具画一些标签（用些鲜艳的颜色：#d82f4c,#edcd59,#4d85a2,#598b3b，实际上使用的颜色分别是#cbc71e，#5a8c45，#e1c325，#ef6d39，#ec354d，#4c849e），并用文字工具添加一些文字，你可以给标签和文字添加想用的柔和的投影样式
标签的图层样式：
文字的图层样式：
Withintherightcircleaddotherthreecircles,setFillto20%,addtext(youcanapplyasoftdropshadowtothestring)asshown.
在右侧的圆中添加另外3个圆（颜色：#092f46），设置填充为20%，添加文本（你可以给文本添加柔和的投影），如下图所示
Nowwehavetohidetheexcesspartsofthe“Design”and“Development”circles.Asalreadyseenwe’llusetheLayerMask.Ctrl+clickontheshapeofthe“Creativity”circleintheLayerPalette,thengotoSelect>Modify>Expandsetthevalueto3pixels.
现在我们要隐藏Design和Development圆的超出部分。就像你们之前看到的，用的是图层蒙版
在图层面板上Ctrl+单击Creativity圆，然后点击：选择>修改>扩展，设置扩展量为3px
Ctrl+Shift+Itoinverttheselectionandthenapplylayermasktotheshapenamed“Design.”
按Ctrl+Shift+I反向选择，然后对Design形状添加图层蒙板
Repeattheoperationcreatinganewselectionandexpandingitasshown.YoucanuseCtrl+Shift+Clickwhenyouneedtoaddtwoormoreselectionsfromvectormaskthumbnail;inthiscasewecreatetheselectionbyclickingon“Design”and“Creativity”shapes.
重复上述操作，创建一个新的选区和如下所示扩大它。当你需要从两个或两个以上的缩览图添加矢量蒙版选区，您可以使用Ctrl+Shift+单击，通过点击Design和Creativity的形状，创建了复合的选区。
Ctrl+Shift+Itoinverttheselectionandthenapplylayermasktotheshapenamed“Development.”
按Ctrl+Shift+I反向选择，然后对Development形状添加图层蒙板
ApplyasoftDropShadowtothethreecirclestoobtainthefollowingresult.
对三个圆添加柔和的投影，得到以下结果。3个圆的其他参数都一样，唯一的区别是角度不一样，每个圆都要仔细的调一调
Drawanewcircle.
画一个漂亮的圆
SetFillto0%andaddawhitestroke(Size3px).
设置填充为0%，并添加白色的描边（大小：3px）
ConverttoSmartObject,rasterizeitandaddadropshadow(thesamedropshadowappliedtothegraphinthis“Step”).Finally,completetheinfographicaddingotherlinesandtagsasshowninthefollowingimage.
转换为智能对象，栅格化并添加投影（在这步添加和之前一样的投影）。最后，按照下图添加其他的标签和直线
Step7–Bottomcontainer
步骤7：底部内容区域
YoucanreproducethissectionusingthesametechniquesoftheStep4.
你可以用步骤4中的技术重现本部分
这部分原教程说得简单，在这里详细的补充一下
用矩形工具创建一个白色矩形（186，1220，484，290）；用直线工具，创建两条直线（186，1229，484，1）和（186，1501，484，1），颜色：#eeeeee；用文字工具添加一些文本，字体：Delicious。对文字和白色矩形添加投影样式
用矩形工具创建2个矩形（201，1252）和（442，1252），尺寸：202px*132px，并添加如下的描边样式，描边的颜色：#bedbed
分别在2个矩形的上方置入图像文件，然后在图层面板上对图像图层右键选择添加剪贴蒙版，使得图像只在矩形中显示出来
如下图，给图像添加说明文字
标题文字的字体：颜色：#1b77a8
副标题文字的字体：颜色：#a8b9c9
段落文字的字体：颜色：#898989
在右侧添加一些图标和文字，以及点，并添加相应的样式。
段落文字的字体：颜色：#585858
添加2个点，颜色：#5a8cc1，并且按下图对之前的文字添加1px的白色投影
复制主内容区域的大的白色飘带，水平翻转，并修改相应的文字
复制主内容区域的右下角的3个飘带按钮，水平翻转，并修改相应的文字
Step8–Credits
Addastringwiththecredits.
最终的结果：
后记：
本教程的特色有3个方面：
1、云彩的制作，利用椭圆工具和相应的图层样式制作逼真的云彩效果
2、飘带的制作，本文中有很多飘带的制作
3、图表的制作，我认为是很有亮点的，改变了原来严肃刻板的布局，有点小清醒的感觉