PS网页设计中制作Web水晶按钮(3)

【斜面和浮雕】的样式选择外斜面,【深度】为32%,【方向】为下,【大�课�,【光泽等高线】样式修改为半圆,其他使用默认,如图12-3-50所示。 图12-3-50 14.设置【图层4】的混合选项,我们还是先来设置【投影】。

PS网页设计制作Web水晶按钮(2)

8.将路径转化为选区,选择颜色为灰色进行填充,模糊工具进行适当的模糊。如图123-38所示。我们继续使用【钢笔】工具,新建一个图层,来绘制按钮的反光面,绘制后将其转化为选区,如图12-3-39所示。 图12-3-38图12-

【斜面和浮雕】的样式选择外斜面,【深度】为32%,【方向】为下,【大小】为7,【光泽等高线】样式修改为半圆,其他使用默认,如图12-3-50所示。

PS网页设计中制作Web水晶按钮(3)插图
 

图12-3-50

14.设置【图层4】的混合选项,我们还是先来设置【投影】。【不透明度】设置为10%,【距离】、【扩展】、【大小】分别为5、75、10。【等高线】样式为锥形—反转。如图12-3-51所示。

PS网页设计中制作Web水晶按钮(3)插图(1)
 

图12-3-51

【内阴影】的【不透明度】为45%,【距离】、【阻塞】、【大小】分别为20、0、30,其他选项使用默认,如图12-3-52所示。

PS网页设计中制作Web水晶按钮(3)插图(2)
 

图12-3-52

设置完我们点击【确定】。

15我们再选择【背景】层,然后点新建按钮,在背景的上放新建一个图层,填充颜色为灰色,如图12-3-53所示。

PS网页设计中制作Web水晶按钮(3)插图(3)
 

图12-3-53

16.然后在最顶部在建立一个图层,然后选择文字工具,输入一些文字。设置文字的字体,大小以及颜色等。如图12-3-54所示。

PS网页设计中制作Web水晶按钮(3)插图(4)
 

图12-3-54

17.右键图层选择【栅格化文字】选项,然后对其进行混合模式的调节,打开【图层样式】后,选择【外发光】,【不透明度】设置为75%,【扩展】为0,【大小】为20,【范围】30%,如图12-3-55所示

PS网页设计中制作Web水晶按钮(3)插图(5)
 

图12-3-55

18.完成后,我们点击【确定】。取消辅助线,这样,我们的Web水晶按钮就制作完成了,我们可以看下最终的效果。如图12-3-56所示。

PS网页设计中制作Web水晶按钮(3)插图(6)

图12-3-56

8.将路径转化为选区,选择颜色为灰色进行填充,模糊工具进行适当的模糊。如图12-3-38所示。我们继续使用【钢笔】工具,新建一个图层,来绘制按钮的反光面,绘制后将其转化为选区,如图12-3-39所示。

PS网页设计中制作Web水晶按钮(3)插图(7)PS网页设计中制作Web水晶按钮(3)插图(8)

图12-3-38图12-3-39

我们对这个选区进行白色和透明的渐变填充,填充效果如图12-3-40所示。

PS网页设计中制作Web水晶按钮(3)插图(9)

图12-3-40

9.现在我们打开图层混合模式,对每个图层一一调节,我们选择【图层一】,右键选择【混合模式】,选择【投影】,【不透明度】设为75,【距离】为12,【扩展】值为0,【大小】为13,如图12-3-41所示。

PS网页设计中制作Web水晶按钮(3)插图(10)
图12-3-41

然后选择【斜面和浮雕】选项,参数设置如图12-3-42所示。

PS网页设计中制作Web水晶按钮(3)插图(11)
 

图12-3-42

10.【图层一】设置好以后,我们再来设置【图层二】,打开【混合模式】对话框,设置参数,选择【投影】,【混合模式】为正常,【不透明度】为70%,【角度】为124度,【距离】为5,【扩展】为0,【大小】为7,如图12-3-43所示。

PS网页设计中制作Web水晶按钮(3)插图(12)
 

