photoshop教程|UI教程|萌萌的小熊

第十期

UI图标初期教程

萌萌的小熊

|photoshop教程|

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

【图形设计师  ID:tuxdesign】

先看看效果

有兴趣的小盆友可以

着手练习练习

毕竟光看是看不会的

你说捏

photoshop教程|UI教程|萌萌的小熊_第1张图片

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

photoshop教程|UI教程|萌萌的小熊_第2张图片

第二步:选择椭圆形形状工具,画出小熊的脑袋轮廓,命名的【脑袋】用直接选择工具调整它的轮廓,不要那么圆,填充颜色(如图)

photoshop教程|UI教程|萌萌的小熊_第3张图片
photoshop教程|UI教程|萌萌的小熊_第4张图片

第三步:选择钢笔工具,给它画两根头发,命名为【头发】(如图)

photoshop教程|UI教程|萌萌的小熊_第5张图片
photoshop教程|UI教程|萌萌的小熊_第6张图片

第四步:选择钢笔工具,给它画两只耳朵,命名为【左耳朵】填充颜色(如图)

选择【耳朵】图层,Ctrl+J复制一层,命名【左耳朵1】填充深色,缩小

photoshop教程|UI教程|萌萌的小熊_第7张图片
photoshop教程|UI教程|萌萌的小熊_第8张图片

在【脑袋】图层下面,选择钢笔工具用同样的方法,画出右耳朵,分别命名为【右耳朵】【右耳朵1】

photoshop教程|UI教程|萌萌的小熊_第9张图片
photoshop教程|UI教程|萌萌的小熊_第10张图片

第五步:选择椭圆形工具,给它画眉毛,命名为【左眉毛】填充颜色(如图)

photoshop教程|UI教程|萌萌的小熊_第11张图片

选择椭圆形工具,给它画眉毛,命名为【右眉毛】填充颜色(如图)

photoshop教程|UI教程|萌萌的小熊_第12张图片

左眼

photoshop教程|UI教程|萌萌的小熊_第13张图片

右眼

photoshop教程|UI教程|萌萌的小熊_第14张图片

大小眼,流汗.JPG,怎么这么丑,国宝大熊猫不会来打我吧,哈哈哈

第六步:选择钢笔工具,填充设置为无,描边设置为2px,画一黑一白两根拆线,黑线命名为【嘴】白线命名为【眼】(如图)

photoshop教程|UI教程|萌萌的小熊_第15张图片
photoshop教程|UI教程|萌萌的小熊_第16张图片
photoshop教程|UI教程|萌萌的小熊_第17张图片

第七步:选择钢笔工具,画出小熊的身体轮廓,命名为【身体】(如图)

photoshop教程|UI教程|萌萌的小熊_第18张图片

画尾巴

photoshop教程|UI教程|萌萌的小熊_第19张图片

两只小脚丫

photoshop教程|UI教程|萌萌的小熊_第20张图片
photoshop教程|UI教程|萌萌的小熊_第21张图片

第八步:选择钢笔工具,画出小熊的小手,命名为【手】(如图)

photoshop教程|UI教程|萌萌的小熊_第22张图片

再来一只,脸太丑,用手挡一下,笔芯.jpg

photoshop教程|UI教程|萌萌的小熊_第23张图片

我们可爱的小熊,大体轮廓,到这里就基本就完成了,倒杯水.jpg

第九步:小熊不太好看,我们现在给它美颜,

先给它的脸化个妆,选择【脑袋】图层,新建一个图层,命名为【高光】,建立剪切蒙版(如图)

photoshop教程|UI教程|萌萌的小熊_第24张图片

选择软笔刷在【高光】图层上,刷出高光,设置前景色为#f5f1e8,画笔可以稍微调大点,透明度调小点,轻轻刷(如图)

photoshop教程|UI教程|萌萌的小熊_第25张图片

不继调整笔刷大小,透明度,多次刷出层次来,如果觉得太过,可以合橡皮擦,擦掉,重新再刷,如此反复,直到自己觉得满意为止,小编这里就不多说了,小编最后的结果是这样的,不好,请大家见谅

photoshop教程|UI教程|萌萌的小熊_第26张图片

再给它的身体洗白白,选择【身体】图层,新建一个图层,命名为【高光】,建立剪切蒙版(如图)

photoshop教程|UI教程|萌萌的小熊_第27张图片

还是用笔刷来回的,轻轻的刷

photoshop教程|UI教程|萌萌的小熊_第28张图片

在手的下面添加投影

photoshop教程|UI教程|萌萌的小熊_第29张图片

最后,再调整一下细节,看那里不好看的,就稍微调整一下,最后加上投影

photoshop教程|UI教程|萌萌的小熊_第30张图片
photoshop教程|UI教程|萌萌的小熊_第31张图片
photoshop教程|UI教程|萌萌的小熊_第32张图片

<完>

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

如果有兴趣的朋友,

可以练习一下

有不明白的地方

可以下载PSD原文件参考

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

一起学习、一起探讨

更多教程请关注微信公众号查看

photoshop教程|UI教程|萌萌的小熊_第33张图片
photoshop教程|UI教程|萌萌的小熊_第34张图片
photoshop教程|UI教程|萌萌的小熊_第35张图片

你可能感兴趣的:(photoshop教程|UI教程|萌萌的小熊)