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

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

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

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

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

 

 1/3    1 2 3 下一页 尾页

*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打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条