photoshop设计清新色彩生动的网页模板

《photoshop设计清新色彩生动的网页模板》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、photoshop学习教程www.50jun.comPhotoshop设计清新色彩生动的网页模板先看看最终效果图第一步：新建文档1200px*750px，选择渐变工具(G)，对背景图层从上(#792700)到下(#000000)新建渐变，如下图所示：第二步：添加色彩新建图层，选择笔刷工具(B)，选取直径为300px的软笔刷，分别以红(#be4816)、黄(#c0952c)、蓝(#33afc6)三种颜色涂在背景层的上半部，图层命名为“颜色”。如下图所示：第三步：添加纹理打开一开始保存好的“绿叶”图片，使用移动工具(V)，移动到当前文

2、档内，右击新图层，选择“转换为智能对象”，然后转到菜单：滤镜>艺术化>胶片颗粒，滤镜>像素化>马赛克，参照下图的设置，最后设置此图层的“混合模式”为“差值”，透明度为30%，图层命名为：“纹理”。如下图所示：1photoshop学习教程www.50jun.com第四步：为内容添加黑色背景新建图层，选择圆角矩形工具(U)，设置3px的半径，创建一个黑色圆角矩形框，双击图层，弹出“图层样式”对话框，如下图一样设置“阴影”，最后设置此图层的透明度为70%，图层命名为：“黑色形态”，如下图所示：2photoshop学习教程www.50ju

3、n.com第五步：添加组管理图层按住ctrl键，选择目前为止创建的所有图层，进行图层编组(ctrl+g)，组命名为：背景，如下图所示。第六步：创建更多组新建组(图层>新建>图层编组)，组命名为：主页，在“主页”内再增加一个组，组命名为“logo”，如图所示：第七步：创建logo和网站副标题在“logo”的组里新建图层，选取字体工具(T)，书写您的网站名字，颜色为#f4f4f4。双击图层，按照下图设置图层样式，“斜面与浮雕”，“外发光”，“渐变叠加”。然后再新建图层编辑网站副标题，颜色为#eeeeee。3photoshop学习教程w

4、ww.50jun.com第八步：创建”注册“，”登录“按钮现在将在布局的右上角创建两个按钮。新建组，命名为“注册

5、登录”;选取圆角矩形工具(U)，像我一样创建圆角矩形;双击形状图层，弹出图层样式对话框，如下图进行设置。设置前景颜色为白色，用字体工具(T)在按钮上编写“注册

6、登录”，设置字体层的透明度为75%。4photoshop学习教程www.50jun.com第九步：创建1px高的蓝色水平线新建组，命名为“导航”，新建图层，选取单行选框工具并在文档新建1px高的选区，以颜色#406f94进行填充，使用矩形选框工具(M)删除超出黑

7、色矩形的选区，设置透明度为40%，层命名为“横线”。第十步：给导航添加渐变选取矩形选框工具(M)创建选区(提示：你可以使用标尺)，然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl+D撤消选区，右击图层，转换为“智能对象”，然后再转到菜单滤镜>杂色>添加杂色，并按照下图进行设置。给此图层命名为“渐变”，且在渐变与横线之间留出1px的距离。5photoshop学习教程www.50jun.com第十一步：编辑导航菜单选取字体工具(T)，并在导航栏上编辑菜单，这里我应用的字体是Adobe仿宋体，然后双击字体

8、图层，按下图一样设置图层样式。第十二步：创建分隔线现在我们将在菜单栏中创建分隔线，新建图层，选取单列选框工具，并在菜单的布局上点击一下，选取矩形选框工具(M)，并在选项栏上选择“交叉选区。6photoshop学习教程www.50jun.com对新的选区以白色填充，最后按ctrl+d，取消选框。最终结果如下图：第十三步：双击上步新建的图层，命名为“竖线1”，并进行如下图层样式的设置。第十四步：按ctrl+j复制图层“竖线1”，重命名为“竖线2”。选取移动工具(V)，点击键盘上的方向键，向右移动1px，并更改“渐变叠加”的设置。如下所

9、示：7photoshop学习教程www.50jun.com您的图将会是这样：按住ctrl，选择“竖线1”和“竖线2”，转换为“智能对象”，新图层命名为“分隔线”。第十五步：创建蓝色高光1、新建图层，放置在“分隔线”下，选取矩形选框工具(M)创建像下图一样的选区2、以颜色#35423e填充该选区，按ctrl+d撤消选框，右击，在下拉菜单中选择“转换为智能对象”3、去往菜单滤镜>模糊>高斯模糊，并设置半径为4px4、再次滤镜>杂色>添加杂色，数量为0.7%，属性为第一个选项，像第十步那样设置5、设置图层透明度为60%，命名为“高光”图

10、片最终为：第十六步：为图层“分隔线”创建图层蒙版选定图层“分隔线”，转到菜单图层>图层蒙版>显示所有，选择渐变工具(G)，新建一个从黑到透明的渐变，方向是从上到中间。第十七步：复制图层“分隔线”，“高光”同时选中“分隔线”，“高光”这两个图层，使用