photoshop教程|UI教程|一个信封图标

第四期

UI图标初期教程

一个漂亮信封图标

|photoshop教程|

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

【图形设计师  ID:tuxdesign】

先看看效果

有兴趣的小盆友可以

着手练习练习

毕竟光看是看不会的

你说捏

photoshop教程|UI教程|一个信封图标_第1张图片

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

photoshop教程|UI教程|一个信封图标_第2张图片

第二步:选择圆角矩形工具,画一个圆角矩形形状,命名为【信封】(如图)

photoshop教程|UI教程|一个信封图标_第3张图片

第三步:选择矩形工具或是钢笔工具,画一个矩形形状,命名为【红】填充红色,再Ctrl+J复制一个,命名为【蓝】填充蓝色(如图)

photoshop教程|UI教程|一个信封图标_第4张图片

多次复制,排列好

photoshop教程|UI教程|一个信封图标_第5张图片

全选红蓝条,转换为智能对象,建立剪切蒙版,把在信封外面多余的剪掉

photoshop教程|UI教程|一个信封图标_第6张图片

第四步:选择【信封】图层,Ctrl+J复制一个,命名为【白色覆盖】,移到最上面,并缩小一些(如图)

photoshop教程|UI教程|一个信封图标_第7张图片

第五步:选择【信封】图层,添加图层样式,内发光(如图)

photoshop教程|UI教程|一个信封图标_第8张图片
photoshop教程|UI教程|一个信封图标_第9张图片

第六步:选择钢笔工具,建立三个灰色三角形状,分别命名为【左】【右】【下】,把三个三角形状在【白色覆盖】图层上建立剪切蒙版(如图)

photoshop教程|UI教程|一个信封图标_第10张图片

第七步:选择圆角矩形工具,画一个圆角矩形,命名为【上】调整它的圆角数值,旋转45度(如图)

photoshop教程|UI教程|一个信封图标_第11张图片

减去多余部份,我是用钢笔工具,添加描点,再删除减去的,你也可以画一个矩形,利用布尔运算减去

photoshop教程|UI教程|一个信封图标_第12张图片

选择【上】图层,Ctrl+J复制一个,命名为【上1】,移到最上面,并缩小一些填充灰色(如图)

photoshop教程|UI教程|一个信封图标_第13张图片

第八步:分别给【左】【右】【上】图层,添加投影(如图)

photoshop教程|UI教程|一个信封图标_第14张图片
photoshop教程|UI教程|一个信封图标_第15张图片
photoshop教程|UI教程|一个信封图标_第16张图片
photoshop教程|UI教程|一个信封图标_第17张图片

第九步:邮戳制作(如图)

选择椭圆形工具,填充设置为无,描边设置为3,设置颜色,画一个只有描边的圆形

photoshop教程|UI教程|一个信封图标_第18张图片

选择文字工具,添加文字,添加图形

photoshop教程|UI教程|一个信封图标_第19张图片

第十步:细节调整,把邮戳做旧,添加一点光感(如图)

photoshop教程|UI教程|一个信封图标_第20张图片

<完>

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

如果有兴趣的朋友,

可以练习一下

有不明白的地方

可以下载PSD原文件参考

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

一起学习、一起探讨

教程参考原文件下载获取方式

可关注公众号:(图形设计师)微信内回复【UI05】

即可获得下载地址

更多教程请查看

photoshop教程|UI教程|一个信封图标_第21张图片
photoshop教程|UI教程|一个信封图标_第22张图片
photoshop教程|UI教程|一个信封图标_第23张图片

你可能感兴趣的:(photoshop教程|UI教程|一个信封图标)