作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
约定：
1、本文的软件是PhotoshopCS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
TodayIwillcreatealayoutforahotel.
今天，我要创建一个酒店的网页布局
Thislayoutwillworkalsoifyouhavesiterelatedtothehotelindustry:bedandbreakfast,motels,anditwillworkverygoodforrestaurants,cafes,pizzerias,bars,winerieslayouts,etc.
Iwilluseanicebackgroundimageandyouwillseethatasimplebackgroundimagewillcreateanelegantrusticlayout
我会用一个漂亮的背景图片，你会看到创建一个优雅的乡村布局仅仅使用了一个简单的背景图像。
Createanewdocumentwiththefollowingsize:1000pixelswidthand1100pixelsheight.按后面的尺寸新建文档，宽1000px，高1100px
Pleaseclickonthefollowingimagetoseethefullsizeimage.Savetheimagetoyourcomputer,andthenopenthisseamlesspatterninPhotoshop.Wewillusethisimagetocreateabackgroundforthishotellayout.
请点击下面的图片以查看完整大小的图片。将图像保存到您的电脑，然后在Photoshop中打开这个无缝图案。我们将使用这个图像创建一个背景给这家酒店的布局。
OpentheimagefromaboveinPhotoshopandthengotoEdit>DefinePattern.Inthiswayyoucancreateanytypeofpatternsfromyourimages.
在Photoshop中打开上面的图像，然后点击：编辑>定义图案。在这种方式中，你可以从你的图像中创建图案。
Youcanclosethedocumentwiththisbackgroundimageandthenyouneedtoaddthispatternoveryourlayoutdocument.ToaddthepatternyouneedtoselectPaintBucketTool.
你可以关闭背景图像的文档，然后你需要添加该图案到你的布局文档。为了添加图案，你需要选择油漆桶工具
Besureyouselectthepatternyoujustcreated.
确保选择刚才创建的图案
Clickonetimeonyourdocument.Thebackgroundforthislayoutwilllooklikeinthefollowingimage.
在你的文档上点击一次。你的布局的背景看起来就像下图一样
Asyoucanseethepatternfilledallthedocumentbutatthebottomofthelayoutitdoesn’tlookverygood.Iwillfixtheproblemveryfast.Withbrushtool(andwithasmoothbrush)Iwillmakeadrawingonthebottomofthelayout.Itisveryimportantwhatcoloryouchoosetomakethedrawing.Iwillrecommendyoutousetheeyedroppertooltograbtheexactcolororasimilarcolorwithmine.
正如你可以看到的图案充满了所有的文档，但在布局的底部它看起来很不协调的。我会很快的解决这个问题。使用画笔工具（用平滑刷），我将布局的底部绘图。非常重要的是，你选择什么颜色绘图。我会建议您使用滴管工具来获取精确的颜色或与我类似的颜色。
建议：用矩形工具新建一个矩形（0，852，1000，248），颜色：#111119比较简单
WithRoundedrectangletoolIwillcreateashapeinthemiddleofthelayout
用圆角矩形工具在布局的中部创建一个圆角矩形（42，117，920，320）
Iwilladdthefollowinglayerstyles
按照下图添加图层样式
颜色叠加的颜色：#f3c090
描边的颜色：#434343
Thisismyresultsofar
下面是我的结果
Nowitisuptoyouwhatyouwillplacehere.Iwilluseonlyaimagewitharestaurant,butyoucancreatehereaniceslideshow,ormaybeareservationform.
接下来是准备一些内容在这儿。我只用了一个饭店的图片，但是你可以创建一个漂亮的图片滑动栏，或许有一个预约的表单
注：摆放图片后，在图片的图层上右键选择添加剪贴蒙版。此时必须把前面圆角矩形图层的图层样式中的图案叠加的样式去掉。另之前的颜色叠加选择的颜色使得图片看起来更亮丽，这是因为颜色叠加的颜色选择是偏黄色，和图片的主色调一致。如果图片的主色调是其它的颜色，那么，颜色叠加的颜色也要做相应的修改
OnthetopIwillcreateanotherroundshape.thisshapewillbetransformedintoasimplemenu
在顶部还要创建另一个圆角矩形（42，117，920，45）。该矩形将要变成一个普通的菜单
ForthislayerIwilladdthefollowinglayerstyles
按照下图给该图层添加图层样式
渐变叠加的颜色：#9c9ea5
描边的颜色：#424242
这是我的结果
IwilluseonemoretimeRoundedrectangletooltocreatethreeshapes.
再次用圆角矩形工具创建3个圆角矩形
分别是：（48，546，908，437），颜色：#f4c79f；（48，546，908，286），颜色：#fbe1c7；（48，993，908，87），颜色：#fbe1c7
ForalltheseshapesIwillusethefollowinglayerstyles
给这些图层按照下图添加样式
NowIwillusePenTooltocreateasimilarshapelikeyouseeinthefollowingimage.theeasywaytocreatesuchashapeistoturnontheGrid(View>Show>Grid)
现在用钢笔工具创建和你看见相似的形状。为了更加简便的创建该形状，你可以打开网格（视图>显示>网格）
建议：可以使用矩形工具创建一个矩形（350，-52，307，190），然后用添加锚点工具在矩形底边的中部增加一个锚点，并用直接选择工具拖动锚点到合适的位置
Iwilladdthefollowinglayerstylesforthissimplescarf.
按照下图给该形状添加图层样式
渐变叠加的颜色：#f8d3a5、#ca8f43
Hereismyresult
IwillduplicatethislayerseveraltimesandIwillplacethenewlayerslikeinthefollowingimage.Clicktozoom
我要复制该图层多次并按照下图摆放。（要按Ctrl+T自由变形，调整到合适的大小）
Iwilladdsometextandimagesoverthislayout.
我将添加一些文字和图片在我的布局上
Onemoretimeitwillbebetterifyouclickonthefollowingimagetoseebettermyrestaurant/hotellayout
再多一次，如果你点击我的图片，你会发现更好的饭店（酒店）的网页布局
注：这一步原文也是一笔带过，因此，在这里补充完整
用自定义形状工具在布局的顶部创建5个五角星，并对每个五角星添加如下的样式：
在旗帜上添加合适的文字，字体如下所示：
在菜单栏上添加菜单文字，字体如下，颜色：#41372d
在布局的中央左侧，添加一个标题，和一段文字，颜色：#40372e
标题的字体
段落文字的字体：
并依次添加另外两个文字块
在布局的底部添加导航链接，字体：
用圆角矩形工具创建四个圆角矩形，分别是（64，837，213，136）、（284，837，213，136）、（504，837，213，136）、（724，837，213，136）
对每个圆角矩形添加如下的图层样式
内发光的颜色：#f8ddc5
在每个圆角矩形上摆放一张图片，并在图片图层上右键选择创建剪贴蒙版
NowIwilltrytocreateascarfonthetopofthelayout.IwillusePentooltocreatesomethinglikethis
现在，我将尝试创建一条围巾在布局的顶部。我将使用钢笔工具创建这条围巾
建议：用矩形工具创建一个矩形，按Ctrl+T自由变形，选择变形模式，调整到如下的形状
用添加锚点工具在右侧中部添加一个锚点，并用直接选择工具拖动锚点到合适的位置
对该图层添加图层样式
AsyoucanseeIhaveusedthesamelayerstyleIhaveusedforthetopmenu.
就像你看到的一样，添加的图层样式就和顶部的菜单条的图层样式一样
用椭圆工具创建一个小的圆，在围巾的左上部，已形成围巾的阴影，添加和围巾一样的图层样式，并调整图层的顺序
NowIwillwritedown”WelcometoGrafpedia“.Thisismyfinalresult