当前位置:首页 > PS教程 > 网页设计

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

  • 2022-12-24 23:45:43
  • 来源/作者:互联网/佚名
  • 己被围观

ps教程新春大礼包——18章巨献 作者:薛欣姚辉 12.3.3Web水晶按钮 图12-3-26 在浏览网页中我们经常会看到一些漂亮的水晶似的按钮,那么下面我们就通过使用ps的选区以及图层混合模式等工具制作这样一个web水晶按钮。 1.首先我们打开ps,新建一个500*500像素大小的图像,C

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

PS教程大礼包-第12章网页设计中的应用(四)PS教程大礼包-第12章网页设计中的应用(四)

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

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

PS教程大礼包-第12章网页设计中的应用(四)

图12-3-40

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

PS教程大礼包-第12章网页设计中的应用(四)
图12-3-41

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

PS教程大礼包-第12章网页设计中的应用(四)
 

图12-3-42

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

PS教程大礼包-第12章网页设计中的应用(四)
 

图12-3-43

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

PS教程大礼包-第12章网页设计中的应用(四)
 

图12-3-44

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

PS教程大礼包-第12章网页设计中的应用(四)
 

图12-3-45

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

PS教程大礼包-第12章网页设计中的应用(四)
 

图12-3-46

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

PS教程大礼包-第12章网页设计中的应用(四)
 

图12-3-47

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

PS教程大礼包-第12章网页设计中的应用(四)
 

图12-3-48

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

PS教程大礼包-第12章网页设计中的应用(四)
 

图12-3-49

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • APP展示图,教你怎么用PS制作APP的界面图片 APP展示图,教你怎么用PS制作APP的界面图片
  • 用ps制作大拇指胜利手势logo 用ps制作大拇指胜利手势logo
  • 用ps制作金属质感徽章 用ps制作金属质感徽章
  • 用ps制作绿色环保Logo 用ps制作绿色环保Logo
  • 用ps制作放大缩小logo 用ps制作放大缩小logo
  • ps cs6设计火箭UI图标 ps cs6设计火箭UI图标
  • 教你用PS打造网页效果图全过程 教你用PS打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条