PS网页设计教程在Photoshop中设计优雅的网站布局设计.docx
《PS网页设计教程在Photoshop中设计优雅的网站布局设计.docx》由会员分享，可在线阅读，更多相关《PS网页设计教程在Photoshop中设计优雅的网站布局设计.docx（48页珍藏版）》请在冰豆网上搜索。
PS网页设计教程在Photoshop中设计优雅的网站布局设计
PS网页设计教程III——在Photoshop中设计优雅的网站布局设计
作为编码者，美工基础是偏弱的。
我们可以参考一些成熟的网页PS教程，提高自身的设计能力。
套用一句话，“熟读唐诗三百首，不会作诗也会吟”。
本系列的教程来源于网上的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
From PremiumFiles,availabletoour PremiumMembers Iwilluse HandDrawnVectorOrnaments andIwilladdanelementonmydocument.
Iwilllowertheopacityto4%also
步骤3
在PremiumFiles,到达我们的 PremiumMembers ，我将用 HandDrawnVectorOrnaments 里的图案放在我的文档里
把它的不透明度调到4%
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
OnthisstepI’llmakeuseofour PremiumFiles again.ThistimefromUniversalVectorIcons2,I’llselectabadgeiconandIwilladditonmydocument.
步骤6
在这一步，我又要访问 PremiumFiles 。
这次用UniversalVectorIcons2，选择badgeicon添加到我的文档中。
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
WithTypeToolIwilladdthetextfornavigation
IhaveusedAristonfontwith24pxinsize
步骤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.
对两个三角形添加高斯模糊，参数：
40px
Myresult
结果如下：
Step19
NextI’llmakeuseof PremiumFiles.FromUniversalVectorIcons2,IwilladdaLightBulbandfrom HandDrawnVectorOrnaments,Iwillusesomeornaments.
步骤19
接下来要从PremiumFiles上的UniversalVectorIcons2，从中添加灯泡图案，并且从HandDrawnVectorOrnaments上添加一些花纹。
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复制图层，水平翻转，得到另一个箭头。
再调整箭头到合适的位置。
颜色叠加：
颜色：
#c7c1c1
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、内嵌字的效果：
本文多处通过添加图层样式的方法，来达到文字内嵌的效果。
升级会员 