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 相同的效果：

@echo off

ren *.png *@2x.png

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

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

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

或

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

这样的代码，按某一个像素线拉伸，或按设定边帽拉伸，将这张图拉伸到原先的宽度，而保留圆角不变。使用 AI 很容易完成缩放按钮宽度而保持圆角半径不变(见上一篇文章)。最终缩放的宽度应为「圆角尺寸 x 2 +1」像素，要额外留出 1 px 的宽度是为拉伸考虑。由此可见，虽然说 AI 自带的切图工具还是赶不上类似 Slicy 这样的神器，不过也不算太难用了，依然可以说很容易集成到工作流程里，增加工作效率。

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