作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
约定：
1、本文的软件是PhotoshopCS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
Inthisweek’stutorialwewillcreateagallerylayout.Iwillnotbeusingthe960gridinthistutorial,thepurposeistoshowbeginnersouttherehowimportanttheRulerTooliswhenyouaredesigninginPhotoshop.Wewillalsotacklehowtocreateandusepatternsandusingmaskandfilters.
在这个每周教程中，我们要创建一个画廊的网页布局。我将在本教程中不使用960网格系统，目的是给初学者展示标尺工具在PS中开始设计网页是多么重要。我们也会演示如何创建使用图案、使用蒙版和滤镜
Step1:SettinguptheDocument
步骤1：设置文档
Startbycreatinga1200pxx1850pxdocumentinPhotoshop.
开始于在PS中新建文档，尺寸：1200px*1850px
AsImentionedearlierwewillbeusingtheRulerTool.Makesurethatrulersandguidesisturnedon.
正如刚才所说，我们要使用标尺工具。确保标尺和参考线都是打开的
AlsoonethingimportantinusingRulerToolistheInfo(Information)Panel.Theuseofthisiswhenyouaremeasuringusingtherulertheinformationwillbeshownintheinformationpanel.Makesurethatthisisshowninyourpanelsattheright.IfitisnotshownyoucanaccessthisbygoingtoWindows–Info.
此外在使用标尺工具中重要的一件事是信息面板。它的用途是当你正在测量时，将标尺信息显示在信息面板中。请确保这在您右边的面板中显示。如果它不显示，您可以通过点击：窗口>信息去显示它。
Thetotalwidthofyoursitewillbe960px.So,let’screateourfirstguidebygoingtoView–NewGuide,setthevalueto120px.Repeatthestepofcreateaguidebutnowchangethevalueto1080px,thiswillmakeatotalof960pxinthecenterofourcanvas.
你的网页的总宽度会是960px。所以，让我们创建我们第一条参考线，点击：视图>新建参考线，设置值为120px。重复步骤创建一条参考线，不过把值改为1080px，这会使你的画布的中间部分一共有960px宽。
Step2:CreatingtheHeader
步骤2：创建头部区域
TheHeadersectioniscomposedofLogo,Navigation,andSearch.FirstthingyouneedtodoistocreateafoldernameitHeaderandinsideofitcreatesubfoldersandnamethemLogo,Navigation,andSearch.Itisimportantthatyougroupallthethingsyoudoproperlyinordertobeorganizedandeasilylocatethingsinthefutureforcodingpurposes.
头部区域包含LOGO、导航栏、搜索栏。首要的事是你需要创建一个名为Header的文件夹，并在其中创建名为Logo、Navigation、Search的子文件夹。把各项分组是非常重要的，以便正确的组织元素和将来编码的时候很容易定位元素。
InsideHeaderfoldercreateanewlayerandnameitbg.UsingRectangleToolcreatea100%x100px.BylookingattheInfoPanelyoucanviewthedimensionoftheshapethatyou’remaking.OryoucandothisbycreatinganewguidebygoingtoView–NewGuide–100pxHorizontal.It’suptoyouwhatwayyouchoose.
在Header文件夹里新建bg图层。用矩形工具创建100%*100px的矩形。查看信息面板时，你可以看见你创建的形状的尺寸。或者你可以新建一条参考线来完成这件事，点击：视图>新建参考线，参数设置为：水平100px。这取决于你用什么方法来完成。
AddthisBlendingOption
添加如下的混合选项
NextthingyoudoiscreatetwolinesusingLineTool55pxdistancefromthetop.ButIsuggesttouseRectangularMarqueeTooltomakethelinepixelperfect.
接下来的事你要用直线工具创建两条直线（（0，55，1200，1）、（0，56，1200，1）），距离顶部55px。不过我建议你使用矩形选框工具让直线的像素完美
Asyoucanseeinthepreviewofourheaderthereisapatternabovethelines.Createanewdocument9pxx7px,backgroundcontentTransparent.UsingPencilToolwithafillcolorof#cfcfcfcreateapatternasshowninthescreenshotbelow.WhenyouaredonegotoEdit–DefinePatternandnameitwhateveryouwishtocallit.
就像你看到的我们头部区域的预览，那儿有一个图案在直线的上方。创建新文档，尺寸：9px*7px，背景是透明的。用铅笔工具按照下面的截图创建图案，填充色：#cfcfcf。当你完成后，点击：编辑>定义图案，取个你想取的名字。
UsingPaintBucketToolinsteadofforegroundchangeittopatternandselectthepatternwemade.ApplythispatternbymakingaselectionandfillwithpatternusingPaintBucketTool.
选择油漆桶工具，并把填充内容替换为我们之前创建的图案。创建一个选区，用油漆桶工具填充图案以完成添加图案的工作。
建议用矩形工具创建一个矩形（0，48，1200，7），填充为0，添加如下的图案叠加的图层样式
Step3:CreatingLogo
步骤3：创建LOGO
Thisisjustasimplesitenamelogo.StartbyusingTextToolandtypeyourdesiredsitename.
这仅仅是简单的网站名字LOGO。用文字工具并输入你期望的网站的名字
字体：HelveticaBOLD，字号：30px，TEMPLATE的颜色：#494367；SHOW的颜色：#A5AB0D
Step4:CreatingNavigation
步骤4：创建导航菜单
AgainusingTextToolletsplaceournavigationlinks.
再次用文字工具摆放我们的导航链接
字体：HelveticaBOLD，字号：16px，About的颜色：#252525；其余文字的颜色：#555555
Step5:CreatingSearch
步骤5：创建搜索栏
TocreateoursearchbaruseRoundedRectangleToolandsettheradiusto10px,thencreateashapeasshowninthescreenshotbelow.
用圆角矩形工具创建我们的搜索栏，设置半径为10px，然后按照下面的截图创建一个圆角矩形（65，805，275，70）
建议先新建四条参考线：垂直780、垂直805、水平65、水平100
Asyoucanseeinthepreviewabove,theleftsideofoursearchbarisslanting.So,weneedtotransformourshapebyselectingthelayerandpressCtrl+TthenRightClicktotheworkareaandselectDistort.
如你所见的预览图中，我们搜索栏中的左边是斜的。所以，我们要变换我们的形状，选则图层并按Ctrl+T，然后在工作区域右键，选择扭曲。按照下图进行变形，高度设置70是合适的，只要宽度变成325px，左边就正好穿过交点。
Nextweneedtomaskthebottompartofourshapetobeequalinourheader.Firstsettheforegroundto#000000,thenselectthelayerbginourheaderandmakeaselectionofit.WhileitisselectedselecttheshapeofoursearchthepresstheMaskIconinthelayerspanelareabesidethefxicon.Justrefertothescreenshotbelow.
下一步，我们需要遮罩掉我们的形状的底部，使其等于我们的头部区域。首先设置前景色为#000000，然后在我们的头部区域的bg图层做出一个选区。当它被选中，选择我们搜索栏的形状，然后在图层面板中区fx图标（添加图层样式图标）旁边的蒙版图标。参照下面的截图。
Nowlet’screatethesearchbutton.Makeaselectionofthesearchbar,contractitby2px,andfillitwithanycolor.TocontractgotoSelect–Modify–Contract.
现在让我们创建搜索栏按钮。创建搜索栏的选区，收缩2px，然后用任意颜色填充（新建图层，然后用油漆桶工具填充颜色）。通过点击：选择>修改>收缩，收缩选区
建议先做后一步后再做收缩2px
SelectRectangularMarqueeTool,bypressingAltkeyyouwillnoticethatthereisa-signbesidetheselectionpointer,thissignmeanstodeselectselection.Nowyoucandeselectthesectionyouwanttodeselect.
选择矩形选择工具，按住Alt键，你可以注意到在选择光标一侧有一个减号，这个减号意味着去除选区。现在你可以去除你想去除的选区
Openupthesearchicon,alignitandadda1pxdropshadow#ffffff.
打开search图标，对齐摆放并添加1px白色的投影
因为图标有自己的颜色，因此，再给图标添加颜色叠加：#c2c2c2，以使风格统一
再给搜索栏添加文字：searchforsomething..。字体：Arial斜体，字号：14px，颜色：#666666
Step6:CreatingSlider
步骤6：创建图片滑动栏
CreateafolderaboveHeaderfolderandnameitSlider.UsingRectangleToolwithafillcolorof#413f6bcreatea100%by250px.
在Header文件夹上新建Slider文件夹。用矩形工具创建一个宽100%高250px的矩形（0，99，1200，250），填充颜色：#413f6b
ConverttheshapelayertoSmartFiltersbygoingtoFilter–ConvertforSmartFilters.Now,gotofilteragainandaddnoise
通过点击：滤镜>转换为智能滤镜把该形状图层转换为智能对象。现在，再次点击：滤镜>添加杂色
Controls
控制按钮
CreateafolderinsideSliderandnameitControls.Controlsshouldhavesubfoldersnamed:NextPrevandSliderControl.InsideNextPrevlet’screateourNextandPreviousbuttonsstartbyselectingEllipseToolwithafillcolorof#676589andcreateashape40pxx40px.
在Slider组里添加Controls文件夹。Controls有两个子文件夹：NextPrev和SliderControl。在NextPrev中，我们用椭圆工具创建我们的Next和Previous按钮，颜色填充：#676589，形状尺寸：40px*40px。（120，204，40，40）
Downloadthearrowiconprovidedintheresourcesandplaceitonourcanvas.Resizeandpositionitasshowninthescreenshotbelow.
下载资源中提供的箭头图标并将它置于我们的画布上。调整大小并按照下面的截图摆放
Wearegoingtomasktheshape,firstsettheforegroundcolorto#000000,nextmakeaselectionofthearrowiconbyCtrl+ClicktothelayerandInversetheselectionbypressingCtrl+Shift+I.WhileitisselectedselecttheEllipseshapeandpresstheMaskIconbesidethefxiconinthelayerspanel.
我们打算给形状添加遮罩，首先设置前景色为#000000，接下来通过在图层上按Ctrl+Click创建箭头的选区，并按Ctrl+Shift+I翻转选区。当出现选区时，选择椭圆形状图层然后按在图层面板中区fx图标（添加图层样式图标）旁边的蒙版图标。然后把箭头图层隐藏。
Duplicatetheshapeandplaceitontheotherside.Grabsomesampleimagestoputinourslide.Also,usingTextTooladdsometext:asampletitleandalittlecontentjustfollowtheformattingofthetextasshowninthescreenshotbelow.
复制该形状并摆放到另一边（1040，204，40，40）。获取一些示例图片放在我们的图片滑动栏上。并，用文字工具添加一些文本：按照下面截图上的文本格式的一个示例标题和一些内容文字。
标题字体：HelveticaBOLD，字号：22px，颜色：#ffffff；
段落字体：Arial，字号：12px，颜色：#E0DEFF；黄色的more的颜色：#EAEC25
NowwearegoingtoworkonourSliderControls.UsingRoundedRectangleToolwitha10pxradiuscreateashapeasshowninthescreenshotbelow.TransformtheshapethesameaswedidinourSearchbar.
现在我们打算创建我们的滑动栏的导航按钮。用圆角矩形工具，设置半径为10px，按照下图创建一个圆角矩形。像和之前做搜索栏一样进行变换
Alsomaskthelayeraswedidpreviously,refertoStep:5CreatingSearch.
给这个图层添加蒙版，就像之前做的，查看步骤5：创建搜索栏
这个步骤比较省略，因此在这儿补充完整
用圆角矩形工具，半径10px，创建一个圆角矩形（960，324，100，50）
按Ctrl+T自由变换，在形状上右键选择扭曲，按住Shift键，往右拖动右下角的控制块，直到宽度变为130；再按住Shift键往左拖动左下角的控制块，直到宽度变为160。
在紫色背景层上按Ctrl+Click，获得矩形选区，然后选中红色形状的图层，按图层面板上的蒙版按钮
UsingEllipseToolcreateashapeasshowninthescreenshotbelow.
用椭圆工具创建如下面截图所示的形状（978，333，9，9）、（996，333，9，9）、（1014，333，9，9）、（1032，333，9，9）
灰色的颜色：#D4D4D4，绿色的颜色：#A5AB0D
Thiswillbetheresult.
这是最终的效果
UsingRectangleToolwithafillcolorof#000000createa100%by5pxshape,thensetthelayermodetomultiplyandopacityto30%inthelayerspanel.
用矩形工具创建一个宽100%高5px的矩形（0，344，1200，5），填充色：#000000，然后在图层面板中设置图层模式为正片叠底，不透明度30%
Makeaselectionoftheslidercontrolshapeandexpanditby5pxbygoingtoSelect–Modify–Expand.
创建滑动栏导航块的选区，并通过点击：选择>修改>扩展，扩展选取5px。
新建图层，命名为Border，用黑色填充，图层模式改为正片叠底，不透明度改为30%
选中紫色背景图层，按Ctrl+Click创建选区，然后选中Border图层，点击图层面板上的蒙版按钮
左右有两个深色色块，不和谐，继续修改。在Border图层上右键选择转换为智能对象。在之前的横条矩形图层上按Ctrl+Click创建选区，并按Ctrl+Shift+I反选选区
然后选中Border图层，点击图层面板上的蒙版按钮
Finalsteptocreateourslideristoaddhighlights.Firstmakeaselectionofoursliderbase,thenselectBrushToolsetthehardnessto0%andsizeabout400px.Filltheselectioninaseparatelayerwith#ffffffcolorandsettheblendmodetoSoftLightinthelayerspanel.
最后给我们的滑动栏添加高亮效果。首先给我们的滑动栏创建选区，然后选择画笔工具，设置硬度0%、尺寸400px。在单独的图层里填充颜色：#ffffff，然后在图层面板里设置混合模式为柔光
Step7:FeaturedGallery
CreateanewfolderandnameitFeaturedGallery.UsingRectangleToolwithafillcolorof#edededcreateashape100%by200px.Also,createtwo1pxlines,firstlinecolor#ffffffwillbeplacedonthetopofourshapeandthesecondlinecolor#c2c2c2willbeonthebottom.
创建新的文件夹FeaturedGallery。用矩形工具创建一个矩形（0，349，1200，200），宽100%，高200px，颜色：#ededed。并，创建两条1px的直线，第一条直线摆放在矩形的顶部（0，349，1200，1），颜色：#ffffff，第二条直线摆放在矩形的底部（0，548，1200，1），颜色：#c2c2c2。
可以看出，在滑动栏的控制块的底部有条白线。在控制块图层上按Ctrl+Click，创建选区，按Ctrl+Shift+I反向选区。选中白色直线的图层，点击图层面板上的蒙版按钮
Createanewlayerabovetheshapeandnameithighlight.Then,makeaselectionoftheshape.UsingBrushToolwithafillcolorof#ffffffbrushinthecenteroftheselectionthen,setthelayermodetoSoftLight.
在形状的图层上新建图层highlight。然后，创建形状的选区。用画笔工具在选区的中央填充白色，并设置图层的混合模式为柔光
Nowlet’sworkonoursamplepostforourfeaturedgallery.First,createafoldernamedpostthenputa100pxx100pxsamplethumbnailonourcanvas.Also,UsingTextTooladdaTitleandContent.
标题字体：Arial，字号：16px，颜色：#363636；内容字体：Arial，字号：12px，颜色：#636363
Createanewlayerbelowthethumbnailandnameitshadow,usingPenToolcreateashapeasshowninthescreenshotbelow.Then,gotoFilter–Blur–GaussianBlur1px,andsettheOpacityto50%inthelayerspanel.
在缩略图的下面创建一个新的图层shadow，用钢笔工具按照截图创建形状。然后，点击：滤镜>模糊>高斯模糊，单位1px，并在图层面板中设置不透明度为50%
Createanewfolderandnameitrate.Now,openupthestariconandplaceittoourcanvasandplaceitasshowninthescreenshotbelow.
创建新的文件夹rate。现在，打开star图标并按照下面截图摆放到我们的画布上
MakeaselectionofthestaranddeselectstartingfromthemiddletobottomandinaseparatelayerfillitwithLinearGradient#fffffftoTransparentthen,settheOpacityto70%inthelayerspanel.
给star图层创建选区，去除star中间到底部的选区，在单独的一个图层里用线性渐变填充，从#ffffff到透明，在图层面板里设置不透明度为70%
这是结果
Duplicatethestarfourtimes.
复制star四次
Duplicatethepostfoldertwotimesapositionitasshowninthescreenshotbelow.
复制post文件夹两次并按照下面的截图摆放
Step8:Posts
步骤8：列表
FilltheBackgroundlayerwith#ededed.CreateanewfolderandnameitBodyPosts,createasubfolderandnameitpost.Now,createasample300pxby200pximagethumbnailforourpostandplaceitinourcanvas.UsingRectangleToolcreatea300pxby45pxshapejustfillitwithanycolor.Justrefertothescreenshotbelow.
填充背景图层，颜色：#ededed。创建新文件夹BodyPosts，创建一个子文件夹post。现在，创建一个我们列表的300px*200px的缩略图在我们的画布上。用矩形工具创建一个300px*45px的矩形，用任意色填充。参看下面的截图
Duplicateratefolderfromourfeaturedgalleryandplaceitinthepostfolder.Also,usingTextToolcreateasampletitle,justfollowthesettingsinthescreenshotbelow.
从featuredgallery复制rote文件夹（评价星）到post文件夹，并摆放到合适位置。并且，用文字工具创建一个示例标题，按照下面的截图设置
标题文字，字体：Helvetica，字号：16px，颜色：#363636
ForunratedstarstylejustremovetheGradientOverlayandreplaceitwithInnerShadow.
没有标示的星星的样式是去掉渐变叠加，然后替换为内阴影，还得去掉投影和描边和添加白色的颜色叠加。
Duplicatepostfolderfivetimesandalignitasshowninthescreenshotbelow.
复制post文件夹五次，并按照下面的截图摆放，水平间距20px，垂直间距19px
Step9:Pagination
步骤9：分页按钮
SelectRoundedRectangleToolandsettheradiusto5pxthen,createa620pxby45pxshapebelowthoseposts.
选择圆角矩形工具，半径5px，创建一个620px*45px的圆角矩形（120，1403，620，45）在列表的下面，颜色：#fffcfd
UsingTextToolplacethenumberofpagesasshowninthescreenshotbelow.
用文字工具按照下面的截图书写页码
文字字体：Verdana，字号：12px。页码文字的颜色：#7E7E7E，页码1的颜色：#363636，Last的颜色：#7266FE
Step10:Sidebar
步骤10：侧边栏
Createa#c2c2c21pxline40pxdistancefromourpost,MaskthelineandmakethetipfadedusingBrushToolwithafillcolorof#000000.Youmayhavesomethingthatlookslikethescreenshotbelow.
距离我们的列表40px创建一条直线（780，549，1，300），颜色：#c2c2c2，给直线添加蒙版，作出一个淡出的效果，用画笔工具，填充颜色：#000000。你做的东西就像下面的截图一样
作出淡出的效果，建议用，点击：图层>矢量蒙版>显示全部。然后自下而上用渐变工具填充，从黑色到透明
Duplicatethelineandmoveittotheleftandchangethecolorto#ffffff.CreateaHorizontallinewiththesamecolorplaceitasshowninthescreenshotbelow.
复制这条直线并移动到左边，并改颜色为#ffffff。用同样的颜色创建一条水平直线并按照下面的截图摆放。
Next,createanewlayerbelowthoselineswehavejustcreatedandnameitshadow.UsingSelection,GradientTool,andEraserToolperformwhatyouhaveseeninthescreenshotbelow.ThesettheshadowlayertoMultiply,Opacityto50%.
接下来，在这些直线下面新建图层shadow。用选区工具、渐变工具、和橡皮擦工具配合使用，就像你看到的截图一样。设置shadow图层为正片叠底，不透明度为50%
Duplicatethelayerandplaceitonthetopasshowninthescreenshotbelow.It’suptoyoutomakeadjustments,justerasetheportionthatyoudon’tlike.
复制该图层并按照下面的截图摆放到顶部。这取决于你的调整，擦除你不喜欢的部分
建议新建选区，然后用渐变工具水平和垂直方向各划一下，然后添加和竖直直线一样的蒙版
SelectRoundedRectangleToolthensettheradiusto10px.Createashapeasshowninthescreenshotbelow.Thewidthoftheshapeistheremainingwidthofourcanvasandtheheightwillbe40px.
选择圆角矩形工具，设置半径为10px。按照下图创建一个形状（760，597，320，40），形状的宽度是我们画布剩下的宽度，高度40px
用矩形选框工具，创建一个选区（780，500，350，200），然后在选择矩形的图层，点击图层面板上的蒙版按钮
UsingTextTooladdaheadertitle.
用文字工具添加一个标题。字体：Helvetica，字号：24px，颜色：#ffffff。并添加投影样式
Nextopenupthesocialiconsandplacethemonourcanvas,alignthemasshowninthescreenshotbelow,andalsoaddtheircorrespondingsocialiconnamesusingTextTool.
接下来打开社会媒体图标并把它们摆放到我们的画布，按照下面的截图摆放，并用文字工具给每个图标添加对应的说明文字。字体：Helvetica，字号：16px，颜色：#363636
Createtwonewfoldersandnamethem:CategoriesandOurPartners.UsingTextToolandLineToolperformwhatyoucanseeonthescreenshotbelow.
创建两个新的文件夹：Categories和OurPartners。用文字工具和直线工具配合使用，就像下面的截图一样
标题的字体：Helvetica，字号：18px，左边文字的颜色：#363636，右边文字的颜色：#655DF3
列表的字体：Tohoma，字号：12px，颜色：#7266FE
分割线：上面的颜色：#C2C2C3，下面的颜色：#FFFFFF
Step11:Footer
步骤11：页脚
CreateanewfolderandnameitFooter.Insidefootertherearesubfoldersnamed:About,MostLove,andSiteLinks.UsingRectangleToolwithafillcolorof#413f6bcreateafooterthatistherightsizetoyou.
新建文件夹Footer。在Footer文件里有这些子文件夹：About、MostLove、SiteLinks。用矩形工具创建一个合适页脚的矩形（0，1498，1200，352），颜色：#413f6b
ConverttheshapelayertoSmartFiltersbygoingtoFilter–ConvertforSmartFilters,gotofilteragainandaddnoise.
通过点击：滤镜>转换为智能滤镜，转换该形状为智能对象，再次点击滤镜，添加杂色
并添加一条白色的水平直线（0，1501，1200，1），不透明度设置为20%
Weweregoingtoaddinfotextinouraboutfolder.UsingTextToolputinsomedummytextandfortheformattingofthetextjustrefertothescreenshotbelow.
我们要在about文件夹里添加一些信息文字。用文字工具添加一些文字，并按照下面的截图设置文字的格式
标题：字体：Helvetica，字号：18px，About的颜色：#FFFFFF；右边文字的颜色：#ECED2B
UsingTextTooladdlinksonSiteLinksfolder.
用文字工具在SiteLinks文件夹添加文字
标题：字体：Helvetica，字号：18px，Site的颜色：#FFFFFF；右边文字的颜色：#ECED2B
列表文字：字体：Helvetica，字号：12px，文字颜色：#E0DEFF
分割线：上面的直线颜色：#2F2A47；下面直线的颜色：#5C5A89
UsingTextTooladdaPostTitle,Lovethis,andcomments.Createalsoa50pxx50pxthumbnailandplaceitasshowninthescreenshotbelow.
用文字工具添加列表标题，Lovethis，comments。创建50*50的缩略图并按照下面的截图摆放
标题：字体：Helvetica，字号：18px，Most的颜色：#FFFFFF；右边文字的颜色：#ECED2B
列表标题：字体：Arial，字号：14px，颜色：#FFFFFF
下面的小文字：字体：Arial，字号：11px，颜色：#ECED2B、#E0DEFF
Finalstepsareaddingcopyrightandbacktotopbutton.Openupthearrowiconandrotateitfacingtop.
Finallywe’redone!
最终我们完成了
后记：
这是一篇很好的教程。大量的运用了蒙版的技术。整体配色简洁和谐，让人赏心悦目。
下图就是我把教程中的折纸上传后，找到的PSD素材，很好很强大。