丰富的线上&线下活动，深入探索云世界
做任务，得社区积分和周边
最真实的开发者用云体验
让每位学生受益于普惠算力
让创作激发创新
资深技术专家手把手带教
遇见技术追梦人
技术交流，直击现场
海量开发者使用工具、手册，免费下载
极速、全面、稳定、安全的开源镜像
开发手册、白皮书、案例集等实战精华
为开发者定制的Chrome浏览器插件
作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
约定：
1、本文的软件是PhotoshopCS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
Let’sstartthetutorial.OpenPhotoshopandcreateanewdocument1020by1100px
让我们开始教程
打开Photoshop，新建一个文档，尺寸：1020*1100px
NextselectRectangleToolandcreatealargerectangleoveryourdocument.Ihaveusedthiscolor:#e5e4e4
接下来用矩形工具创建一个覆盖整个文档的矩形，颜色：#e5e4e4
这一步可以斟酌一下，个人觉得用油漆桶工具比较好
Step1
IwillselectellipsetoolandIwillcreatethiswhiteshape
步骤1
选择椭圆工具创建如下的白色椭圆
Step2
IwillgotoFilter>Blur>GaussianBlurandIwillapplyaradiusofabout35px
步骤2
用滤镜>模糊>高斯模糊，半径设置为35px
Step3
步骤3
Step4
NextIwillselectRectangleToolandIwillcreatethis3shapesatthetop:
步骤4
接下来，用矩形工具在顶部创建3个矩形。3个矩形高度为6px，颜色分别为：#cdaeac、#ad8b8a、#a18280
Step5
WithTypeToolIwillwrite“ElegantWebsite”andasataglineIwilluse“adesignbytrendyTUTS”.ThefontusedisAriston,with48ptinsize.For“Elegant”Ihaveappliedthislayerstyles:
步骤5
用文字工具添加文字elegantwebsite，对下面的标志行添加文字adesignbytrendyTUTS。字体用Ariston，48号字。
对Elegant添加下面的图层样式：
颜色叠加：颜色：#c7c1c1
For“Website”thislayerstyles:
对website添加如下的图层样式：
颜色叠加：颜色：#d38475
Myresult:
结果如下：
Step6
步骤6
Iwillapplythefollowinglayerstylestomybadge:
对刚才的图标添加下面的图层样式：
颜色叠加：颜色：#d2d2d2
Hereismyresult:
Step7
WithTypeToolIwilladdsometextontherightside.Iwillwrite“Callus–1-800-elegant”
步骤7
用文字工具在右边添加callus–1-800-elegant。其中callus和之前的elegant图层样式一样，1-800-elegant和之前的website图层样式一样。
Step8
IwilluseRectangleToolandIwillcreatethisblackshape.
步骤8
用矩形工具添加如下的黑色矩形。（0，223，1020，65）颜色：#636363
Step9
HavingRectangleToolselectedIwillcreateanothershapeonthetopoftheshapecreatedStep6.Ihaveusedaredcolorjustfordemonstrationproposes.Whenyoucreatethisshapeyouwillneedtousethiscolor:#e5e4e4
步骤9
用矩形工具创建另一个矩形在刚才矩形的顶部。我为了示范建议用红颜色。当您创建此矩形，您将需要使用颜色：#e5e4e4
跟着教程走，也先用红颜色，再改成#e5e4e4，矩形（70，223，882，40）
Step10
Makesurethatthelayeroftheshapecreatedonstep8isselectedonyourlayerpalette,selectDirectSelectionToolanddragalittlebitfromthebottomleftcorneroftheshape.Pleaseseethescreenshot:
Proceedinthesamewayfortherightside.Hereismyresult:
请确保刚才新建的矩形图层被选中的状态，用直接选择工具拖动矩形的左下角，看屏幕快照：拖动的时候按住shift，可以保持水平不动，结合信息面板上的提示，可以完美的拖动成45度角
用同样的方式，拖动矩形的右下角，再将颜色改回#e5e4e4，结果如下：
Step11
WithRectangleToolIwillcreatethisshape.Colorused:#d67474
步骤11
用矩形工具创建一个矩形（76，187，870，76），颜色：#d67474
Step12
WithEllipseToolIwillcreatethisshape:
步骤12
用椭圆工具创建如下的椭圆：
AndIwillapplyaGaussianBlurofabout34px.Myresult
然后对椭圆添加高斯模糊，半径设置为34px（个人觉得半径8px比较合适，不知为什么，他的参数就基本上什么都看不到了），结果如下
Step13
Iwillsurroundthenavigationwiththissign“——————————”.TocreateaniceeffectIwillapplythislayerstyles:
步骤13
我将符号“----------”围绕着导航栏一圈，为了漂亮，添加如下的图层样式：
用文字工具，调整字符间距，以达到虚线框的效果
Myresult
结果如下
Step14
WithTypeToolIwilladdthetextfornavigationIhaveusedAristonfontwith24pxinsize
步骤14
用文字工具在导航栏上添加一些文本，字体Ariston，大小24px
为了和样张一样，还对文字增加了投影的设置：
Step15
WithPenToolIwillcreatethisarrowwichitwillactasanselectorfornavigation.
步骤15
用钢笔工具创建导航栏上菜单被选中时的三角箭头。
用多边形工具，将边数改成3，创建三角形可能还更方便一点
Step16
WithrectangleToolIwillcreatethisshapeonthemiddleofthepage.Makesurethatthelayeroftheshapecreatedisselectedonyourlayerpalette,selectDirectSelectionToolanddragalittlebitfromthetopleftcorneroftheshape.Pleaseseethescreenshot:
步骤16
用矩形工具在页面的中部创建矩形（36，552，950，50），确保矩形的图层处于被选中的状态，用直接选择工具，拖动矩形的左上角，请参考下图：
Iwillproceedinthesamewayfortherightcorner,thenIwillapplythislayerstyles:
用同样的方法调整矩形的右边，然后添加如下的图层样式：渐变编辑器的三个颜色从左至右分别为：#f4f4f4，#fefefe，#ffffff
Step17
WithRectangleToolIwillcreateanothershapeandIwillapplythislayerstyles:
步骤17
用矩形工具创建另一个矩形（36，602，950，438），然后添加如下的图层样式：渐变编辑器的颜色从左只有分别为：#f6f6f6，#ffffff，#ffffff
Step18
WithPenToolIwillcreatethistrianglesatthebottomoftheshapecreatedonStep15
用钢笔工具在刚才的白色的矩形底部创建两个三角形
IwillapplyaGaussianBlurofabout40px.
对两个三角形添加高斯模糊，参数：40pxMyresult
Step19
步骤19
Step20
WithTypeToolIwilladdsometext
步骤20
用文字工具添加一些文字
Step21
Toenhancethetitle“WeBringIdeastoLife”Ihaveused2typeoffonts:ArialandAriston.Ihaveusedalso6lines(3ontheleftand3ontherightsideofthetitle).ForthislinesIhaveappliedthislayerstyles:
步骤21
对标题文字WeBringIdeastoLife，用两种字体：Arial和Ariston。字号：44px，对标题文字添加内投影，参数如图，颜色：#bbb7b6。
添加6条直线（3条在标题的左边，3条在标题的右边），对这些直线添加如下的图层样式：
内阴影：颜色：#797979
颜色叠加：颜色：#fbfbfb
Step22
WithPenToolIwillcreatethis2trianglesandIwillapplyaGaussianBlurofabout10px
步骤22
用钢笔工具创建2个三角形，并对它们进行高斯模糊，参数10px
Step23
OnthetopofthetrianglescreatedonStep21,withRectangleToolIwillcreatethisshapeandIwillapplythislayerstyles.
步骤23
在刚才的阴影上方，用矩形工具创建矩形（720，518，184，56），并添加如下的图层样式：
参考样张，似乎应该是圆角矩形工具，我给的半径参数是10
颜色叠加：颜色：#e7e7e7
Step24
HavingRectangleToolstillselected,IwillcreateanothershapeonthetopoftheshapecreatedonStep22,IwillapplythislayerstylesandwithTypeToolIwilladdsometext
步骤24
保持矩形工具选择状态，在刚才的矩形的上方创建一个新的矩形，添加如下的图层样式，并添加一些文字
参考样张，还是用圆角矩形，直接复制刚才的图层，然后自由变换，各自缩进14px。文字的颜色和样式和之前步骤19中的文字一致。
渐变叠加，颜色分别为：#f6f6f6，#ffffff
Step25
Becausethisareaitwillbeajqueryslideshow,wewillneedtocreatethearrowsaswell.IwillselectLineToolwith10pxweightIwilldraw2identicallines,thanwithFreeTransformTool(Ctrl+T)Iwillarrangethemtocreateanarrow.Iwillapplythislayerstylesalso:
步骤25
因为要用jquery显示幻灯片，我们将创建左右的箭头。我将选择直线工具，设置10px的粗细，画2条相同的直线，然后用自由变换工具(Ctrl+T)排列它们，以创建一个箭头。我还将运用如下的图层样式：
这两个箭头还是颇费了一番功夫，目前采用的方法是，先用直线工具画一条水平直线，长度40px，Ctrl+J复制图层，将复制的图层顺时针旋转90度。微调这两条直线，使得左上角重合。然后合并图层，再逆时针旋转45度。再Ctrl+T自由变换，高度调整为原来的94%左右。再添加如下的样式。做好一个箭头后，Ctrl+J复制图层，水平翻转，得到另一个箭头。再调整箭头到合适的位置。
Step26
NowIwillcreatethecontentarea.IwillselectTypeToolandIwillwrite“LatestProject”.Ihaveappliedthislayerstyles:
步骤26
现在要创建内容区域。用文字工具添加文本LatestProject。并添加如下的图层样式：
颜色叠加：颜色：#ececec
Step27
WithPenToolIwillcreatethis2trianglesandIwillapplyaGaussianBlurofabout10px.
OverthistrianglesIwilladdanimage.IwillrepeatthesameprocessandIwillcreateatotalof6similarthumbnails.
步骤27
用钢笔工具画2个三角形，并对其添加高斯模糊，参数10px
在三角形的上方，添加图片。重复同样的过程，一共要创建8个相似的图片缩略图
下面是我最终的效果：
心得：
1、合理建立图层分组：
之前没有感觉。这3个例子做下来，动辄数十个图层，在日后的编辑是很头疼的事情。所以一般会根据不同的区域新建一个图层分组，在这个区域内的图层都划并到同一个组。这样，日后修改就方便多了。从网页设计来讲，一般划分为这几个组：Header、Navigation、Feature、Content、Footer、Slider等。图层分组不是必须的，也不会美化你的网页，但是能简化你日后的维护编辑工作
2、虚线：
在PS中是没有设置线型的选项的。因此，如果要画虚线，就不是很方便了。本文提出的不失为一种很巧妙的方法，用文字工具添加文本“--------”，然后调整字符间距，可以很方便快速的模拟出直线的效果。
3、内嵌字的效果：
本文多处通过添加图层样式的方法，来达到文字内嵌的效果。