photoshop教程｜UI教程｜音量调节小图标

第十三期

UI图标初期教程

音量调节小图标

｜photoshop教程｜

（以下界面演示以Photoshop CC2017为演示工具）

【图形设计师  ID：tuxdesign】

先看看效果

有兴趣的小盆友可以

着手练习练习

毕竟光看是看不会的

你说捏

第一步：新建文件，给背景填充你喜欢的颜色(如图)

第二步：选择圆角矩形工具，画一个圆角矩形，命名为【底色】，调整圆角的大小(如图)

第三步：选择【底色】图层，Ctrl+J复制一层，命名为【表面】(如图)

第四步：选择圆角矩形，画一个小的圆角矩形形状，命名为【音量条】(如图)

Ctrl+J复制【音量条】图层3次，选择4个【音量条】图层，选择水平居中分布

Ctrl+E合并四个图层

第五步：选择【音量条】图层与【表面】图层，Ctrl+E合并图层(如图)

第六步：选择工具栏中的直接选择工具(如图)

分别选择【音量条】图层中的四个小圆角矩形中的形状，建立减去顶层形状

第七步：选择工具栏中的椭圆形工具，分别画四个圆形形状，命名为【1】【2】【3】【4】(如图)

第八步：添加图层样式

选择【1】图层

把【1】图层样式分别应用到【2】【3】【4】图层中

第九步：选择【音量条】图层添加图层样式

第十步：选择【底色】图层添加图层样式

<完>

好了，本次教程到这里就结束了，

如果有兴趣的朋友，

可以练习一下

有不明白的地方

可以下载PSD原文件参考

欢迎添加公众号【图形设计师】

一起学习、一起探讨

更多教程请查看