photoshop教程|UI教程|一粒胶囊

​第二期

UI图标初期教程

一粒胶囊小图标

|photoshop教程|

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

【图形设计师  ID:tuxdesign】

先看看效果

有兴趣的小盆友可以

着手练习练习

毕竟光看是看不会的

photoshop教程|UI教程|一粒胶囊_第1张图片

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

photoshop教程|UI教程|一粒胶囊_第2张图片

第二步:选择圆角矩形工具,绘一个矩形形状,命名为【胶囊1】调整它的圆角弧度(如图)

photoshop教程|UI教程|一粒胶囊_第3张图片
photoshop教程|UI教程|一粒胶囊_第4张图片

第三步:选择【胶囊1】形状,旋转一个角度(如图)

photoshop教程|UI教程|一粒胶囊_第5张图片

第四步:选择【胶囊1】图层,填充设置为0,添加图层样式(如图)

photoshop教程|UI教程|一粒胶囊_第6张图片
photoshop教程|UI教程|一粒胶囊_第7张图片
photoshop教程|UI教程|一粒胶囊_第8张图片
photoshop教程|UI教程|一粒胶囊_第9张图片
photoshop教程|UI教程|一粒胶囊_第10张图片

第五步:这里,我们做它的反光(如图)

利用胶囊形状,切出图中的两个形状,怎么切,我这里就不多说了,不会可以看一下 PS教程|了解与掌握布尔运算

photoshop教程|UI教程|一粒胶囊_第11张图片

修改羽化值

photoshop教程|UI教程|一粒胶囊_第12张图片

调整图层模式为叠加

photoshop教程|UI教程|一粒胶囊_第13张图片

设置它的羽化值,并调整图层模式为柔光

photoshop教程|UI教程|一粒胶囊_第14张图片
photoshop教程|UI教程|一粒胶囊_第15张图片

第六步:添加高光(如图)

钢笔工具描出如图形状,填充白色,放在合适位置

photoshop教程|UI教程|一粒胶囊_第16张图片

设置它的不透明度为70,填充为50

photoshop教程|UI教程|一粒胶囊_第17张图片

添加图层样式—内发光

photoshop教程|UI教程|一粒胶囊_第18张图片
photoshop教程|UI教程|一粒胶囊_第19张图片

利用多个图层建立高光

photoshop教程|UI教程|一粒胶囊_第20张图片

第七步:到这里,我们的外观就做好了,现在我们在里面加点内容,显得更好看些(如图)

先加点水上去,【胶囊1】图层下面用椭圆形工具画一个椭圆形状

photoshop教程|UI教程|一粒胶囊_第21张图片

填充设置为0,添加图层样式—内发光

photoshop教程|UI教程|一粒胶囊_第22张图片
photoshop教程|UI教程|一粒胶囊_第23张图片

第八步:我们再在水面上浮上一颗小红心,当然,也可以是其它,随你喜欢(如图)

小心心的制作是一样的,我这里就偷懒,不截图啦

photoshop教程|UI教程|一粒胶囊_第24张图片

第九步:添加一些小泡泡(如图)

photoshop教程|UI教程|一粒胶囊_第25张图片
photoshop教程|UI教程|一粒胶囊_第26张图片

<完>

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

如果有兴趣的朋友,

可以练习一下

有不明白的地方

可以下载PSD原文件参考

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

一起学习、一起探讨

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

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

即可获得下载地址

更多教程请查看

photoshop教程|UI教程|一粒胶囊_第27张图片
photoshop教程|UI教程|一粒胶囊_第28张图片
photoshop教程|UI教程|一粒胶囊_第29张图片

你可能感兴趣的:(photoshop教程|UI教程|一粒胶囊)