Photoshop中创建充满色彩的网页效果图.doc

《Photoshop中创建充满色彩的网页效果图.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、photoshop中创建一个充满色彩的网页效果图在这篇教程中，我将教给你如何在photoshop中制作一个简洁干净的网页效果图。原始效果是由ThemeForest的kuntiz设计的。我很感谢他允许我发布这篇教程。一些需要的素材:·叶子素材·像素化蓝色矩形Step1:新建文档在photoshop中，按住(Ctrl+N)新建一个文档。设置大小为1200px*750px。然后用渐变工具从上到下拉出一个渐变，颜色从#792700到#000000。Step2:在背景中添加一些颜色新建一个图层，命名为”color.”，用笔刷工具，选择一个比较软的笔刷，大概直径为300px，我的颜色选择的是红色

2、，蓝色和橙色，在这个图层中添随便画几笔。Step3:给背景添加一些纹理现在我们要给背景增加一些纹理效果。打开我们刚刚下载的叶子的素材图片，用移动工具把这个图片移动到我们的文档中。右键单击该图层的缩略图（在图层面板中），选择“编组到新建智能对象土层中”。然后选择滤镜>艺术化>胶片颗粒，按照上面的设置进行操作。然后选择滤镜>像素化>马赛克，同样按照图中的设置进行操作。设置该图层的渲染模式为“差值”（Difference），透明度设为30%，该土层命名为“texture”。Step4:创建黑色背景的内容区域新建一个图层，选择圆角矩形工具，设置圆角度为3个像素，创建一个黑色的圆角矩形。然后在

3、图层面板中双击该图层，弹出图层样式面板，按照图中的设置给该图层设置阴影。设置该图层透明度为70%，然后命名这个图层为“blackshape”。Step5:用群组（文件夹）来组织你的图层按住ctrl键，选择你刚刚创建的所有的图层，然后点击Ctrl+G群组他们。给这个新的群组（文件夹）命名为”background”。Step6:创建更多的群组（文件夹）创建新群组，图层>新建>群组，然后命名为“home”。然后在这个群组下创建另一个群组，命名为“logo”。Step7:创建logo和口号在logo群组中，新建一个图层。用文字工具，输入网站的logo文字，应用颜色是#f4f4f4。双击该图层

4、打开图层属性面板。按照上面的设置进行操作。然后新建另一个图层输入口号，应用颜色是#eeeeee。Step8:“Signup”和“login”按钮好了，我们现在要在布局的右上角做两个按钮。新建一个群组，命名为“Signup

5、Login”。然后选择圆角矩形，创建一个小的矩形，就像我做的一样。双击图层打开图层样式面板，按照上图的设置进行操作。设置前景色为白色，用文字工具在你的按钮上写下“Signup

6、Login”。设置文字这个图层的透明度为75%。Step9:创建1个像素高的蓝色线条新建一个群组，命名为“Navigation”(导航)。新建一个图层，命名为”Line”。选择“单行选框工具”

7、，在画布中单击创建一个像素高的选取。填充颜色#406f94，然后删除内容区域以外的部分。设置该图层透明度为40%。Step10:在导航条中添加一个渐变效果创建新图层。用矩形选区工具，创建一个选区，就像我做的一样。（注意：你可以利用标尺来帮助一创建这个选区）。然后用渐变工具，设置渐变为#35423e到透明。从底部向上填充渐变。按下Ctrl+D清除选区。然后，滤镜>杂色>添加杂色。按照上图的设置进行操作。命名这个图层为“gradient”。在线条和渐变之间记得留下1个像素的高。Step11:写导航的字选择文字工具，写下你的导航的文字。然后双击打开图层样式面板。按照上图设置。我给文字添加了

8、一个基本的渐变/阴影效果。Step12:创建导航文字之间的装饰分割现在我们要创建一些分割线。新建一个图层，选择单列选框工具，创建一个1个像素宽的选区。然后用矩形选区工具，单击”与选区交叉”按钮（在状态栏的上面有个按钮），按照上图的操作化一个选取。用白色填充选取。然后ctrl+D删除选取。Step13双击该图层打开图层样式面板，创建渐变叠加。该图层命名“line1″。Step14:Ctrl+J复制图层“line1″，然后命名这个新图层为”line2″。用移动工具，向右挪动这个图层。然后双击图层打开图层样式面板，按照上面的设置进行操作。Step15:把图层”line1″和“line2″转

9、换成智能图层按住Ctrl键，选中图层“line1″和”line2″。然后点击右键，选择转换成智能对象图层。设置这个智能图层为“separator”。Step16:创建蓝色高光在图层”separator”下创建一个新图层。用矩形选区工具创建一个选取（按照上图设置），然后填充颜色为#35423e。右键单击该图层，把这个图层转换成智能对象图层。点击滤镜>模糊>高斯模糊，按照图中设置。点击滤镜>杂色>添加杂色，按照图中设置。设置该图层透明度为60%，命名该图层为“