图12-3-43

11.再看【内阴影】选项,【混合模式】为正片叠加,【不透明度】为75%,【距离】5像素,【大小】为5像素。如图12-3-44所示。

PS网页设计中制作Web水晶按钮(3)插图(13)
 

图12-3-44

再往下选择【内发光】选项,将【不透明度】设为75%,颜色改为灰色,【阻塞】为27%,【大小】为13像素,【范围】为51%,其他使用默认。如图12-3-45所示。

PS网页设计中制作Web水晶按钮(3)插图(14)
 

图12-3-45

12.最后我们来设置图层的【斜面和浮雕】选项,【样式】选择外斜面,【方法】为平滑,【深度】为200%,【方向】为下,【大小】为7像素,【角度】为129度,【不透明度】为75%。如图12-3-46所示。

PS网页设计中制作Web水晶按钮(3)插图(15)
 

图12-3-46

13.下面我们接着来设置【图层3】,【投影】选项中,【不透明度】为75%,【距离】为3像素,【扩展】及【大小】值都为0,如图12-3-47所示。

PS网页设计中制作Web水晶按钮(3)插图(16)
 

图12-3-47

【外发光】选项,颜色为白色,【大小】为5像素,设置【等高线】样式为半圆,【范围】为30%。如图12-3-48所示。

PS网页设计中制作Web水晶按钮(3)插图(17)
 

图12-3-48

那么【内发光】的参数和外发光基本一样,【等高线】样式改为内凹—浅,【范围】为24%,如图12-3-49所示。

PS网页设计中制作Web水晶按钮(3)插图(18)
 

图12-3-49

PS网页设计中制作Web水晶按钮(3)插图(19)

12.3.3Web水晶按钮

PS网页设计中制作Web水晶按钮(3)插图(20)PS网页设计中制作Web水晶按钮(3)插图(21)

图12-3-26

在浏览网页中我们经常会看到一些漂亮的水晶似的按钮,那么下面我们就通过使用ps的选区以及图层混合模式等工具制作这样一个web水晶按钮。

1.首先我们打开ps,新建一个500*500像素大小的图像,Ctrl+R打开标尺,做两条辅助线,如图12-3-27所示。

PS网页设计中制作Web水晶按钮(3)插图(22)

图12-3-27

2.然后选择椭圆选框工具,按住Shift+Alt键,从辅助线中心焦点进行绘制,如图12-3-28所示。然后选择渐变工具,设置渐变的颜色,然后进行填充,如图12-3-29所示。

PS网页设计中制作Web水晶按钮(3)插图(23)PS网页设计中制作Web水晶按钮(3)插图(24)

图12-3-28图12-3-29

3.接下来,我们将选择【选择】菜单,【修改】,选择【收缩】。弹出【收缩选区】对话框,如图12-3-30所示。

PS网页设计中制作Web水晶按钮(3)插图(25)

图12-3-30

4.单击【确定】,选区被收缩,我们新建一个图层再次选择渐变工具对其进行填充,效果如图12-3-31所示。我们再次新建一个图层,执行上面的操作。这里的收缩量我们设为10像素。颜色我们选择淡紫进行填充,效果如图12-3-32所示。

PS网页设计中制作Web水晶按钮(3)插图(26)PS网页设计中制作Web水晶按钮(3)插图(27)
图12-3-31图12-3-32

5.接着我们再次重复上面的步骤,如图12-3-33所示。下面我们开始制作按钮的高光部分,我们将选区移动,如图12-3-34所示。

PS网页设计中制作Web水晶按钮(3)插图(28) PS网页设计中制作Web水晶按钮(3)插图(29)

图12-3-33图12-3-34

6.我们Ctrl+L打开色阶,调整其色阶值,如图12-3-35所示。

PS网页设计中制作Web水晶按钮(3)插图(30)

图12-3-35

1.我们选择椭圆选区工具,新建一个图层,绘制一个小椭圆对其进行填充,颜色为白色,填充后,调整到合适的位置,作为按钮的高光点。如图12-3-36所示。高光点绘制完后,我们选择【钢笔】工具,新建一个图层,再次绘制高光形状,为图层3绘制高光,如图12-3-37所示。

PS网页设计中制作Web水晶按钮(3)插图(31)PS网页设计中制作Web水晶按钮(3)插图(32)
图12-3-36图12-3-37

 

PS网页设计中制作Web水晶按钮(3)插图(19)

12.3.3Web水晶按钮

PS网页设计中制作Web水晶按钮(3)插图(20)PS网页设计中制作Web水晶按钮(3)插图(21)

图12-3-26

在浏览网页中我们经常会看到一些漂亮的水晶似的按钮,那么下面我们就通过使用ps的选区以及图层混合模式等工具制作这样一个web水晶按钮。

1.首先我们打开ps,新建一个500*500像素大小的图像,Ctrl+R打开标尺,做两条辅助线,如图12-3-27所示。

PS网页设计中制作Web水晶按钮(3)插图(22)

图12-3-27

2.然后选择椭圆选框工具,按住Shift+Alt键,从辅助线中心焦点进行绘制,如图12-3-28所示。然后选择渐变工具,设置渐变的颜色,然后进行填充,如图12-3-29所示。

PS网页设计中制作Web水晶按钮(3)插图(23)PS网页设计中制作Web水晶按钮(3)插图(24)

图12-3-28图12-3-29

3.接下来,我们将选择【选择】菜单,【修改】,选择【收缩】。弹出【收缩选区】对话框,如图12-3-30所示。

PS网页设计中制作Web水晶按钮(3)插图(25)

图12-3-30

4.单击【确定】,选区被收缩,我们新建一个图层再次选择渐变工具对其进行填充,效果如图12-3-31所示。我们再次新建一个图层,执行上面的操作。这里的收缩量我们设为10像素。颜色我们选择淡紫进行填充,效果如图12-3-32所示。

PS网页设计中制作Web水晶按钮(3)插图(26)PS网页设计中制作Web水晶按钮(3)插图(27)
图12-3-31图12-3-32

5.接着我们再次重复上面的步骤,如图12-3-33所示。下面我们开始制作按钮的高光部分,我们将选区移动,如图12-3-34所示。

PS网页设计中制作Web水晶按钮(3)插图(28) PS网页设计中制作Web水晶按钮(3)插图(29)

图12-3-33图12-3-34

6.我们Ctrl+L打开色阶,调整其色阶值,如图12-3-35所示。

PS网页设计中制作Web水晶按钮(3)插图(30)

图12-3-35

1.我们选择椭圆选区工具,新建一个图层,绘制一个小椭圆对其进行填充,颜色为白色,填充后,调整到合适的位置,作为按钮的高光点。如图12-3-36所示。高光点绘制完后,我们选择【钢笔】工具,新建一个图层,再次绘制高光形状,为图层3绘制高光,如图12-3-37所示。

PS网页设计中制作Web水晶按钮(3)插图(31)PS网页设计中制作Web水晶按钮(3)插图(32)
图12-3-36图12-3-37

 

8.将路径转化为选区,选择颜色为灰色进行填充,模糊工具进行适当的模糊。如图12-3-38所示。我们继续使用【钢笔】工具,新建一个图层,来绘制按钮的反光面,绘制后将其转化为选区,如图12-3-39所示。

PS网页设计中制作Web水晶按钮(3)插图(7)PS网页设计中制作Web水晶按钮(3)插图(8)

图12-3-38图12-3-39

我们对这个选区进行白色和透明的渐变填充,填充效果如图12-3-40所示。

PS网页设计中制作Web水晶按钮(3)插图(9)

图12-3-40

9.现在我们打开图层混合模式,对每个图层一一调节,我们选择【图层一】,右键选择【混合模式】,选择【投影】,【不透明度】设为75,【距离】为12,【扩展】值为0,【大小】为13,如图12-3-41所示。

PS网页设计中制作Web水晶按钮(3)插图(10)
图12-3-41

