Photoshop中创建充满色彩的网页效果图文档格式.docx
《Photoshop中创建充满色彩的网页效果图文档格式.docx》由会员分享,可在线阅读,更多相关《Photoshop中创建充满色彩的网页效果图文档格式.docx(41页珍藏版)》请在冰豆网上搜索。
设置该图层的渲染模式为“差值”(Difference),透明度设为30%,该土层命名为“texture”。
Step4:
创建黑色背景的内容区域
新建一个图层,选择圆角矩形工具,设置圆角度为3个像素,创建一个黑色的圆角矩形。
然后在图层面板中双击该图层,弹出图层样式面板,按照图中的设置给该图层设置阴影。
设置该图层透明度为70%,然后命名这个图层为“blackshape”。
Step5:
用群组(文件夹)来组织你的图层
按住ctrl键,选择你刚刚创建的所有的图层,然后点击Ctrl+G群组他们。
给这个新的群组(文件夹)命名为”background”。
Step6:
创建更多的群组(文件夹)
创建新群组,图层>
新建>
群组,然后命名为“home”。
然后在这个群组下创建另一个群组,命名为“logo”。
Step7:
创建logo和口号
在logo群组中,新建一个图层。
用文字工具,输入网站的logo文字,应用颜色是#f4f4f4。
双击该图层打开图层属性面板。
按照上面的设置进行操作。
然后新建另一个图层输入口号,应用颜色是#eeeeee。
Step8:
“Signup”和“login”按钮
好了,我们现在要在布局的右上角做两个按钮。
新建一个群组,命名为“Signup|Login”。
然后选择圆角矩形,创建一个小的矩形,就像我做的一样。
双击图层打开图层样式面板,按照上图的设置进行操作。
设置前景色为白色,用文字工具在你的按钮上写下“Signup|Login”。
设置文字这个图层的透明度为75%。
Step9:
创建1个像素高的蓝色线条
新建一个群组,命名为“Navigation”(导航)。
新建一个图层,命名为”Line”。
选择“单行选框工具”,在画布中单击创建一个像素高的选取。
填充颜色#406f94,然后删除内容区域以外的部分。
设置该图层透明度为40%。
Step10:
在导航条中添加一个渐变效果
创建新图层。
用矩形选区工具,创建一个选区,就像我做的一样。
(注意:
你可以利用标尺来帮助一创建这个选区)。
然后用渐变工具,设置渐变为#35423e到透明。
从底部向上填充渐变。
按下Ctrl+D清除选区。
然后,滤镜>
杂色>
添加杂色。
按照上图的设置进行操作。
命名这个图层为“gradient”。
在线条和渐变之间记得留下1个像素的高。
Step11:
写导航的字
选择文字工具,写下你的导航的文字。
然后双击打开图层样式面板。
按照上图设置。
我给文字添加了一个基本的渐变/阴影效果。
Step12:
创建导航文字之间的装饰分割
现在我们要创建一些分割线。
新建一个图层,选择单列选框工具,创建一个1个像素宽的选区。
然后用矩形选区工具,单击”与选区交叉”按钮(在状态栏的上面有个按钮),按照上图的操作化一个选取。
用白色填充选取。
然后ctrl+D删除选取。
Step13
双击该图层打开图层样式面板,创建渐变叠加。
该图层命名“line1″。
Step14:
Ctrl+J复制图层“line1″,然后命名这个新图层为”line2″。
用移动工具,向右挪动这个图层。
然后双击图层打开图层样式面板,按照上面的设置进行操作。
Step15:
把图层”line1″和“line2″转换成智能图层
按住Ctrl键,选中图层“line1″和”line2″。
然后点击右键,选择转换成智能对象图层。
设置这个智能图层为“separator”。
Step16:
创建蓝色高光
在图层”separator”下创建一个新图层。
用矩形选区工具创建一个选取(按照上图设置),然后填充颜色为#35423e。
右键单击该图层,把这个图层转换成智能对象图层。
点击滤镜>
模糊>
高斯模糊,按照图中设置。
添加杂色,按照图中设置。
设置该图层透明度为60%,命名该图层为“highlight”。
Step17:
给图层”separator”创建蒙版
在图层面板中单击图层“separator”,点击图层>
图层蒙版>
显示全部。
选择渐变工具,在蒙版中,从顶部到分割线的中间部分,画一个从黑色到透明的渐变。
Step18:
复制分割线
按住Ctrl键,在图层面板中,点击图层”separator”和“highlight”。
然后用移动工具,按住Alt和Shift键拖拽。
这时候的效果就是复制移动了这两个图层。
向右移动到合适的位置。
重复以上操作。
Step19:
群组所有的分割线
选择所有的“separator”和“highlight”图层,按住Ctrl+G群组它们。
命名这个群组为”separators”。
Step20:
给活动页添加按钮效果
现在,我们要给当前(活动的)页面的导航文字,添加一个不同的背景,要和其他页面的导航文字作以区分。
用选区工具创建一个和我一样的矩形选取。
把这个图层放在文字图层的下面。
双击该图层打开图层面板,按照上图进行设置,添加一个渐变叠加。
命名这个图层为”activemenu”,设置图层透明度为50%。
Step21:
创建搜索条
新建群组(图层>
新建>
群组),命名为“search”。
把它放在群组”navigation”的上面。
用圆角选区工具,设置圆角为3px,创建一个圆角矩形,设置颜色为#104f59。
命名这个图层为“textfield”,设置透明度为80%。
Step22:
创建搜索按钮
用矩形选取工具创建一个矩形选区,如上图。
把它放在搜索条的右边。
双击图层打开图层样式面板。
添加渐变叠加。
然后给这个图层创建一个蒙版。
Step23:
在按钮上写“search”
用白色写文字“search”。
设置该图层透明度为75%。
Step24:
给搜索栏创建一个1像素宽的细线
用单列选框工具,创建需要的选取。
然后填充颜色#123036。
命名这个图层为“line”,把它放在图层“button”下面。
Step25:
创建一个蓝色矩形
创建一个新群组,命名为”Showcase”。
在里面再创建一个群组,命名为”background”。
用矩形选择工具,创建一个新矩形,填充颜色#219aad。
我的矩形是983px宽273px高(在创建举行之前你可以打开信息面板–窗口>
信息,这样你就可以看到具体的尺寸)。
设置图层透明度为55%命名它为“bg4″。
Step26:
给这个蓝色矩形添加纹理效果
打开素材文件”像素化蓝色矩形”,把素材移动到我们的文件中。
放在蓝色矩形的上面。
设置该图层透明度55%,然后命名这个图层为“bg3″。
Step27:
给蓝色矩形添加渐变
按住Ctrl点击图层“bg4″的蒙版,这时创建了一个选取。
新建图层,用渐变工具,从选取的底部到顶部画一个从#56b8e5到透明的渐变。
然后Ctrl+D删除选区。
Step28:
创建一个小的蓝色矩形
新建图层。
用矩形选区工具,创建一个选区(如上图)。
用渐变工具,从选区的底部到头部,拖拽从#0f2b42到#2a607f的渐变。
Ctrl+D删除选区。
命名该图层为“bg1″。
Step29:
“Signup”按钮
创建新群组命名为“signupbutton”。
用圆角矩形工具,设置圆角为2px,创建一个圆角矩形(如上图)。
如上图设置,添加效果。
然后用文字工具写上“signup”,设置文字白色。
Step30:
“Learnmore”按钮
重复上面的操作,建立另一个按钮。
但是这一次白色的文字是“learnmore”。
然后创建一个新图层,用用户自定义形状,选择一个白色的箭头。
Step31:
在矩形的左边创建一个按钮
创建一个新群组,命名为”leftarrow”。
用椭圆工具l(U),创建一个圆形,填充颜色#406f94。
双击图层打开图层样式面板,按照上图设置。
Step32:
在蓝色圆圈中创建一个箭头
新建图层,用用户自定义图形,创建白色箭头。
双击打开图层样式面板,按照上图进行设置。
设置图层透明度为50%。
Step33:
在右边创建另一个箭头。
重复以上步骤,在矩形的右边创建对称的圆圈和箭头。
Step34:
创建特色图片
新建群组。
命名为“image”。
在这个群组中放置一个小的图片,命名这个图层为”image”。
双击打开图层样式面板。
Step35:
给你的图片添加阴影
点开图层>
图层样式>
新建图层,在原始图层上面新建了一个图层。
打开图层>
图层梦般>
显示全部,设置渐变,画一个黑色到透明的渐变,从小图片的底部到中间的位置。
给这个图层命名为“shadow”。
Step36:
添加文字
用文字工具添加一些文字,命名这个群组为“text”。
Step37:
创建白色矩形
新建群组,命名为“content”,在其中再新建一个群组,命名为“shadows”。
用矩形工具,新建一个矩形,填充白色,向上图一样。
命名这个图层为”whiteshape”,设置图层透明度为90%。
Step38:
添加顶部阴影
按住Ctrl单击图层面板上图层”whiteshape”的小缩略图,创建选取。
创建一个新图层,用渐变工具,画一个从#8f8f8f到透明的渐变,参照上图。
设置该图层透明度为50%,命名这个图层为”topshadow”。
然后用移动工具,向下移动2个像素。
Step39:
创建横向的阴影
新建图层,,用矩形工具,创建一个选区,如上图。
用渐变工具画一个从#8f8f8f到透明的渐变。
给这个图层创建蒙版,用一个直径较大的软笔刷,创建阴影。
设置该图层透明度为30%,命名该图层为“verticalshadow1″。
复制这个图层(Ctrl+J),命名这个新图层为“verticalshadow2″,并且把它移动到右边。
Step40:
创建横向线条
用直线工具(U)创建一个横向线条,如上图,高为1px,颜色#aebcc7。
命名为“line”。
Step41:
选择文字工具,添加一些文字。
你也可以添加一些图片。
Step42:
给底部创建渐变
新建群组,命名为“footer”。
在里面新建一个图层,用选区工具(M)创建一个选区,如上图。
设置前景色为#555555,用一个直径比较大的软笔刷,在选取顶部的位置涂抹。
设置该图层透明度为50%,命名该图层为”gradient”。
Step43:
在底部,添加一个1个像素高的线条
按照以前的做法,创建一个1px高的线条,填充颜色黑色,设置图层透明度为15%,命名该图层为“line”。
Step44:
给底部区域添加文字
在底部添加一些文字
FinalResult
∙文章来自苏打苏塔设计量贩铺