PS制作网页效果图多种模版.docx
《PS制作网页效果图多种模版.docx》由会员分享,可在线阅读,更多相关《PS制作网页效果图多种模版.docx(40页珍藏版)》请在冰豆网上搜索。
PS制作网页效果图多种模版
Photoshop详解制作漂亮的绿色首页模板,第一,对于一些做网站的爱好者,下面真的是个好例子;第二,设计出来的效果也很不错;第三,内容齐全,很值的学习。
在这篇教程中,你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。
你将学会一些很时髦的设计技巧,像是如何制作3D丝带,或者是如何设置看上去很专业的渐变色。
这是教程的第一局部。
最终效果图
看一看我们最终的效果图吧,看上去还不错:
>
在photoshop中新建文档
1在photoshop中新建一个文档,尺寸为980px×830px.
2假如你在photoshop软件界面中,没有看到在画布的周围看到标尺,点击试图>标尺〔Ctrl+R〕可以显示标尺。
3在画布的四个边,分别拖拽四条标尺线。
在这四条线中间,我们将绘制我们的页面。
创立页面背景
4选择圆角矩形工具(U),设置圆角半径为10px,设置颜色为#E0E0AC,在你的整个画布中拖拽一个圆角矩形。
设置这个图层名字为“bg“.
5好了,如今,我们将扩大我们的画布。
首先,缩小我们的画布视图(ctrl+-),然后点击图像>画布尺寸(Alt+Ctrl+C),然后根据下面的截图设置参数。
6再一次选择图像>画布尺寸(Alt+Ctrl+C),然后根据下面的截图设置参数。
7在图层面板中点击背景图层,设置前风光为#6C821C,用油漆桶(G)填充背景。
8在背景图层上面创立一个新图层,命名为〞gradient“.
9在工具栏中选择渐变工具(G),从画布头部开场向下拖拽出一个从白色到黑色的渐变。
10设置该图层渲染形式为颜色加深,然后设置图层图层透明度为10%.
11保持该图层仍为选定状态,点击图层>图层蒙版>显示全部。
12在工具栏中选择渐变工具(G),从你的画布底部向上拖拽一个从黑色到透明的渐变。
可以根据下面的截图进展拖拽。
13右键单击图层“gradient〞,在弹出的菜单中,设定转换为智能元件。
14点击滤镜>杂点>添加杂点。
根据下列图设置参数。
15新建一个图层,用画笔工具(B),选择白色的软笔刷,直径为300px,在你的画布顶端,画一条白线。
16设置这个图层的透明度为50%,并命名该图层为“highlight“.
17在bg图层上面,新建图层。
点击键盘上的D,设置成默认的前景背风光〔前景白色,背景黑色〕,然后点击滤镜>渲染>云彩。
18在图层面板上,右键单击该图层,在弹出的菜单中,设置该图层为智能元件。
命名该图层为“texture“.
19保持图层〞texture〞仍未选定状态。
点击滤镜>模糊>动感模糊,根据截图进展参数设定。
20然后点击滤镜>锐化>锐化。
21给图层〞texture〞添加蒙版,点击图层>图层蒙版>显示全部。
22选择渐变工具(G),从画布底部到顶端,拖拽一个黑色到透明的渐变。
23设置图层渲染形式为叠加,设置图层透明度为40%。
设置主要内容的背景
24双击“bg〞图层,翻开图层属性面板。
根据下列图进展外发光的参数设定。
25新建图层,设置前风光为#2A2021,选择画笔工具(B),用一个比拟硬的直径为25px的画笔,在你的圆角矩形的下边缘,画一个圆。
26在图层面板中右键单击该图层,设置图层为智能对象。
27然后点击编辑>自由变化(Ctrl+T),根据下列图进展变形。
28点击滤镜>模糊>高斯模糊,按照下列图进展参数设定。
29设置该图层的渲染形式为整片叠底,透明度为30%。
最后,给该图层命名为〞shadow“,把这个图层放在bg图层的上面。
创立导航条
30好了,接下来,我们来做导航条。
选择矩形工具(U),设置颜色为#D8D8A5.
31在你之前创立的那个大的圆角矩形中,创立一个高为60px的矩形,命名该图层为“navigationbar“.
Note:
翻开信息面板(F8),这样你就会看到你所创立的矩形的高度。
32双击图层“navigationbar〞翻开图层属性面板,按照下列图设置参数。
33你可能注意到,我们刚刚创立的矩形并没有圆角。
为了纠正这个小的细节,我们应用剪辑蒙板〔clippingmask〕这个概念。
右键点击图层“navigationbar〞layer,选择创立剪切蒙版。
34好了,我们接下来要做的是,创立当前页的按钮。
选择矩形工具(U),设置颜色为#A6A43F,创立一个高为60px的矩形。
35设置透明度为15%,命名该图层为〞currentpagebutton“.
36然后向下设置剪辑蒙板。
37选择刚刚的四个图层,点中ctrl然后分别在图层面板中点击这四个图层,然后点击Ctrl+G群组。
设置这个群组名为“bg&navigationbar“.
38选择文字工具(T),给导航添加一些文字,用颜色#A6A43F.在这次的设计中,我用的字体是AvenirLT65Medium。
假如你没有这个字体,可以用你喜欢的字体代替。
给“特色工程〞局部,自定义一个图案
39好了,我们要创立一个图案。
新建一个文档,文件>新建(Ctrl+N),尺寸是5px*5px,透明背景。
40设置前风光为#2A2021,在工具栏中选择铅笔工具(B),在你的画布中间,画一个1px大小的方框。
41点击编辑>定义图案。
命名这个图案,然后点击ok。
好了,你可以关闭这个文件了。
创立“特色工程〞区域
42选择矩形工具(U),创立一个高为330px的任何颜色的矩形。
43在图层面板上,双击该图层,翻开图层属性面板。
按照下列图进展参数设定。
44命名这个图层为“pattern“.
45选择圆角矩形工具(U),设置圆角半径8px,颜色#A6A43F,创立一个宽940px高240px的圆角矩形。
46设置图层透明度为50%,命名该图层为“featuredprojectbg“.
47选择矩形工具(U),设置颜色#A6A43F,创立一个尺寸为610px*220px的矩形。
这个将会是“特色工程〞的图片的位置。
,命名该图层为“imagebg.〞
48导入任何你喜欢的图片。
(我用的是网站Envatowebsite的截图).
49把图片放在你刚刚创立的矩形的上面,在图层面板上单击创立图层剪切蒙版。
命名这个图层为“image“.
50选择文字工具(T),在右边添加一些文字。
按照下列图进展书写。
群组这些文字,命名该群组为“text“.
创立按钮call-to-action
51好了,我们要在“特色工程〞的底部创立两个按钮。
选择圆角矩形工具(U),设置半径为8px,颜色为#A6A42F,创立一个小矩形。
命名该图层为“button1“.
52我们希望按钮的上面不是圆角。
按照下面的操作进展:
A.确定图层〞button1″的蒙版是选中的。
B.选择直接选择工具(A),在你看到的途径上单击。
好了,这时候你将看到在每个圆角上都有两个锚点。
C.选择转换点工具(默认图标是个小钢笔头,在这一组工具中可以找到),单击这四个锚点。
再次选择直接选择工具(A),按住shift键创立直角边。
53设置该图层透明度为30%.
54然后用文字工具l(T)添加一些文字。
设置颜色为#EAEAB7.
55你也可以添加一些小图标。
假如你喜欢,可以去这里翻翻看。
56群组所有的文字和图标图层,命名太群组为〞button1“.
57创立另一个按钮。
58为了方便管理,群组所有关于〞特色相聚〞的图层和群组层,命名这个大的群组为〞featuredproject“.
创立3D丝带
59选择矩形(U)创立一个高为130px的颜色为#A6A43F的矩形,如下列图。
命名该图层为“ribbonbackground“.
60选择圆角矩形(U),设置半径为10px,在你刚刚创立的矩形的左边的位置,拖拽一个矩形。
在这一步,你可以拖拽一些标尺线作为辅助。
61点击你之前创立的圆角矩形的矢量蒙版,让它被选中。
然后选择圆角矩形(U),在属性栏中点击从形状减去区的按钮,创立一个圆角矩形。
按照下面的截图进展操作。
62创立一个新的图层,右键点击设置为创立剪贴蒙版。
63选择渐变工具(G),按照下面的截图拖拽一个白色到透明的渐变。
64设置该图层渲染形式为叠加,透明度为30%,命名为“highlight“.
65选择矩形工具(U),设置颜色为#878533,在图层〞ribbonbackground〞上创立一个矩形。
66选择矩形工具(U),在属性栏中点击从形状减去区按钮,然后创立一个矩形。
如图。
剪切掉我们不要的那局部。
67双击图层,翻开图层属性面板。
按照下面的截图进展参数设置。
68重复以上步骤,不过这一次是在丝带的右边。
69群组所有关于丝带的图层,命名该群组为〞ribbon“.
70在图层〞ribbonbackground〞上创立一个新图层。
然后按照之前的操作,创立一个阴影。
71选择圆角矩形工具(U),设置半径为8px,颜色为#E1E0C1,创立四个圆角矩形,大小为220px*110px.
72设置透明度为50%,然后群组他们。
命名该群组为〞images“.
73在工具栏中选择文字工具(T),在你的布局下面添加一些文字。
也可以添加一些图标。
74应用文字工具(T),颜色为#E0E0AC。
在文档的顶端,写上整个站点的名字。
75双击该图层,翻开图层属性面板。
按照下列图进展参数设定。
76然后写标语。
77为了让效果图更完好,你可以选择四个图片,导入到你的文档中。
放在你的丝带上。
好了,完成了!
假如你按照该教程进展学习,你应该能得到下面的效果。
单击这里查看完好效果。
查看更多请点击〔按住ctrl键点击〕