PS网页设计教程：在Photoshop中设计优雅网站布局设计.docx

《PS网页设计教程：在Photoshop中设计优雅网站布局设计.docx》由会员分享，可在线阅读，更多相关《PS网页设计教程：在Photoshop中设计优雅网站布局设计.docx（33页珍藏版）》请在优知文库上搜索。

1、对添加下面的图层样式:对添加如卜的图层样式:澧含逐质默认E2投If，内阳野外发光内发光到面衽说神纹理有装色叁加石竟会加图案叁加I-物边颜色叠加：颜色：384756I,.2,aI步骤6在这一步，我又要访问.这次用2,选择添加到我的文档中。adesignbytredyTUTS对刚才的图标添加下面的图层样式：澧含逐质默认E2投If，内阳野外发光内发光到面衽说神纹理有装色叁加石竟会加图案叁加I-物边颜色叠加：颜色：2d2d21-800”步骤7用文字工具在右边添加-1-800。其中和之前的图层样式一样，1-800和之前的图层样式一样。:eleganttDebsite，“ftj：1-,0OfIeqnnl步

2、骤8用矩形工具添加如下的黑色矩形。(0,223,1020,65)颜色：#63636396.Ia:#e5e4e4I步骤911步骤Il用矩形工具创建一个矩形(76,187,870,76),颜色:67474I步骤12用椭圆I：具创建如下的椭圆:结果如下、el(f(ittn)fbsiteEK”4去亦睢14I用文字工具在导航栏上添加一些文本，字体，大小24为了和样张一样，还对文字增加了投影的设置:,elegantDfbsiteetut/,001IrqantrcIhfilUi(r(Htnii沁e；M伍FclKrrrQwr新芟东卿=IIW名祢(N):自定用矩形工具创建另个矩形(36,602,950,438)

3、,然后添加如卜.的图层样式：渐变编辑器的颜色从左只有分别为：6f6f6,新建(Wr浙竞类型(T)：实底平岩度(M)：100%5a色标不透明Ig：I!%位舌:%M(D)照：|悯fc三(C):14%IIm(D)jI2,I步骤19接下来要从上的2,从中添加灯泡图案，并且从上添加一些花纹。20I步骤20用文字工具添加一些文字21“12:.I6(33).I:步骤21对标题文字，用两种字体：和。字号：44,对标题文字添加内投影,参数如图，颜色：7b6添加6条荏线（3条在标题的左边，3条在标题的右边），对这些宜线添加如下的图层样式:颜色叠加：颜色:7elefutmebsiter7fui1-MOO-elega

4、ntXmwzZAcvrI7/(hr(1iftb%“海。小用运衣”如,.4C”.WeBring怒皿to1.ife!22I2Ia10步骤22用钢笔工具创建2个三角形，并对它们进行高斯模糊，参数10WeBring5cto1.ife!1.aPSjrnWD%*ccgeh.or三iQ我e:wse11iFcr5cmr11CeTSCuraMuu：f：anoneJquarmonciis2：WrUga?IQmip*v*no*rfrsya*3-rx10tai2321,II步骤23在刚才的阴影上方，用矩形工具创建矩形(720,518,184,56),并添加如下的图层样式：参考样张，好像应当是圆角矩形工具，我给的半径参

5、数是10澧含逐质默认E2投If，内阳野外发光内发光到面衽说神纹理有装色叁加石竟会加图案叁加I-物边WeBringS三to1.ife!-OwPSUngGj：wPidBuradZngrU、ccnetso*，”C%应。rwoCumsocnaioq11H圾dCdrtufWmon*FS,ruuPnXKu$VGTdocuo0nokoer陆grj)04，qu$:辿$2xu*r3：.SC5tSMf(JUSJUX10fOprussr-MJ,trifKKu4,步骤24保持矩形工具选择状态，在刚才的矩形的上方创建个新的矩形，添加如下的图层样式，并添加一些文字参考样张，还是用圆角矩形，干脆复制刚才的图层，然后自由变换

6、，各自缩进14。文字的颜色和样式和之前步骤19中的文字一样。WeBring5三to1.ife!.cxwgun”dtnnwccrwecietirape.Sg11uMlFOnsmw*rkurr0QrX3*u11enuncAHuamrrx5JMI2:ocaClMStrause11cr!sajhuWqe:rwssaWUBr.er”S.wnjseosMjuU-jcvmt幺drwre.OKnjnwjaseemore.10I2(+T)I步骤25因为要用显示幻灯片，我们将创建左右的箭头。我将选择直线工具，设置10的粗细，画2条相同的直线，然后用白由变换工具（+T）排列它们，以创建一个箭头。我还将运用如下的图层

7、样式：这两个箭头还是颇费了一番功夫，目前采纳的方法是，先用直线工具画一条水平直线，长度40,爱制图层，将发制的图层顺时针旋转90度。微调这两条直线，使得左上角重合。然后合并图层，再逆时针旋转45度。再自由变换，高度调整为原来的94%左右。再添加如下的样式。做好一个箭头后，豆制图层，水平翻转，得到另一个箭头。再调整箭头到合适的位置。澧含逐质默认E2投If，内阳野外发光内发光到面衽说神纹理有装色叁加石竟会加图案叁加I-物边颜色叠加：颜色：7clcl26步骤26现在要创建内容区域。用文字工具添加文木。并添加如下的图层样式:颜色叠加：颜色:27I2Ia10.步骤27用钢笔工具画2个三角形，并对其添加高

8、斯模糊，参数IO在三角形的上方，添加图片。重复同样的过程，一共要创建8个相像的图片缩略图1.atestProject下面是我最终的效果:心得：1、合理建立图层分组：之前没有感觉。这3个例子做卜.来，动轲数十个图层，在口后的编辑是很头疼的事情。所以一般会依据不同的区域新建一个图层分组，在这个区域内的图层都划并到同个组。这样，口后修改就便利多了。从网页设计来讲，一般划分为这几个组：等。图层分组不是必需的，也不会美化你的网页，但是能简化你日后的维护编辑工作2、虚线：在中是没有设置线型的选项的。因此，假如要画虚线，就不是很便利了。本文提出的不失为一种很奇妙的方法，用文字工具添加文本，然后调整字符间距，可以很便利快速的模拟出直线的效果。3、内嵌字的效果：本文多处通过添加图层样式的方法，来达到文字内嵌的效果。