当前位置：首页>ps实例教程>ps网页设计>UI设计教程>教程内容

开关图标，设计一个调节开关图标

来源：PdadianS 作者：P大点S 学习：25935人次

今天给大家带来的是一个调节开关主题图标，制作方法也是跟以往的差不多，主要是用路径描绘形状，然后用图层样式制作质感，想学的跟着教程一起动动手吧。

教程源文件：http://www.16xx8.com/photoshop/sucai/2016/h280529.html

我们的最终效果：

 

开关图标，设计一个调节开关图标_www.16xx8.com
<点图片看大图>www.16xx8.com

 

新建一个渐变调整层，做一个45度的从 #a1a5ae 到 #eef2f3 的线性渐变。

 

开关图标，设计一个调节开关图标_www.16xx8.com
<点图片看大图>

 

光是渐变背景，感觉差了点什么，添加点质感吧。复制一层渐变图层，转智能对象，添加一个杂色。

 

开关图标，设计一个调节开关图标_www.16xx8.com
<点图片看大图>

 

执行“滤镜—风格化—浮雕效果”，添加一个浮雕效果。

 

开关图标，设计一个调节开关图标_www.16xx8.com
<点图片看大图>

 

将这个图层的图层混合模式更改为“叠加”，我们的背景就完成了。

 

开关图标，设计一个调节开关图标_www.16xx8.com
<点图片看大图>

共4页:上一页1234下一页 在本页浏览全教程

学习 · 提示

  • 一定要打开PS，跟着教程做一遍，做完的图到这交作业：提交作业
  • 建议练习时，大家自己找素材，尽量不要用教程提供的素材。
  • 教程有看不懂的地方，可以到论坛发帖提问：新手求助
  • 加官方微信，随时随地，想学就能学：ps_bbs，或扫右侧二维码！
  • 关注我们学更多，每天都有新教程：新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
杰尼安2017-07-30 01:56
作业！！！我的作业：
 回复
荆州才子2017-04-05 05:42
交作业
 回复
荆州才子2017-04-05 05:04
交作业
 回复
photoshop2017-01-20 02:36
这个做的好呀
 回复
photoshop2017-01-20 02:01
我要成为高级UI设计师！！！鑲栫惔 的原帖：这个做的好呀
 回复
肖琴2017-01-19 04:51
我的那个点原来做的太小了
 回复
肖琴2017-01-19 04:50
我要成为高级UI设计师！！！
 回复
肖琴2017-01-19 03:42
图片是怎么上传上去的呢
 回复
肖琴2017-01-19 04:01
我要成为高级UI设计师！！！鑲栫惔 的原帖：我的那个点原来做的太小了
 回复
肖琴2017-01-19 04:01
我要成为高级UI设计师！！！
 回复
肖琴2017-01-19 03:01
图片是怎么上传上去的呢
 回复
何夜秋来2016-10-23 05:14
不错不错，我是小白，啥都不会，第一次做这个
 回复
何夜秋来2016-10-23 04:16
选择一个按钮选区，复制图层，填充为黑色，取消选区，在点新的这个选区，然后动感模糊，在弄一个蒙版，把右上方的用选区填充为黑色，然后调节投影的透明度就好啦
 回复
何夜秋来2016-10-23 05:10
不错不错，我是小白，啥都不会，第一次做这个
 回复
何夜秋来2016-10-23 04:10
请问一下~~那个~长投影是怎么做出来的啊？？？我不会用蒙版做 鍏斿瓙 的原帖：选择一个按钮选区，复制图层，填充为黑色，取消选区，在点新的这个选区，然后动感模糊，在弄一个蒙版，把右上方的用选区填充为黑色，然后调节投影的透明度就好啦
 回复
查看全部评论 >

关注大神微博加入>>

网友求助，请回答！