photoshop图层样式和路径绘制UI小图标

作者佚名　  出处:jjying
相信很多和我一样的设计爱好者和初学者都是通过photoshop这样的图形软件而熟悉设计的。虽然软件只是工具，创意还是完全来自我们的大脑，但是软件 使用技法很大程度上决定了我们作品的细节处理。今天想和大家交流的就是我在UI设计中的主要绘图方法：路径＋图层样式。希望能带给一些设计初学者一点启 发。

路径＋图层样式的特点：

方便修改
作为设计师，改无止境经常是挂在我们嘴边的。面对很多形状上需要做出的改变，用钢笔描出来的路径显然比象素化的图层更容易修改，所以对于一些复杂的外形，我在日常工作当中尽量保持原来的路径，不到必须的时候都不会象素化。而图层样式更是如此，PS内置的图层效果功能已经比较强大，通过他来定义的风格可以随意地用参数来确定效果，并且随意地修改。

便于大量套用
PS当中的路径一般都通过图层样式来定义视觉风格，这样带来的好处是只要做出一个图层样式，我们就能方便地复制、粘贴样式来把风格应用到很多其他元素上。当我们在界面中把使用同一样式的元素都链接之后更是能方便的粘贴图层就可全部刷新效果。

可部分地进行矢量操作
矢量是个非常优越的特性，虽然这是AI的拿手绝活，但是photoshop中的路径也已经基本够用，并且面对着大量旋转、缩放等操作时如果不使用路径，那操作都将变得不可逆。

控制精确
PS对象素的操作只能精确到1x1的单象素，而对于路径的描点，我们却可以把精确度提高到远小于1象素。对于UI这类非常讲求精确的设计来说是很有利的。

容易陷入思维定势
以上几点其实归结起来只是给我们的设计带来方便，或者说特别适合懒人。所以当路径＋样式成为主要制图方法的时候必须时常提醒自己不要局限于图层样式里的那些效果，毕竟好设计还是在于创意。

下面我想以一个实际的例子来和大家交流一下我的图标制作过程。





这是一枚风格比较简单的图标，造型上也并不复杂，又碰上需要处理多种分辨率的情况，所以非常适合使用路径＋图层样式的制作方法。





确定透视之后，把整体的形状用钢笔勾勒出来或者取PS形状工具中基本造型进行变形和组合。比如光盘的造型是从圆形变形而来，而驱动器两侧的面是用两个形状相减而来。







驱动器的前面板是个胶囊形，图层样式中使用了向上的1象素白色投影来作为驱动器上表面和前面板接缝处的高光；用1象素的外发光来作为描边；上深下浅的渐变给面板增加凹进去的感觉；用光泽来给面板两端加深颜色增加图标的细节；而渐变方式的内描边则来表现前面板的边缘高光。完成之后把前面板复制一下，合并到新的图层（也就是在新复制出的面板下面新建一个新的图层，然后将面板合并到此图层，这样就能保留图层效果，得到一个象素化的面板）。对此新建的面板进行垂直镜像，高斯模糊并且使用蒙板使其显得若有若无，成为图标中的倒影，而盘体两侧的倒影因为反射的是驱动器底部，所以无从复制，我们只能手工使用画笔来描绘。





驱动器的上表面用了3层来表现，底下的一层主要表现大致的光影和外部描边，上面一层区分开驱动器上表面的两个颜色。最后通过渐变叠加表现一下驱动器的两个侧面。