织梦CMS - 轻松建站从此开始!

我的网站

Photoshop设计清新色彩生动的网页模板(2)

时间:2010-10-27 21:02来源:网络 作者:未知 点击:
第十步:给导航添加渐变 选取矩形选框工具(M)创建选区(提示:你可以使用标尺),然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl

第十步:给导航添加渐变

选取矩形选框工具(M)创建选区(提示:你可以使用标尺),然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl+D撤消选区,右击图层,转换为“智能对象”,然后再转到菜单 滤镜>杂色>添加杂色,并按照下图进行设置。给此图层命名为“渐变”,且在渐变与横线之间留出1px的距离。

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

第十一步:编辑导航菜单

选取字体工具(T),并在导航栏上编辑菜单,这里我应用的字体是Adobe仿宋体,然后双击字体图层,按下图一样设置图层样式。

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

第十二步:创建分隔线

现在我们将在菜单栏中创建分隔线,新建图层,选取单列选框工具,并在菜单的布局上点击一下,选取矩形选框工具(M),并在选项栏上选择“交叉选区。

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

对新的选区以白色填充,最后按ctrl+d,取消选框。最终结果如下图:

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

第十三步:双击上步新建的图层,命名为“竖线1”,并进行如下图层样式的设置。

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

第十四步:按ctrl+j复制图层“竖线1”,重命名为“竖线2”。选取移动工具(V),点击键盘上的方向键,向右移动1px,并更改“渐变叠加”的设置。如下所示:

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

您的图将会是这样:

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

按住ctrl,选择“竖线1”和“竖线2”,转换为“智能对象”,新图层命名为“分隔线”。

第十五步:创建蓝色高光

1、新建图层,放置在“分隔线”下,选取矩形选框工具(M)创建像下图一样的选区

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

2、以颜色#35423e填充该选区,按ctrl+d撤消选框,右击,在下拉菜单中选择“转换为智能对象”

3、去往菜单 滤镜>模糊>高斯模糊,并设置半径为4px

4、再次 滤镜>杂色>添加杂色,数量为0.7%,属性为第一个选项,像第十步那样设置

5、设置图层透明度为60%,命名为“高光”

图片最终为:

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

第十六步:为图层“分隔线”创建图层蒙版

选定图层“分隔线”,转到菜单 图层>图层蒙版>显示所有,选择渐变工具(G),新建一个从黑到透明的渐变,方向是从上到中间。

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

第十七步:复制图层“分隔线”,“高光”

同时选中“分隔线”,“高光”这两个图层,使用移动工具(V),按住alt+shift,拖动两个图层中的对象至另一个菜单与菜单之间,这就相当于复制“分隔线”,“高光”的操作,重复拖动动作,根据您的菜单多少来复制

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

第十八步:为图层“分隔线”,“高光”编组

选择所有的图层“分隔线”,“高光”,按ctrl+g,进行编组,组命名为“分隔线”。

第十九步:为当前页面创建激活按钮

现在我们将为当前菜单页面创建一个激活按钮,来区分其它的菜单按钮。选取矩形工具(U)并像下图一样新建矩形,并把这图层放置在“菜单”图层的下方,双击图层,进行“渐变叠加”的设置,图层命名为“激活按钮”,设置透明度为50%。

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

效果图:

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

(责任编辑:RGB)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容