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