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

福特少普ps

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

路径＋图层样式的特点：

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

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

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

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

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

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



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



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



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



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




因为是要做的是一个光盘驱动器，所以增加了一张半藏的光盘。光盘也是用路径做了3个同心圆，一个用来作为中间不全反射的白色部分，另两层则使用径向的渐变效果来模拟光盘的样子，一层的叠加控制灰度，另外一层控制颜色。为了和整个图标的风格相符合，渐变用得还是比较柔和的颜色。最后在驱动器的正面加上光盘插孔，因为细节不多，只需要用灰色画个很窄的椭圆即可。



图标大体完工。结束时在驱动器边缘的地方新建图层加入一些渐变效果来增强高光，并且加入了DVD的标志来表现这是个DVD光盘驱动器。

这样图标在48x48分辨率下就完工了，然后我们可以直接对源文件进行缩放来制作32x32的版本：



一般不建议同时缩放图层效果，因为对于描边等一般都精确到象素的效果来说在各个分辨率下保持一致有助于控制统一性，所以我们需要手工调整一下效果，比如缩小光泽和内发光等的尺寸。调整之后得到的图象有些图层会产生错位，稍微调整一下位置即可得到比较理想的效果。



接下来就是一般最令人头痛的16x16图标。很多时候在这样的分辨率下即使只是1px的边缘模糊成2个象素也足以使图标的整体效果变样。所以我觉得这样的小图标主要是修改其边缘。用路径和图层样式的好处在这里十分明显。先把32x32大小的文件调整成16x16：




我首先去掉了dvd标志的图层，因为在这种尺寸下，肯定怎么都看不清了。由于路径描点精确到亚象素（暂时这么叫吧，呵呵），所以经过缩放之后常常看到路径的边缘不在整数的象素坐标上，这样的结果就让本来大小为1象素的效果如描边等被需化了。经过简单的调整把描点重新移动到画面中象素的边缘即可保证图标的清晰。将所有移位的描点都处理过之后16象素的图标也完成了，当然，虽然16象素与32等图标大小只差一倍，但因为包含象素少，所以很多部位必须进行取舍以在保证图标元素不丢失的同时仍然突出细节。比如在这里，因为驱动器前面板只剩3象素高，所以光盘插入孔也没必要继续存在，只需在光盘和面板接触的面板之间淡淡的加上一个深色的图层略微做一下区分。另外，16象素下的路径往往在经过我们的调整后变化较大，常会改变原来的透视，所以需要我们不断调试取得比较好的效果保证不失真。



以上只是个人在以往积累的一丁点经验，所谓闭门造车，难免有很多不足，只希望能抛砖引玉，大家一起交流心得，共同提高:D