JJ.Ying´s GUI World Professional Skin & Icon Design

With love for details - 爱上细节，暂且这么翻吧，呵呵。其实Iconka的图标里的细节何止细节这么简单二字啊，呵呵。

之前写过一篇关于WB主题TGA透明图片的处理，但是介绍得不详细，还是经常有很多朋友问起类似问题如何处理。所以现在再来介绍一下我自己一般的处理方法。

这里所指的透明图片指的是带Alpha通道的，可以实现半透明效果的图片，主要是PNG以及TGA格式的图片，相较于传统程序中用掩码色（常常就是那种#FF00FF的粉紫色），TGA和PNG图片中每个象素都多了一个8位的Alpha通道以实现精细的透明效果。

在主题/皮肤中，用传统掩码色之后在一些边缘处，比如圆角标题栏就没法做到圆滑，总是有锯齿。应用了Alpha通道之后这些问题都能得到解决，并且半透明效果如果能实现，那还能直接加上比较完美的阴影，所以大量的程序都已经开始支持PNG贴图来改善外观。

WB皮肤也很早就开始支持Alpha通道，但这里的问题是Stardock在WB主题中用的不是常见的PNG格式，而是TGA。
虽然前面已经提到PNG和TGA对我们来说是一回事，但是Photoshop在打开这两类图片时有明显的不同。

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


路径＋图层样式的特点：

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

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

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

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

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

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