使用 Adobe Illustrator 做 UI设计——切图、导出的秘诀
使用 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 相同的效果:

  • @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 这样的神器,不过也不算太难用了,依然可以说很容易集成到工作流程里,增加工作效率。

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

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

本文链接:http://www.mobileui.cn/illustrator-ui-design-tutorial-2.html
本文标签: , , , ,