今日热点一起做图标——唱片图标(附PSD)

ssgsdh

一枚金属外框的唱片图标~如下图~下载地址：:18ND视觉设计的相关资讯可以到我们网站了解一下，从专业角度出发为您解答相关问题，给您优质的服务！

                               
登录/注册后可看大图

这系列做点拟物图标，但都是中规中矩，很快出效果的图标。不会画特别难，超写实的图标，超写实图标对提升个人技术很有帮助，但真的太耗费时间了。

跟着做可以锻炼到中常用的PS基本功和图层样式，熟悉之后举一反三吧~

不会每一步都有操作演示，我只说要注意的地方以及上传源文件，更多的需要靠自己去想了。



进步最快的方式是临摹，但要会正确的临摹方式~

临摹三部曲：

①先自己做，用自己的方式实现看得到的效果；

②锻炼眼睛，揣摩出隐藏的效果；（这点比较困难，但是非常锻炼水平）

③无计可施再看源文件，同时想有没有比原作者更简便的实现方法。(任何一个原作者都不是神，也会有使用比较蠢的方式的时候)

这是LZ最开始使用的进步方式最快也是最锻炼水平的方法~



画图标的大致流程：

草图勾画→PS搭型→效果光影质感添加→后期调整→完稿



一、草图勾画：

草图阶段可以大致在纸上用笔画画，勾勒出大概的造型就可以了，因为我们不是做游戏UI图标，大部分靠PS的矢量工具+图层样式就可以完成了，而且我的习惯是直接用PS搭造型，草图阶段比较适用于想法不太明确，仅有模糊印象的人。

这一阶段可以帮助你提升自己的手绘水平，建议如果手上功夫差的人在这一阶段可以仔细斟酌一下。



二、PS搭型：

这一阶段你需要用PS把造型搭建出来，摒弃一切效果阴影，仅仅用灰度等级区分造型~





你用得到的工具，同时也是做UI设计常用的工具：



做游戏UI常用的是画笔工具组，但是我们做APP或者页的UI设计，使用最多的就是矢量工具组。

无论你是做界面，做图标，做按钮，我建议通通使用矢量图形，这对于后期修改很方便。



另外在这一阶段，也就是任何项目建立之初，你要学会整理图层以及打包归类：



应该注意的地方：

你会发现和指针和原图位置不同，这是有原因的，

一般我们做有角度的控件的时候，包括上图倾斜的指针杆，会在造型的时候选择统一的方向，设置完所有效果之后，将其整个“转换为智能对象”进行旋转，这样可以保证图层样式中设置的角度跟随对象转变。

不明白我们下面会看到是什么意思~



造型阶段就不一一演示操作步骤了，我觉得既然基本的造型都可以做到~本阶段需要的就是对图层的整理和使用矢量工具造型的能力~



三、效果光影质感添加

所有的光影，我们在制作时就要确定角度，这里统统设置为垂直光的90度。



需要把全局光选择勾选掉，否则会影响到所有的编辑对象。



质感的实现：

推荐使用纹理贴图，你会发现目前大部分图标有木质纹理，金属纹理等各种材质的质感表现，如果用PS去画，虽然能画出来，但是真的很费时费力，LZ以前做3D渲染的时候喜欢用贴图，现在用PS画更喜欢用贴图。这不是偷懒，这是采用有效率的方式。



使用纹理贴图需要注意的是，我们在上找到一张有色纹理贴图的时候，记得要对其进行“去色”处理，仅使用黑白灰模式下的贴图，图层样式为“叠加”，这样可以保证纹理，又不会掩盖到图标本身的色彩。



回到我们本次做的图标~

首先是渐变，我不推荐使用图层样式的渐变叠加，推荐使用矢量图形自身的渐变，因为这样进行剪贴蒙板的时候，会掩盖掉贴图的纹理以及一些其他图层效果~



这里实际操作步骤我不说了，来说说需要注意的地方……



边框大概就是这么个意思，基本上琢磨琢磨很容易就可以做到这一步，下面说说胶片……

胶片上面有螺纹，有反光。



螺纹的实现方式：

胶片本身的渐变使用的是“角度渐变”，这个可以做为胶片本身反光的渐变，

在此基础上，把胶片复制一层，新复制的这一层就是做完螺纹的，将其剪贴进原胶片图层，把渐变模式改为“径向渐变“，之后进入渐变编辑框

渐变类型→杂色

粗糙度→70%（这个以实际效果为准）

勾选上右侧两个选项

RGB的滑块都划到最右端



点击随机化，找到自己合适的螺纹粗细(因为是随机化，可能需要不断的点击出现合适的螺纹)

这是螺纹的实现方式之一，基本上螺纹都可以靠这种方式实现……



指针杆的效果：

因为是金属，所以渐变对比会比较强烈~渐变自己调，没必要一模一样。

这里说一下，前面提到的”转换为智能对象“，因为我们的图标，光源选定的是统一角度，图层样式里面都是90度。如果不转化为智能对象

会出现下面这种情况~



图一是我们编辑完的，图二是未转换为智能对象时旋转的效果，图三是转换为智能对象选择的效果。

可以看到，如果不转换为智能对象，角度是不会跟随对象旋转的，这一点以后在做有选择角度的控件时，可以记住。



四、后期调整

一般我们做完一枚图标，还需要从各方面进行调整，包括饱和度，色彩平衡，曲线这些方面，这枚图标我提升了一下饱和度~





五、完稿

一枚图标大致就这么诞生了，其实如果想细化下去，可以一直细化下去，包括光影纹理质感，看你想做到什么程度了……



你可能发现我说的看起来很笼统，因为总监跟我说：你听别人说一千遍，也不如自己琢磨动手一遍，所以我希望你们可以和我一起琢磨，而不是我把每一步都明明白白的写出来……

授人以鱼不如授之于渔嘛~源文件已经上传了，看不懂就看看源文件吧，我已经整理好每个图层了~祝你们好运喽！