小课堂第二弹!使用ILLUSTRATOR做UI设计系列教程

2014/02/13 16938

@张泊宁研究所 :在上一课《使用 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
作者:@张泊宁研究所

【优设网 原创文章 投稿邮箱:2650232288@qq.com】
 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量63万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/illustrator-ui-design-2

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里