PS原创教程聚集地
我们一直在努力~

手把手教你,用PS创建一个质感十足的保密柜ICON

P大点S-会PS了不起吗

大家好,今天是一个ICON图标的制作过程,就我个人而言,扁平与拟物的ICON,我还是更喜欢拟物风格,虽然它们制作起来,可能会相对麻烦,但就是喜欢,无解阿!

这个图标,我不知道它是用来干什么的,但是我觉得用来当作保密柜之类的APP的ICON,还是不错的。

原始的图标是在 Behance 上面看到的,作者是来自美国的 UI/UX 设计师 Ramotion,我动手临摹了一下,没有添加原图标在图标上的纹理,质感略差,对光线的处理也有所差异。

 

点击这里下载PSD

 

01. 首先,我们创建了一个1000*800像素的文档。

02. 添加一个“渐变”调整层,设置颜色为#bcf4ff到#085682的渐变,样式为“径向”,角度“90度”,缩放“200%”,勾选“仿色”。

03. 创建一个“图案叠加”调整层,选择“砂纸”图案(PS自带的图案),设置图层混合模式为“叠加”,图层不透明度为“8%”,为背景添加一个微妙的纹理效果。

04. 下面,我们用圆角矩形工具画出图标的主体,颜色无所谓,我将填充修改为0,留着备用。

05. 复制一层这个圆角矩形主体,填充改回100%,设置颜色为#75c5d6,并将其置于一个图层组中,载入圆角矩形选区,为图层组添加一个图层蒙版,这个将作为我们图标的最底层。

由于这个是要作为最底层的,上面等会我们还会添加图层,当形状一致时,虽然尺寸大小一样,但不可避免会在边角位置出现一丁点的杂色,所以,我将这个圆角矩形左边的锚点向右移动了一点点。(这个也可以到最后调整,我的PSD做好了,所以就直接按调整好的下去截图)

06. 接下来,我为这个底添加图层样式,我添加了“斜面和浮雕”和“内发光”。

07. 下面,我复制一层底图层,右键清除图层样式,将填充修改为0,我再次添加了一个“内发光”。

08. 接下来,设置颜色为#38a6bd,我们画出如下的这个形状,请注意左边的位置也是比图标原始位置向右移动了一定位置。同时,我为它添加了一个“内阴影”,一个“投影”图层样式。

09. 复制一层这个图层,右键清除图层样式,将填充修改为0,我添加了一个“内发光”。

10. 再次复制一层,同样的右键清除图层样式,将填充修改为0,我添加了一个“投影”。

11. 下面,还是复制这个图层,往左移动,让其左边与原始图标贴合,我为其添加了“斜面和浮雕”,“内阴影”,“渐变叠加”,“投影”四个样式。

12. 下面,复制这个图层,清除图层样式,将填充修改为0,设置一个“斜面和浮雕”样式,同时,用图层蒙版,隐藏掉除底部要显示的区域。(注意在图层样式中的高级混合中,勾选“图层蒙版隐藏效果”)

13. 下面,再次复制一层,清除图层样式,将填充修改为0,设置一个“内阴影”和“外发光”样式,同时,用图层蒙版,隐藏掉除底部要显示的区域。(注意在图层样式中的高级混合中,勾选“图层蒙版隐藏效果”)

14. 再次复制一层,清除图层样式,将填充修改为0,设置一个“内阴影”样式,我们添加图标顶部的光。

15. 接下来,我们来完善图标的左边部分。设置前景色为#ebedec,画出下面这个形状,添加“斜面浮雕”,“渐变叠加”,“投影”三种样式。

16. 复制一层白色这个图层,右键清除图层样式,将填充修改为0,给它添加一个“渐变叠加”。

17. 接下来,我添加了一个LOGO,我们P大点S的LOGO,同时,我为它添加了“内阴影”,“渐变叠加”,“投影”三种样式。

18. 下面,我们来再次完善图标的光影,复制刚才中间部分的形状,将填充修改为0,添加一个“渐变叠加”,这个渐变叠加我们将让右上部稍暗一些,所以,我们利用图层蒙版,涂抹擦除不需要的区域。

19. 我们可以看下对比。

20. 接下来,同样的道理,复制右上这一层,修改渐变角度,将渐变位置放置到右下部。

21. 下面,继续复制一层,修改渐变角度,适当修改渐变颜色,将渐变位置放置到中间部位。

22. 接着,我们画一个高3像素的白色椭圆,拉长它,并在属性中,设置一个2像素的羽化,修改图层不透明度为87%,放置到图标顶部。

23. 复制一层这个光,放置在下面这个白色的位置。

24. 下面,我们到底图层组上层,中图层组下层,创建一个图层组,我们来添加纸张。纸张只是用#f3f3f3颜色的矩形,添加了一个投影,而直线的话,直线工具足矣,这里就不多说了。

25. 现在,我们为整个的ICON图层组,添加一个“投影”样式。

26. 下面,我们再将最初预留的那个图标主体形状,来变成阴影,强化阴影层次。将形状的填充修改为0,添加一个“投影”样式。

27. 我们的最终效果如下:

今天的这个图标,可能叙述的过程中,会有点绕,我感觉,可能会有很多朋友看不懂,ANY WAY,自己尝试一下,才会更明白,同时,跟以往一样,我们照旧提供了一个PSD文档,看不懂的朋友,可以看看PSD。

赞(1) 支持作者
转载请注明来自:P大点S » 手把手教你,用PS创建一个质感十足的保密柜ICON
分享到: 更多 (0)
P大点S官方公众号

感谢对P大点S的支持

支付宝扫一扫打赏

微信扫一扫打赏