• 注册
  • 基础教程 基础教程 关注:7 内容:1144

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

  • 查看作者
  • 打赏作者
  • 手把手教你,用PS创建一个质感十足的保密柜ICON插图

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

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

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

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

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

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

    点击这里下载PSD

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    19. 我们可以看下对比。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    请登录之后再进行评论

    登录
    • 大版主
    • 小版主
  • 官方助手
  • 我爱ps
  • 任务中心
  • 帖子间隔 侧栏位置: