使用 Adobe Illustrator 做 UI设计——切图、导出的秘诀

在上一课《使用 Adobe Illustrator 做 UI设计——多重填充与多重描边》里，我们学习了如何使用 Adobe Illustrator 的多重填充和多重描边功能制作一个简单的界面。这个界面背景是浅灰色，上面有一个绿色的按钮：

现在，这个界面设计好了，问题出来了，如何导出成 iOS 或 Web 前端工程师可以用的界面？一般来说，切图是设计师最痛恨的工作流程环节，因为只是按部就班的工作，而且麻烦繁琐，始终要小心谨慎地去做。不过，由于 AI 是基于矢量对象进行创作的，切图这个环节不算太麻烦。

在这一节教程里，就说说 AI 基于矢量对象强大的切图、导出功能。

1. 导出界面设计图

如果要是想导出整个界面设计图的话，那很好说。AI 有两个关于导出的命令，一个就叫「导出」，另一个叫「存储为 Web 所用格式」。在这里要使用后者。因为只有「存储为 Web 所用格式」才能保证导出的文件是像素精确的。在执行这个命令之前，确保设计图上所希望显示的东西都没有被隐藏掉。然后执行命令，格式选择 PNG，点击「存储」按钮就可以导出整个设计图了。

一般来说，做 UI 设计导出成品，格式除了 PNG 以外基本没有其他的选择。BMP 太大了，微软自己都基本不用了。用 JPG 图片的锐边、线条等部分（学名称之为图像的高频分量）会因为有损压缩而须掉。只有 PNG 在保证文件大小不会太大的同时，仍然为无损格式，这一点对 pixel-perfect 要求较高的 UI 设计是至关重要的。并且 PNG 还有一个好处：PNG 支持半透明。所以说，如果没有特殊要求的话，导出应一律为 PNG 格式。为 iOS 做设计的话，UI 资源，包括切图、主屏幕图标、启动画面等等应全部使用 PNG 格式。

导出后查看图像，可以看到图像的大小就是我们预定的 320×480 像素大小，且按钮做到了像素精确，边缘没有糊掉：

～～～

2. 导出每一个 UI 元素

在正式聊这个话题之前，为方便说明，我们再放上去一个按钮。选中按钮，复制一下，新建一个新图层，把这个按钮粘贴到新图层里去。再根据上一节课所学的办法，把按钮的底色改成灰色。改好后差不多应该是这个样子：

现在的任务是，分别导出两个按钮的切图，供前端工程师使用。

对此，有四种方法可以做到。第一种方法不必动用切图工具。这样做：首先，隐藏掉欲导出按钮之外其他的任何图层或矢量对象，确保画板上只有欲导出按钮是可见的。然后，依然使用「存储为 Web 所用格式」，但是在弹出的选项对话框里，去掉「剪切到画板」这个勾选。可以看到，「奇迹发生了」，AI 自动把导出文件的尺寸设置为了按钮大小，一点不多也一点不少：

点击「存储」导出，查看之，可以看到导出的大小确实就是我们想要的，圆角边缘是半透明的，凹陷什么的也在，并且是像素精确的：

导出灰色的按钮也同理，隐藏掉除灰色按钮之外的所有东西，然后使用「存储为 Web 所用格式」命令就可以了，这里就不再多写了。

不过，显而易见的是，这种方法有一个缺点。如果要是做一个类似登录界面那样比较简单的界面还好，但如果要是做一个复杂的界面，那么要一直反复隐藏显示图层、对象什么的，特别麻烦。因此，祭出方法二，也是 AI 切图导出的终极大招。

方法二和方法三、方法四要动用 AI 的切片工具。不过方法二所使用的切片方法轻松加愉快：

首先，还是要把背景隐藏掉，因为要确保背景是透明的。然后，选中一个按钮，执行菜单命令：「对象」-›「切片」-›「用所选对象切片」。这个按钮就被切好了：

可以看到，我们根本没有做拉线、画框、对齐这些繁琐的步骤，仅仅花不到十秒，点击几下鼠标，AI 就基于按钮的外观自动为我们切好了。这种方法特别适合于每个 UI 元素没有堆叠这样的情形。对于灰色的按钮同理，再点击几下鼠标，又切好了一个：

