在设计群里，经常会有一些新手问做APP UI或是网页设计到底用Photoshop还是AI（Adobe illustrator）好？AI和PS的区别有那些？

其实这两款软件都是UI工作中会用到的，比如之前在中国移动，部门老大带头用AI来做手机界面设计，整个部门为了合作更顺畅所以都统一用AI 来设计。

但是大部分公司还是用ps的多。而现在用sketch的设计师也很多。软件各有所长，给大家的建议是，根据自己工作环境，以及具体要做的项目来选择使用，需要做很多图像效果的如banner，APP页内插图，后期处理，选ps那肯定是事半功倍。做矢量元素，剪影图标，排版用AI或轻量级的sketch会更方便。

并且扁平风格盛行的今天除了需要类似使用数位版手绘等那样的特殊场合」。是在 UI 设计、Web 设计领域，绝大多数已经并不需要结构和色彩非常复杂的图形例（例如那种很写实的图标，界面）。大多就是需要矩形、椭圆、圆角矩形这些很简单的几何形状。因此，在这一点上，PS 等图像处理软件相对于 AI 来讲，没有太多的优势。

今天用几分钟的时间给大家介绍下AI（Adobe illustrator）的使用技巧。

多重填充与多重描边

如果你用 PS 或 AI 比较多的话，可能会知道，计算机图形的最基本要素有两个：填充和描边。填充和描边可以是纯色，也可以是纹理，还可以是渐变。总之，一个形状确定了填充和描边后，这个图形的样式就确定下来了。

作为矢量图绘制软件，AI 也可以处理图形的填充和描边。不过，AI 有一个很强大的地方就是在 AI 里，一个图形是可以有好几个填充和好几个描边的。有些人可能不知道，但是也没有妨碍他们使用软件做图，但是这真的是一个相当实用且强大的功能。我们通过完成一个实例来看一下用多重描边来绘制一个按钮。

首先新建一个文档，文档的大小自定单位是像素，颜色模式选为 RGB，并确认「使新建对象与像素网格对齐」没有被勾选上。如图：

AI 在 CS5 开始，支持将对象对齐到像素网格，这一点在 UI 设计中非常重要。但是一开始新建项目，不建议大家勾选上，开始就勾选带来的麻烦远远多于方便

然后，开始画按钮了。所以，新建一个图层，命名为”Button”。再新建一个矩形。

再给按钮换一个底色，颜色色值自定义哈。接下来，要进入重头戏了。点击「外观」面板下的「添加新填色」按钮（即 “fx” 按钮左边的那个），再新建一个填色层，颜色为纯白到纯黑的渐变，方向是从上到下，透明度为 20%?30%?看实际效果吧，混合模式为「明度」。完成后画板和外观面板看起来应该类似这样：

可以看到，通过一个底色填色层，和一个明暗渐变填色层，我们成功地做出了色彩明暗渐变效果。这，就是多重填充的应用之一。另外再解释一下，混合模式选择「明度」的意思是，取下层对象的色相和饱和度，取上层对象的明度（亮度）作为最终颜色输出。因此，这样可以做出一个颜色只在明度上的渐变，而不会影响色相和饱和度。（又一个知识点哈）

给矩形的描边设置为一个像素，颜色为 #7F7F7F 描边。这样，按钮的基本描边就做出来了。描边选择“内侧对齐”

接下来，在AI中你还可以再新建一个描边，颜色设置为纯白，依然是内侧对齐，透明度为 50%。并在外观面板里，把这个描边置于灰色描边的下方，如图：

按钮看上去没有什么变化。不过接下来，就是见证奇迹的时刻了。给半透明白色描边加上一个「变换」效果，「移动」参数设置为 1 像素：

最后用多重填充多描边做的按钮

然后你可以给按钮改变颜色，只需要对第一次填充的颜色进行修改就可以啦

今天的多重填充与多重描边，大家都懂了吧，这个也算是基础的技巧了，如有疑问请给浩哥留言。