当前位置:首页>ps实例教程>ps网页设计>按钮图标>教程内容

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

来源:薛欣博客 作者:薛欣姚辉 学习:624人次

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

12.3.3Web水晶按钮

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

图12-3-26

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

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

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

图12-3-27

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

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

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

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

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

图12-3-30

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

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

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

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

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

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

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

图12-3-35

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

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

 

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!