导出时，依然要使用「存储为 Web 所用格式」这个命令，然后按 Shift 选中两个按钮切片，导出选项选择「选中的切片」，如图：

这样，就可以干干净净地导出所有图稿中的 UI 切片了：

可以看到，这种方法导出效率极高。不过，如果要是矢量对象很多的话，可能每次要点击几下还是有些繁琐。

其实，还可以有更偷懒的办法。有人会想，直接用快捷键不就省掉几下点鼠标了吗？可惜的是，AI 并没有给这个极其实用的命令分配一个快捷键。但我们可以让它有快捷键。方法是使用 AI 的动作功能，把这个命令单独保存为一个动作，以后每次只要按下快捷键即可执行了，进一步增加工作效率，减少痛苦：

如何创建和使用动作呢？这个，留作家庭作业吧。提示，请参看 AI 的官方帮助文档：Illustrator Help

方法三比较类似，按画板上的参考线来生成切片。这个和方法二比较类似，且不是很常用，先不介绍了。方法四就是手工拽线、画框、对齐，就像传统的切图方式那样。有了前面这三种方法，这种方法几乎很少用到了，因此也不介绍了。

3. 适配 Retina 屏幕

做 iOS UI 设计的人都知道，一般来说，要为 UI 准备两套切图资源。一套为普通分辨率的，适配于 iPhone 3GS，iPad 2 等老机子。另一套是 Retina 版，即切图大小长宽分别为原来两倍，使在同样面积下的 UI 元素显示更加精致，适配于 iPhone 4、iPad 3 等较新的机器。在 AI 里，如果为 Retina 屏幕做适配的话，也挺简单的。导出时缩放设置为 200% 即可：

4. 导出为 SVG 格式文件

SVG 格式不同于 PNG 和 JPG 等格式。SVG 是基于 XML 的矢量图形。优势是可以随意缩放。因此，比较适合以此做 Retina Web 适配。AI 自然可以导出基于 SVG 的矢量格式。不过，我没有找到比较简单的切图方法。所以，最好是将设计稿的每个图形元素分别复制到新的文稿里保存。保存时，把按钮移动到左上角，然后选择「保存」/「另存为」/「存储副本」，格式选择 SVG 或 SVGZ （SVG 的压缩版），即可。

5. iOS 切图导出须知

就像上文说的，iOS 要做 Retina 屏幕适配。因此，要准备两套切图：普通版和 Retina 版。命名规则是： Retina 版的切图名称为「普通版名称@2x.png」 这样的格式。例如，一个普通版的切图文件名字叫 greenButton.png，那么，Retina 版的切图名称应为 greenButton@2x.png。iOS 工程师拿到切图后，会直接用 “greenButton.png” 这个文件名来用，iOS 的 CocoaTouch UIKit 框架会聪明地根据不同的屏幕选择相应的文件。如果在 OS X 上做设计，可以用 Automator 来自动为切图文件名加上 “@2x” 后缀，如图：

在 Windows 下，把这段代码存为一个 .bat 格式文件，每次切完图后，复制一份放到 Retina 切图目录里执行一次，可达到同 OS X 的 Automator 相同的效果：

另外，为减少 App 尺寸，做类似按钮、文本框等切图图片时，建议将切图按这样的方式缩放（不太好说明，直接上图）：

iOS 工程师拿到这样的图后，会使用类似

这样的代码，按某一个像素线拉伸，或按设定边帽拉伸，将这张图拉伸到原先的宽度，而保留圆角不变。

使用 AI 很容易完成缩放按钮宽度而保持圆角半径不变（见上一篇文章）。最终缩放的宽度应为「圆角尺寸 x 2 +1」像素，要额外留出 1 px 的宽度是为拉伸考虑。

由此可见，虽然说 AI 自带的切图工具还是赶不上类似 Slicy 这样的神器，不过也不算太难用了，依然可以说很容易集成到工作流程里，增加工作效率。

下课了，希望大家学习愉快。

原文地址：zhangboning.me
作者：@张泊宁研究所