photoshop教程|UI教程|游戏手柄小图标

第十二期

UI图标初期教程

游戏手柄小图标

|photoshop教程|

(以下界面演示以Photoshop CC2017为演示工具)

【图形设计师  ID:tuxdesign】

先看看效果

有兴趣的小盆友可以

着手练习练习

毕竟光看是看不会的

你说捏

photoshop教程|UI教程|游戏手柄小图标_第1张图片

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

photoshop教程|UI教程|游戏手柄小图标_第2张图片

第二步:选择钢笔工具,画出形状,命名为【主体】(如图)

photoshop教程|UI教程|游戏手柄小图标_第3张图片

第三步:选择钢笔工具,选中【主体】图层,在描边上添加描点(如图)

photoshop教程|UI教程|游戏手柄小图标_第4张图片

选择直接选择工具,调整它的弧度(如图)

photoshop教程|UI教程|游戏手柄小图标_第5张图片

第四步:选中【主体】图层,Ctrl+J复制一层,变形-水平翻转,向右移动(如图)

photoshop教程|UI教程|游戏手柄小图标_第6张图片
photoshop教程|UI教程|游戏手柄小图标_第7张图片
photoshop教程|UI教程|游戏手柄小图标_第8张图片
photoshop教程|UI教程|游戏手柄小图标_第9张图片
photoshop教程|UI教程|游戏手柄小图标_第10张图片

选中两个【主体】图层,按Ctrrl+E合并图层

photoshop教程|UI教程|游戏手柄小图标_第11张图片

第五步:选中【主体】图层,添加图层样式(如图)

photoshop教程|UI教程|游戏手柄小图标_第12张图片
photoshop教程|UI教程|游戏手柄小图标_第13张图片
photoshop教程|UI教程|游戏手柄小图标_第14张图片
photoshop教程|UI教程|游戏手柄小图标_第15张图片

第五步:用钢笔工具画出形状,填充白色,命名为【高光】调整图层的不透明度(如图)

photoshop教程|UI教程|游戏手柄小图标_第16张图片
photoshop教程|UI教程|游戏手柄小图标_第17张图片
photoshop教程|UI教程|游戏手柄小图标_第18张图片

第六步:在【主体】图层上,新建空白图层,建立剪切蒙版,命名为【软化】(如图)

photoshop教程|UI教程|游戏手柄小图标_第19张图片

选择边缘羽化的笔刷,调整不透明度,设置前景色为白色,在【软化】图层上面处理生硬的边缘过度

photoshop教程|UI教程|游戏手柄小图标_第20张图片

第七步:选择圆角矩形工具,添加圆角矩形形状,命名为【方向】(如图)

photoshop教程|UI教程|游戏手柄小图标_第21张图片

Ctrl+J复制一层,旋转90度

photoshop教程|UI教程|游戏手柄小图标_第22张图片

选中两个【方向】图层,按Ctrrl+E合并图层

photoshop教程|UI教程|游戏手柄小图标_第23张图片

给【方向】图层添加图层样式

photoshop教程|UI教程|游戏手柄小图标_第24张图片
photoshop教程|UI教程|游戏手柄小图标_第25张图片
photoshop教程|UI教程|游戏手柄小图标_第26张图片
photoshop教程|UI教程|游戏手柄小图标_第27张图片
photoshop教程|UI教程|游戏手柄小图标_第28张图片
photoshop教程|UI教程|游戏手柄小图标_第29张图片

第八步:选择椭圆形工具,添加一个圆形形状,命名为【按钮底】(如图)

photoshop教程|UI教程|游戏手柄小图标_第30张图片
photoshop教程|UI教程|游戏手柄小图标_第31张图片
photoshop教程|UI教程|游戏手柄小图标_第32张图片
photoshop教程|UI教程|游戏手柄小图标_第33张图片

选择【按钮底】图层,Ctrl+j复制一个图层,缩小一点,命名为【按钮】,添加图层样式

photoshop教程|UI教程|游戏手柄小图标_第34张图片
photoshop教程|UI教程|游戏手柄小图标_第35张图片
photoshop教程|UI教程|游戏手柄小图标_第36张图片
photoshop教程|UI教程|游戏手柄小图标_第37张图片
photoshop教程|UI教程|游戏手柄小图标_第38张图片

同样的方法制作第二个按钮,修改颜色

photoshop教程|UI教程|游戏手柄小图标_第39张图片

添加文字

调整细节,添加投影

photoshop教程|UI教程|游戏手柄小图标_第40张图片
photoshop教程|UI教程|游戏手柄小图标_第41张图片

<完>

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

如果有兴趣的朋友,

可以练习一下

有不明白的地方

可以下载PSD原文件参考

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

一起学习、一起探讨

更多教程请查看

photoshop教程|UI教程|游戏手柄小图标_第42张图片
photoshop教程|UI教程|游戏手柄小图标_第43张图片
photoshop教程|UI教程|游戏手柄小图标_第44张图片

你可能感兴趣的:(photoshop教程|UI教程|游戏手柄小图标)