然后选择【斜面和浮雕】选项,参数设置如图12-3-42所示。

PS网页设计中制作Web水晶按钮(3)插图(11)
 

图12-3-42

10.【图层一】设置好以后,我们再来设置【图层二】,打开【混合模式】对话框,设置参数,选择【投影】,【混合模式】为正常,【不透明度】为70%,【角度】为124度,【距离】为5,【扩展】为0,【大小】为7,如图12-3-43所示。

PS网页设计中制作Web水晶按钮(3)插图(12)
 

图12-3-43

11.再看【内阴影】选项,【混合模式】为正片叠加,【不透明度】为75%,【距离】5像素,【大小】为5像素。如图12-3-44所示。

PS网页设计中制作Web水晶按钮(3)插图(13)
 

图12-3-44

再往下选择【内发光】选项,将【不透明度】设为75%,颜色改为灰色,【阻塞】为27%,【大小】为13像素,【范围】为51%,其他使用默认。如图12-3-45所示。

PS网页设计中制作Web水晶按钮(3)插图(14)
 

图12-3-45

12.最后我们来设置图层的【斜面和浮雕】选项,【样式】选择外斜面,【方法】为平滑,【深度】为200%,【方向】为下,【大小】为7像素,【角度】为129度,【不透明度】为75%。如图12-3-46所示。

PS网页设计中制作Web水晶按钮(3)插图(15)
 

图12-3-46

13.下面我们接着来设置【图层3】,【投影】选项中,【不透明度】为75%,【距离】为3像素,【扩展】及【大小】值都为0,如图12-3-47所示。

PS网页设计中制作Web水晶按钮(3)插图(16)
 

图12-3-47

【外发光】选项,颜色为白色,【大小】为5像素,设置【等高线】样式为半圆,【范围】为30%。如图12-3-48所示。

PS网页设计中制作Web水晶按钮(3)插图(17)
 

图12-3-48

那么【内发光】的参数和外发光基本一样,【等高线】样式改为内凹—浅,【范围】为24%,如图12-3-49所示。

PS网页设计中制作Web水晶按钮(3)插图(18)
 

图12-3-49

【斜面和浮雕】的样式选择外斜面,【深度】为32%,【方向】为下,【大小】为7,【光泽等高线】样式修改为半圆,其他使用默认,如图12-3-50所示。

PS网页设计中制作Web水晶按钮(3)插图
 

图12-3-50

14.设置【图层4】的混合选项,我们还是先来设置【投影】。【不透明度】设置为10%,【距离】、【扩展】、【大小】分别为5、75、10。【等高线】样式为锥形—反转。如图12-3-51所示。

PS网页设计中制作Web水晶按钮(3)插图(1)
 

图12-3-51

【内阴影】的【不透明度】为45%,【距离】、【阻塞】、【大小】分别为20、0、30,其他选项使用默认,如图12-3-52所示。

PS网页设计中制作Web水晶按钮(3)插图(2)
 

图12-3-52

设置完我们点击【确定】。

15我们再选择【背景】层,然后点新建按钮,在背景的上放新建一个图层,填充颜色为灰色,如图12-3-53所示。

PS网页设计中制作Web水晶按钮(3)插图(3)
 

图12-3-53

16.然后在最顶部在建立一个图层,然后选择文字工具,输入一些文字。设置文字的字体,大小以及颜色等。如图12-3-54所示。

PS网页设计中制作Web水晶按钮(3)插图(4)
 

图12-3-54

17.右键图层选择【栅格化文字】选项,然后对其进行混合模式的调节,打开【图层样式】后,选择【外发光】,【不透明度】设置为75%,【扩展】为0,【大小】为20,【范围】30%,如图12-3-55所示

PS网页设计中制作Web水晶按钮(3)插图(5)
 

图12-3-55

18.完成后,我们点击【确定】。取消辅助线,这样,我们的Web水晶按钮就制作完成了,我们可以看下最终的效果。如图12-3-56所示。

PS网页设计中制作Web水晶按钮(3)插图(6)

图12-3-56

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部