PS网页设计教程在Photoshop中设计优雅的网站布局设计Word格式文档下载.docx
《PS网页设计教程在Photoshop中设计优雅的网站布局设计Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《PS网页设计教程在Photoshop中设计优雅的网站布局设计Word格式文档下载.docx(48页珍藏版)》请在冰点文库上搜索。
1020*1100px
NextselectRectangleToolandcreatealargerectangleoveryourdocument.Ihaveusedthiscolor:
#e5e4e4
接下来用矩形工具创建一个覆盖整个文档的矩形,颜色:
这一步可以斟酌一下,个人觉得用油漆桶工具比较好
Step1
IwillselectellipsetoolandIwillcreatethiswhiteshape
步骤1
选择椭圆工具创建如下的白色椭圆
Step2
IwillgotoFilter>
Blur>
GaussianBlurandIwillapplyaradiusofabout35px
步骤2
用滤镜>
模糊>
高斯模糊,半径设置为35px
Step3
From
PremiumFiles,availabletoour
PremiumMembers
Iwilluse
HandDrawnVectorOrnaments
andIwilladdanelementonmydocument.
Iwilllowertheopacityto4%also
步骤3
在PremiumFiles,到达我们的
,我将用
里的图案放在我的文档里
把它的不透明度调到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
在这一步,我又要访问
。
这次用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,矩形(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
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复制图层,水平翻转,得到另一个箭头。
再调整箭头到合适的位置。
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、内嵌字的效果:
本文多处通过添加图层样式的方法,来达到文字内嵌的效果。