标点符(钱魏 Way)

使用PS设计一个绿色时尚网站

这篇教程先前已经有人翻译了,但是我这样的初学者,中文的比英文的更加不能理解,于是我站在了初学者的角度,翻译这篇教程。闲话不多说,刚开始学PS,所以此教程适合和我一样刚开始学PS的朋友。本文不仅仅是翻译,每一步都是自己的操作步骤,所以我尽量写得详细。我使用的是Photoshop CS5 可能和别的版本的界面不一样,大家自己把握。恳请要转载的朋友们注意了,你可以不写出处,但是请把图片上传到自己的服务器。

#1 新建一个文件(Ctrl+N),如下图:

#2 打开标尺(ctrl+r),沿着图像拉四条辅助线。

#3使用圆角矩形工具(U),画一个颜色为#e0e0ac,半径为10px的圆角矩形,将图层命名为“主体”

#4调整画布大小(alt+ctrl+c)如下图:

#5再次调整画布大小,如下图:

#6点击激活背景图层,使用油漆桶工具(G)给背景上色,颜色为#6c821c

#7在背景图层上面新建一个“梯度”的图层。在图层上加上一个自下而上的从黑色到白色的渐变(G)

#8渐变设置为“叠加”+“不透明度10%”,并将该图层设置为:图层>图层蒙版>显示全部

#9使用渐变工具(G)在给蒙版添加从下至上黑色到透明效果。并右击“梯度”图层,将其转化为智能对象。并选择滤镜>杂色>添加杂色,如下图:

#10新建一个“高光”的图层,选择画笔工具(B), 选用300px的软刷,在画布的上方画一条白线,并将不透明对设为50%,如下图:

#11在“主体”下面新建一个名为“质感”的新图层,将前景色设置为黑色,背景色设置为白色(D),然后滤镜>渲染>云彩,如下图:

#12并将其转化为智能对象。然后进入 滤镜>模糊>动感模糊,如下图,完成后进入滤镜>钝化>钝化

#13给“质感”添加图层蒙版(图层>图层蒙版>显示全部),给图像添加一个自底向上从黑色到透明的渐变。并设置为叠加,不透明度为40%。

#14双击“主体”给其设置外发光,如下图:

#15在“主体”下面新建一个名为“阴影”的图层,设置前景色为#2a2009,使用画笔工具硬刷直径25px,在圆角矩形下面画个圆。并将其转化为智能对象。使用编辑>自由变换(ctrl+t),将其作拉伸,如下图:

#16然后右键点击置入,使用滤镜>模糊>高斯模糊。如下图,然后将图层修改为正片叠底,不透明度为30%。

#17选择矩形工具(U),并将前景色设置为#d8d8a5, 在圆角矩形的顶部画一个高为60px的矩形框,并将该图层命名为“导航条”。

#18双击“导航条”设置斜面和浮雕,设置渐变叠加,如下图,结束后右键“导航条”图层,选择创建剪贴蒙版。用来还原大的圆角矩形框。

#19创建当前页按钮,设置前景色为#a6a43f,创建一个高度为60px的矩形。设置该图层为“当前页按钮”,设置不透明度为15%,并创建剪贴蒙版。

#20将前面四个图层进行分组(ctrl+g),组名为“主体和导航”

#21使用横排文字工具,添加导航栏目录,设置字体颜色为#a6a43f,字体自己设置。并将图层打包放入“主体和导航栏”内。

#22新建一个背景为透明的5*5像素的文件,如下图。

#23将前景色设置为#2a2009,使用矩形选框工具(M),在图片中间框选出1*1 像素的区域。使用油漆桶并给其上色。

#24重新选择图片整个区域,然后编辑>定义图案。然后就可以关闭图案了。

#25使用矩形工具(U),使用创建一个高度为330px的框体,颜色是#c0c08d,并拉上参考线。

#26将图层命名为“图样”。并将“图样”的图层放到“主体和导航”上面。并设置填充为“0%”。

#27双击“图样”,对图样进行如下设置:

#28选择圆角矩形工具(U),设置半径为8px,设置颜色为#a6a43f,宽为940px,高为240px,设置不透明度为50%,并将其命名为“专题部分”,一用移动工具(V),调整图层的位置(shift+↓/→)。

#29选择圆角矩形工具,设置颜色为#a6a43f,宽为610px,高为220px,并将其命名为“图片区域”。

#30插入一张图片,将图层命名为“图片”,使用移动工具(V),将“图片”放置在“图片区域”上。,右键图层,创建剪贴蒙版。

#31选择横排文字工具(T),在图片的右侧添加文字,如下图。并将图层分组为“文字”。

#32选择圆角矩形工具(U),设置半径为8px,颜色为#a6a42f,将图层命名为“按钮1”设置宽度为160px,高度为50px。同样创建“按钮二”,设置宽度为140px,高度为50px。并调整上面“文字“的位置,使其对齐,设置“按钮1”“按钮2”图层不透明度为30%。

#33将部分图片圆角写改为直角,修改方法如下:激活需要修改的图层(按钮1,按钮2,专题部分);选择直接选择工具(A),点击图层;选择钢笔工具下面的转换点工具,点击需要修改的点;重新选择直接选择工具(A),按住Shift来创建直角。

#34使用横排文字工具(T),选择颜色#eaeab7,添加如下文字和图标。图标下载地址:Function Icon Set

#35将以上图层打包,一并放入“专题”文件夹。

#36选择矩形工具(U),创建高为130px,颜色为#a6a43f,名为“丝带背景”的图层。

#37选择圆角矩形工具(U),创建半径为10px,宽为50px,高为140px的图层。将图层命名为“折角”。

#38点击激活折角,同样选择圆角矩形工具(U),选择工具栏中的从形状区域减去,如下图。画另一个圆角矩形。

#39创建一个新的图层,右键,创建剪贴蒙版。然后选择渐变工具(G),渐变颜色从白色到透明。并将不透明度修改为30%,将图层命名为“高光”。

#40选择圆角矩形工具(U),设置颜色为#878533,然后在“丝带”上方创建一个宽为40px,高为20px,名为“折角阴影”的图层。

#41选择矩形工具(U),点击从形状区域减去。

#42双击“折角阴影”图层,进行如下设置:

#43重复以上步骤,创建“丝带”右侧阴影。并将所有的图层打包为“丝带”。

#44在“丝带背景”底部,如同上面的操作一样,画一个阴影。

#45选择圆角矩形工具(U),设置半径为8px,颜色为#e1e0c1创建4个宽为220px,高为110px的图层。将其不透明度都改为50%,并对其进行分组为“图片”。

#46给上述图片区域加上图片,加上图片的方法是:转化为只能对象;编辑>自由变化;创建剪贴蒙版。

#47使用横排文字工具(T),创建如下文字和图标。

#48使用文横排文字工具(T),在页面上方添加网站名,并添加副标题,颜色设置为#E0E0AC,双击图层并进行如下设置。

#49大功告成,上完整图。

PSD源文件下载:http://sinaurl.cn/h4Fq71,仅供参考~

本教程的原文地址(E文的)为:http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-make-a-green-sleek-web-layout-in-photoshop/

码字很辛苦,转载请注明来自标点符《使用PS设计一个绿色时尚网站》

评论