作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页ps教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
约定：
1、本文的软件是PhotoshopCS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
Haveyoueverwantedtodesignabeautifulwebsitebutjustdidn’tknowhowTobehonest,afewyearsago,thathappenedtometoo.Whilebrowsingtheweb,IsawsomanynicelookingwebsitesandwishedIhadtheskillstocreatesuchdesigns.TodayIcanandI’mgoingtoteachyouhowtodosotoo!Essentially,itrequiresafewPhotoshopskillsandaneyefordetail.Throughthistutorial,Iwillpointoutthesetinydetailswhichmakeawebsitedesignlookbeautiful.FireupPhotoshopandlet’sgetgoing!
你曾否想过设计一个漂亮的网页，但是却不知道如何入手？实话说，以前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的作品。今天，我将教你怎么做这样的设计！实际上，它需要一点PS技能和把握细节的能力。在本教程中，我将会指出这些细微的细节之处，而这些细节将使你的网页设计看起来很漂亮。打开PS，让我们开始吧！
Step1-Downloadthe960GridSystemTemplate
步骤1：下载960网格布局模版
ThedesignsIcreatearenearlyallbasedonthe960GridSystem.So,beforewebeginweneedtodownloadthegridsystemPhotoshoptemplates.Youcanfindthemonthe960.gsofficialwebsite.SimplyunpackthezipfileandlookforPSDtemplates.Youwillseethattherearetwodifferenttypesoftemplates:oneis12_colandtheotheroneis16_col.Thedifferencebetweenthesetwoare,asthenamesuggests,oneismadewith12columnsandtheotheronewith16columns.Toexplainitabitmore,ifyouhave3boxesinyourdesignyouwouldchoosethe12_colgrid,because12ispisableby3;orifyouhave4boxesinyourdesign,youwouldchooseeither12_color16_colgridbecause12and16arepisableby4.Ifyoufollowthistutorial,youwillseethisinaction.
我的设计几乎都是基于960网格系统。所以，在我们开始之前，我们需要下载960网格系统的PS模板。你可以在960.gs官方网站上找到他们。解压zip文件，找到PSD模板。你会看到两种不同类型的模板：一个是12_col的，另一种是16_col的。这两者之间的差异，正如其名所示，一个是12列而另一个16列的。为了更好解释这一点，如果在你的设计中有3个方块，你会选择12_col的，因为12能被3整除的，或者如果你的设计有4个方块，你会选择12_col或16_col的，因为12和16都能被4整除。如果按照本教程中，您将看到这个动作。
Step2-DefiningtheStructure
步骤2：定义网页结构
在我们打开PSD网格模板并开始绘制前，我们首先需要定义我们的网站的布局结构。你可以看到上面的图片显示的例子。这是一个比较复杂的结构，是因为我们每一个布局都还有各自的布局。
Step3
步骤3
Afterwe’vedefinedoursitestructurewe’rereadytomoveon.Openyour16_col.psdtemplate.GotoImage>Canvassize.Setthecanvasto1200pxwideand1700pxhigh.Setthebackgroundcolorto#ffffff.在定义好我们网站的结构之后继续。打开16_col.psd模版。点击：图像>画布大小。设置画布为1200px宽和1700px高。并设置背景颜色：#ffffff
由于本翻译教程不下载960布局系统，故本步改为新建文档，尺寸：1200px*1700px。背景色：#ffffff
Step4
步骤4
NowpicktheRectangleToolanddrawinarectanglethefullcanvaswidthandabout80pxhigh.Fillitwiththecolor#dddddd.
现在用矩形工具画一个矩形（0，0，1200，80），宽度为整个画布，高度为80px。填充的颜色：#dddddd
Step5
步骤5
CreateanewlayerabovetherectangleandsetLayermodetoOverlay.Ctrl+clicktherectanglelayer.Nowtherectanglewillbeselected.Choosea600pxsoftbrush,setthecolortowhite,andclickafewtimeswiththeedgeofthebrushjustabitovertheselection,likeshownontheimage.Thiswayyoucreateanice,subtlelighteffect.Additionallyyoucanlinkthesetwolayers.
在矩形的上方新建图层，图层的混合模式选择叠加。Ctrl+click点击矩形图层。会出现该矩形的选区。选择一个600px的软刷，设置颜色为白色，然后用笔刷的底部贴近选区的上方点击几次。通过这个你画出了一个细微的光亮的效果。现在可以把这两层链接起来了。
Step6
步骤6
Newlayer.ChoosetheRectangletoolagainanddrawinathindarkgreyrectangle,asshownintheimage.
新建图层。再次选择矩形工具，如上图所示画一个瘦长的深灰色矩形（0，0，1200，6），颜色：#454545
Step7
步骤7
WiththeRectangletoolselected,drawinabigboxaround500pxunderneaththetoprectangle.Makeit575pxhighandgiveitaLinearGradientoverlayfrom#d2d2d0to#ffffff,direction-90,Scale100%.
继续选择矩形工具，在距离上端长方形500px处画一个高575px的长方形（0，540，1200，575）。注：原文的尺寸似乎是约数，不是很精细，有误差，故在本文中作了修正。设置渐变叠加图层样式，颜色由#d2d2d0到#ffffff的渐变色，角度为-90，缩放为100%。
Step8
步骤8
NowwearegoingtocreatethesamelighteffectasdescribedinStep5.Wewillbeusingthistechniquealot;sonexttimeIwilljustreferyoutoStep5fortheeffect.
现在我们要象步骤5一样添加相同的光照效果。我们将多次使用这种技术，所以下一次，我将提示使用步骤5的效果。
Createanewlayeraboveallthecurrentlayers.Ctrl+clickthebigrectangle.Choosea600pxsoftbrush,setthecolortowhite,andclickafewtimeswiththeedgeofthebrushjustabitovertheselection,asshownintheimage.
在本层上新建图层。Ctrl+Click这个大的矩形。选择一个600px的软刷，设置颜色为白色，然后用笔刷的底部贴近选区的上方点击几次。如图所示，通过这个你画出了一个细微的光亮的效果。
Step9
步骤9
Createanewlayeranddrawinabigrectangleabout400pxhigh.Thisoneisusedforourheader.Fillitwithanicebluegradientfrom#2787b7to#258fcd.
Seehowsubtlethecolorchangeis
新建一个图层并画一个大的高400px的矩形（0，130，1200，410）。这个将用于我们的页头。用一个漂亮的蓝色渐变去填充它，颜色从#2787b7到#258fcd
以下展示颜色的微妙变化：
Step10
步骤10
Addadarkblue1pxlineonthebottomoftheheaderbox,applytheDropshadoweffect.FordropshadowuseBlendmode:Multiply,Opacity:65%,Angle:-90,Distance:1pxandSize:6px.Next,createanewlayeraboveanddrawanother1pxwhitelineunderthedarkblueone.Thiswaywecreatesharpedgesforourcontentbox.Basicallyyoucanapplythisbordertechniqueoneveryboxinyourdesignjustwithdifferentcolors.
在页首长方块底端画一条1px的暗蓝色（0，539，1200，1）的线，颜色：#0e517e，添加投影效果。混合模式：正片叠底，不透明度：65%，方向：-90，距离：1px，大小：6px。之后再建一个新层，在暗蓝色线下面画一条1px的白线（0，540，1200，1）。通过这种方式，我们就可以创建一个轮廓鲜明的边缘。你可以在你的设计中把这个技巧用于其他色块。
Step11
步骤11
Createanewlayer,andwiththeRectangleTool,drawa50pxhighrectangleinthetoppartofthecanvas,justasshownintheimage.Thiswillbeusedforournavigation.
新建图层，在画布的顶部区域，用矩形工具画一个高50px的矩形（0，80，1200，50），颜色：#e4e4e4，如图所示。这个将用于我们的导航栏。
ApplyaDropshadow.Usethevaluesshownintheimage.
添加投影效果，如图所示设置参数。
Step12
步骤12
Timeforthenavigation.UsetheRoundedRectangleToolandsettheradiusto5px.Drawarectangle,fillitwith#f6a836,andapplythefollowingeffects:InnerShadow–color:#ffffff,Blendmode:overlay,Opacity:60%,Angle:120*,Distance:7px,Size:6px.Innerglow–Blendmode:normal,color:#ffffff,Size:4px.Everythingelseleavedefault.Stroke–Size:1px,Position:inside,color:#ce7e01.
开始制作导航栏。用圆角矩形工具，设置半径为5px，画一个圆角矩形（130，92，70，27），颜色：#f6a836，之后给他添加以下效果：
1、内阴影—颜色：#ffffff，混合模式：叠加，不透明度：60%，角度：120，距离：7px，大小：6px。
2、内发光—混合模式：正常，颜色：#ffffff，大小：4px。其他参数默认设置。
3、描边—大小：1px，位置：内部，颜色：#ce7e01。
NowselecttherectanglewithCtrl+click.GotoSelect>Modify>Contractandenter1px.
按Ctrl+click选择圆角矩形。点击：选择>修改>收缩，输入1px确定
Createanewlayerabove,settheBlendmodetoOverlayandcreatethesameeffectdescribedintheStep5usingasmallerbrushsizethistime.Thenaddthenavigationtext.IusedArialfornavigationlinks,allcapsandAntialiassetto“none”.
在上面新建图层,把混合模式设置成叠加，然后依照步骤5那样加照亮效果，不过这次用的是小笔刷。然后增加导航栏文字.我用Arial字体作为导航的链接字体，所有效果设置为“无”。
字体：Arial，字号：12点，活动链接的文字颜色：#7b3600，非活动链接的文字颜色：#838383
Step13
步骤13
Nowlet’screatethesearchbox.WiththeRoundedRectangleTool,radius5px,createasearchboxpositionedontherightsideofthegridlayoutandinthemiddleofthetopgraystripefromStep4.Addtheselayerstyles:InnerShadow–color:#000000,Blendmode:Multiply,Opacity:9%,Angle:90*,Distance:0px,Size:6px.Stroke–Size:1px,Position:inside,color:#dfdfdf.
现在开始创建搜索框，用圆角矩形工具，半径5px，在网格布局的右侧、步骤4中创建的顶端灰色矩形中部创建一个用于搜索的矩形（925，26，142，30），颜色：#5c6457。添加以下样式：
内阴影—颜色：#000000，混合模式：正片叠底，不透明度：9%，角度：90，距离：0px，大小：6px。
描边—大小：1px，位置：内部，颜色：#dfdfdf。
Iaddedthe“search”textandalightgray“GO”button.Thisishowitshouldlook.
在上面添加search的文本和一个亮灰色的GO按钮。如下图所示：
文字的颜色：#a0a39c。白色的圆角矩形的描边和搜索框的描边一样。
SofarwehavealotoflayersandneedtoorganizethingsabitsowewillcreateanewLayerfolderandnameit“search”.SelectalllayersthatmakethesearchfieldandjustClick+draginsidethenewfolder.Laterwe’regoingtoorganizeothercontentinsidethefolderssowehaveaniceorganizedlayerpalette.
Step14
步骤14
Nowcreateanewlayeranddrawa“SignUp”buttonthesamewaywecreatedthesearchfield–justhalfthewidth.Placeitunderthesearchfieldinthemiddleofthenavigationstripe.
新建图层，用创建搜索框同样的方法画一个SignUp按钮（998，91，73，30），颜色：#258dca——只有一半的宽度。把它摆放在搜索框的下面的导航区域的中部。
用PS新建文档，尺寸：4px*4px，背景透明，用画笔从左上角到右下角点4个白点
然后定义图案，关闭新建的文档。回到主文档，给该按钮添加图案叠加的样式
添加和搜索框一样的描边样式，并按照下图添加内阴影样式
在按钮上添加SIGNUP文字，文字颜色白色。在按钮的左侧添加Login（黑色）or（灰色）的文字
Againwe’recreatingtheeffectfromStep5.
我们再次创建步骤5中的特效
Useasmallersoftbrushsize.Inthiscaseitwas45px.
Step15
步骤15
AfteraddingthelogoandtheTaglinethisishowoursiteshouldlooklikenow.
加了LOGO和网站描述之后，我们的网页就如下所示。
LOGO的制作：
用圆角矩形工具新建一个圆角矩形（132，20，77，43），颜色：#2c2c2c
用步骤5的方法在圆角矩形的上方和下方添加高亮效果
用文字工具添加文字BVD，和导航栏的文字字体、字号相同。文字纵向缩放300%，水平缩放180%，文字颜色：#ffffff。给它添加如下的投影样式
在LOGO的右侧，添加文字Beautifulwebsitedesign。字体：Androgyne，字号：30点，颜色：fdfdfd。添加描边样式：描边的颜色：#8e8e8e
Step16
步骤16
Nowwe’recomingbacktoourlayerorganizationmentionedafewstepsearlier.Createanewemptylayerfolderandnameit“top_bar”.Moveallgraphicsfromthetopofthelayoutinsidethisfolder(logo,tagline,searchfield,signupbutton,navigationandbackgrounds).
现在回到我们之前一些步骤提到的图层结构。创建一个新组top_bar。移动所有的图层到这个组里面（包括LOGO，说明文字，搜索框，SIGNUP按钮，导航栏和背景）。
Createanotheremptylayerfolderandnameit“header”.Thisiswherewewillputourheadergraphics.Thisishowitshouldlook.
创建另外一个组并命名为header。这里用于放置头部图层。如图所示
Step17
步骤17
Ourheaderlooksabitplainrightnowsowe’regoingtoaddthesamelighteffecteverywhereelseonthesite.Selecttheheaderbox(blue).CreateanewemptylayeraboveandsetthemodetoOverlay.
头部看起来有的平淡，因此我们可以在任意位置加相同的亮光效果。选中蓝色的头部区域。在它上面创建一个新层并设置其混合样式为叠加。
Pickalargesoftbrush600px,color#ffffffandclickafewtimesintheareaunderthenavigation.Furthermore,togainmoredepth,wecanswitchthecolortoblackanddothesamethingjustinthebottompartoftheheader.Giveitatry!
选一个600px的大软刷，颜色：#ffffff。然后在导航栏的下方点击几次。如果想更有层次感，你还可以把颜色调为黑色，然后在头部区底部重复同样操作。试一试
Step18
步骤18
InthisstepIwillexplaintoyouhowIcreatedthereflectionfortheheaderimages.Taketwoimagesofyourchoice,IusedSafariscreenshotsofmytwoothertemplates,scaleonedownandplaceitbehindthebiggerone.Copybothlayers,andwiththeFreeTransformTool,flipthefirstimageandthentheotherone.Shiftbothimagesafewpixelsdown.NowmakeaselectionfromoutsidethebottomparttomiddleofthefirstflippedimagewiththeRectangularMarqueeTool.GotoSelect>Modify>Featherandtype30pxormore.Youshouldhaveaselectionsimilartotheshownintheimage.Pressthedeletekeyafewtimesandyouwillcreateanicefadedreflectionfromtheoriginalimage.Repeatthisstepforthesecondimage.
在这步，我将向你展示如何创建头部区域的图像的反光效果。选择你的两张图片，我用的是我的其他模版的Safari的屏幕快照（我这里用之前的两个网页快照），缩放其中一张并摆放在大的图片的后方。复制所有的图层，并用自由变换工具，翻转第一张图片和另一张图片。按住Shift键，并将图片下移一些像素。用矩形选框工具创建一个从第一张翻转图片的底部的外边到图片中部的选区。点击：选择>修改>羽化，输入30px或者更多。你将获得如下图所示的相似选区。按Delete键几次，你会创建一个漂亮的原始图像的淡出反光效果。对第二张图片重复这些步骤。
Nowtomakethosetwoimagesstandoutabit,createanewlayerandsetthemodetoOverlay.CreatetheeffectdescribedinStep5.
为了让两个图片更加突出，可以新建一层，设置该层混合模式为叠加，重复步骤5的添加效果。（这一步是否是必须，还得视情况而定，我用了这两张图片后，反而觉得这一步是多余的）
Thisishowourheadershouldlookafteraddinganicetaglineandsomebuttons.Don’tforgettoputallthesegraphicsinsidethe“header”layer
foldertokeepthingsorganizedhere;)
在添加了一些按钮和漂亮的文字之后，头部区域就是如图所示。不要忘记把图层都放在header组里面。
左侧第一段文字的字体如下设置
左侧第二段文字的字体设置如下
左侧第三段文字的字体设置如下
下面的两个按钮，右侧的按钮（310，455，159，38），颜色：#f6a836，样式复制导航栏的左边按钮的样式。文字的颜色：#ffffff
左侧的按钮（130，455，159，38），颜色：#c8c8c8，样式复制刚才右边的按钮，描边的颜色改为：#7d7d7d。文字的颜色：#5c5c5c
Step19
步骤19
Ifyoulookatthefinalimagepreview,youcanseethatwehavenicetabsinthecontentarea.Inordertocreatethesetabswe’llneedtoperformafewextrasteps,butit’sdefinitelyworthit.First,createalargerectangleshapewiththeRoundedRectangleTool.Makeit70pxhighandaradiusof10pxormoreifyouwish.Nowwehavetogetridofthebottomradiusandmakeaperfectcorneroutofit.PicktheDirectSelectionToolandclickontheshapepath.ClicktheverticalpointanddragitdownwhileholdingtheShiftkeyuntilitreachesthesamelevelwiththehorizontalaxis.Sofarsogoodbutit’sstilldeformed.Youseethelittlehandle.Clickonitandmoveitupwardstothepointofthepath.
如果你看最终效果图，你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要一些额外操作，但这是很有必要的。首先用圆角矩形工具创建一个高70px圆角半径为10px的圆角矩形（128，589，944，70），颜色：#e1e1e1。现在我们不要底部圆角，使它形成一个完美的角。用直接选择工具单击这个图形的路径，单击垂直方向的点然后按住shift键往下拉到水平坐标轴的高度。现在看起来不错了，但是还是比较简陋。然后你看见一个小的控制点。单击它并移动到路径上的点。
Nowwehavecreatedaperfectcorner.Thisishowitshouldlook.Repeatthisstepfortherightbottomcorner.
现在我们创建一个完美的角。就像图中所示。在右下角也重复该步骤，并给它添加一个1px的描边，描边的颜色：#b0b0b0
Step20
步骤20
PicktheLinetoolandsetitto1px.选取直线工具，并设置为1px
Step21
步骤21
DrawingrayseparatorswhileholdingtheShiftkey.
按住Shift键画一些分隔符（364，589，1，70）、（600，589，1，70）、（836，589，1，70），颜色：#b0b0b0
Step22
步骤22
Placesomeicons,headings,andadescriptionforeachtab.IusedRayCheungiconsavailablefrom–WebAppers.com.Usuallyonetabisalwaysactiveandtheothersareinactive.Tomakethisclearinourdesign,weneedtofindawaytoaccomplishthis.Idesaturatedtheothericonsandreducedtheopacityfortheheadingsandtextwhilekeepingthefirstactivetabcolorfulandbright.
在每个切换页摆放一些图标、标题、和一些说明文字。我用的是RayCheungicons——来自WebAppers.com（并将其中一个图标放在头部区域的图片处）。通常一个标签页是活动的，而其他活动页是非活动的。要在我们的设计中明确说明这点，我们需要找到方法来实现它。我降低其他图标的饱和度（点击：图像>调整>去色）并且降低标题文字和描述文字的不透明度（60%）以保证活动的切换页处于高亮状态。
Step23
步骤23
Tomaketheactivetabmoreobvious,we’regoingtogiveitafadedwhitebackground.Todothisfirstselectthewholeobjectandthensubtractfromtheselectiontogetonlythefirsttabselected.
为了使活动的切换页更加明显，我们将给它添加渐白的背景。为了达到这样的效果我们把整个对象选中然后裁切选区，最终使选中的范围只有第一个按钮。
Thisiswhatyourselectionshouldlooklike.
你的选区如下图所示
Withasmallersoftbrush,paintinawhitebackground.
新建图层，用一个小的软刷，用白色涂抹背景
Step24
步骤24
Addtheshadow.Createadarkgrayrectanglebehindthetabs,asshownintheimage.
添加投影。在切换页的背后创建一个深灰色的矩形（78，609，1044，50），颜色：#303030，如图所示
Addavectormaskbyclickingthelittleiconinthebottomofthelayerpalette.
点击图层面板底部的小图标创建图层蒙版
Setthecolortoblack,pickalargesoftbrush,andstartdeletingpartsoftherectangle.Asaresult,wegetanicefakeshadoweffectbehindourtabs.
设置颜色为黑色，选区一个大的软刷，然后开始删除矩形的部分。结果，我们创建了一个比较好看的阴影效果
也可以用渐变工具在蒙版内添加一个黑色到透明的渐变，如下图所示
Finalytheattentiontodetail.Drawina1pxgraylineonthebottomofthetabs.Maskthelayeragainlikedescribedearlierandwithabigsoftbrushdeletetheleftandrightendoftheline.Nowwegetanicelyfadedlinethatfollowsourshadowbehindthetabs.
最后我们加点细节。在切换页下方画一个1px的灰线（78，659，1044，1），颜色：#b0b0b0。然后如上一步一样的方式使左右两端产生渐变，也可以用上面所讲的用渐变来实现。现在我们就在切换页的后方紧挨着阴影的地方得到一条比较时尚好看的线。
Thisishowourtabsshouldlook.这就是我们切换页看起来的样子。
Step25
步骤25
It’stimetodesignthecontentforourfirsttab.Weneedafeatureddesignimage,aniceheadingandsometext.Firstwewillcreatethefeaturedimage.Ithoughtthatitwouldbenicetobreaktheedginessofthedesignbycreatinganicestackedphotoseffectforourfeatureddesignimage.Todothis,drawawhiterectanglewitha1pxlightgrayborder,andaverysubtledropshadoweffect.
是时候设计第一个切换页的内容了。我们需要一个有特色的设计图像，有好看的标题和一些文字内容。首先我们得创建这个有特色的图片。我想，这将是很好的打破尖锐棱角的设计的时候，我们为特色设计图像的创造一个好看的叠照片的效果。要做到这一点，绘制一个1px浅灰色（颜色：#b0b0b0）边框的白色矩形（136，714，404，224），和一个非常微妙的阴影效果。
NowcopythatlayerandrotateitslightlywiththeFreeTransformTool.Dothisonemoretime.
复制这一层并用自由变形工具稍微旋转。重复这个操作几次（3次比较好）
Importyourfeaturedimageandplaceitoverthewhiterectangles.Don’tworryiftheimageisflowingoutsidetheboxes,wewillfixthat.Makeaselectionfromthetoprectangle,gotoSelect>Modify>Contractandinsert5px.WiththefeaturedimagelayerselectedclicktheQuickMaskicononthebottomofourlayerpalette.Youwillgetnicelyborderedimageeffectlikeshownintheimagehere.
把你选好的图片导进来，放在白色长方形上面。不用担心图片会超出方块，我们会修复它。按照最上面的矩形新建一个选区，点击：选择>修改>收缩，输入5px，确认。然后在图层管理区下方点击添加图层蒙版，这样图片就只显示选区范围。
Thisishowyourlayerordershouldlooklike.
你现在的图层顺序看起来如下所示
Step26
步骤26
Don’tforgettokeepthingsorganized.Socreatemorelayerfoldersandorganizeyourpalette.ThisishowIhavedoneit.
不要忘记整理图层，这里新建图层夹把图层归类。
Byaddinganiceheading,sometext,andbulletlists,ourwebdesignworkisfinished.Let’smoveon.
增加一个漂亮的标题、一些文本和列表，我们的设计工作又完成一部分。现在继续下一步吧。
标题文字字体：Verdana；字号：30px，加粗；颜色：#227dac
副标题文字字体：Verdana；字号：14px，加粗；颜色：#494949
列表文字字体：Verdana；字号：12px；颜色：#494949
列表前的项目号，由圆和自定义形状中的勾这个形状组合起来的，圆的颜色：#227dac；勾的颜色：#ffffff
列表下的文字字体：Verdana；字号：12px，加粗；颜色：#494949
图片下方的字体：Verdana；字号：12px，倾斜；左侧文字颜色：#227dac，右侧文字颜色：#494949
Andagainsomelayerorganization.再组织一下图层
当前的结果：
Step27:Testimonials
步骤27：感谢信
Ithoughtthisoneshouldbehuge;soI’veputthisinabigboxrightafterthemainsection.Firstdrawabiglightgrayrectangleabout220pxhigh.Giveita1pxgrayborder.
我想这应该是巨大的，所以我把它放在一个在主要部分下方的大方块里。首先画一个大的高220px的亮灰色矩形（130，1016，940，222），颜色：#f2f2f2。给它一个1px的灰色（颜色：#b0b0b0）边框。
Thendrawinanotherbrighterrectangleby10pxsmalleronallsides.Alsoadda1pxlightgrayborder.
然后画另一个各边都缩进10px的亮一点的矩形（140，1116，920，202），颜色：#f7f7f7。也添加1px的灰色的边框
Finallyaddsometextandwe’redone!
最后添加一些文本完成这部分的制作
抬头文字的字体：Verdana；字号：12px，加粗；颜色：#de8d55
正文文字的字体：Androgyne；字号：24px；颜色：#696969
落款文字，左侧文字：Androgyne；字号：14px；颜色：#696969；右侧文字：Verdana；字号：14px，加粗；颜色：#494949
左侧按钮，圆角矩形（257，1190，186，27），圆角半径：3px，颜色：#f5f5f5，描边颜色：#b0b0b0
按钮文字的字体：Verdana，字号：12px；水平缩放80%；颜色：#494949
Step28
步骤28
It’stimeforthefooter.Drawabig400pxhigh,darkgrayrectangle.
现在开始制作页脚。画一个大的高400px深灰色（颜色：#4b4d4a）的矩形（0，1300，1200，400）
Step29
步骤29
AddsomelighteffectthesamewayasdescribedinStep5.
按照步骤5的做法添加一些光亮的效果
Step30
步骤30
Next,drawa10pxhighrectangleabovethefooterandaddsomesubtleeffectbyaddingtwomorelinesontopandbottomlikeshownintheimage.
下来，如图所示，在区域上方画一个10像素高的矩形（0，1290，1200，10），颜色：#dcdcdc，并且通过在顶端和底部各多加两条线增强细节处理。
四条线分别是：（0，1290，1200，1），颜色：#a3a3a3；（0，1291，1200，1），颜色：#ffffff；（0，1299，1200，1），颜色：#ffffff；（0，1300，1200，1），颜色：#3e3e3e
Step31
步骤31
Createtheverybottompartwheretherepeatednavigationwillbeplaced.Youcancopytherectanglefromthetopwherethenavigationisplaced,moveitdownandmakeitabout40pxhigh.Placeitattheverybottomofyourcanvas.Pleasenotethatyoumayneedtoexpandyourcanvasatthispointsothatallyourgraphicsfit.Ifyouneedtodothat,thengotoImage>Canvassizeandsettheheighttofittheentirelayout.
Step32
步骤32
Attentiontodetailagain.Adda1pxwhitelineabovethefooternavigationboxtogiveitanicebordereffect.
再次强化细节。给页脚的导航区顶端加一条1px的白色边，这样有比较好的边框效果。
Step33
步骤33
Addsomefootercontentandseparateitnicelywithinyourgrid.
给页脚增加内容，你可以依据网格合理安置它们。
用直线工具画四条直线（130，1346，220，1）、（370，1346，220，1）、（610，1346，220，1）、（850，1346，220，1），颜色：#acacac
在直线的上方用文字工具添加LATESTBLOGENTRIES、RECENTCOMMENTS、ADVERTISING、TWEETERSTUFF。文字字体：Verdana；字号：12px，垂直缩放150%；颜色：#e6e6e6
在第一列的下方，建立三个博客条目。左侧的按钮是用圆角矩形，半径5px，尺寸：40px*18px，颜色：#da7203。图层的样式复制上面导航栏中黄色按钮的图层样式
按钮文字的字体：VerdanaBold；字号：9px，加粗、倾斜；颜色：#e6e6e6
按钮右侧文字的字体：Verdana；字号：12px，加粗；颜色：#e6e6e6
下方文字的字体：Verdana；字号：12px；颜色：#e6e6e6
置入对话图片
给它添加颜色叠加的图层样式，颜色：#ff8a00
每个列表前有刚才做好的对话图标，右侧的文字字体：Verdana；字号：12px；颜色：#e6e6e6。人名加粗
下面的留言文字字体：Verdana；字号：12px；颜色：#e6e6e6
在第三列的下方，用矩形工具画四个矩形，尺寸：100px*100px，分别是（610，1368）、（730，1368）、（610，1482）、（730，1482）
给他们添加白色的描边
在第四列的下方，用圆角矩形工具新建一个圆角矩形（850，1367，221，135），圆角半径为5px
再用多边形工具创建一个正倒三角形
用路径选择工具选择这个三角形，并拖动到合适的位置
再用直接选择工具选择最下面的点，按住Shift，将点上移到合适的位置
最后给该图层添加如下的图层样式
描边的颜色：#fbfbfb
内发光的颜色：#a3a3a3
再把该形状的填充色改成：#eaeaea
在该形状内添加文字，字体：Androgyne；字号：12px；颜色分别是：#cc580f，#b95cef，#494949
在下方添加文字和图标
文字字体：Androgyne；字号：12px；颜色是：#f3f3f3。在下面添加一条白线，颜色：#f3f3f3
在右侧添加图片
给图片添加如下的图层样式，颜色：#2e0909，并将图层的不透明度改为28%
Step34
步骤34
Finallyorganizeallyourlayersinsidethelayerfolders.ThisishowI’vedoneit.