Illustrator教程:如何导出已经设计好的按钮

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

对于做设计而言,工具只是完成作品的手段。因此,其实对于做UI设计来说,到底是选择PS还是AI还是别的这样的问题并不重要的。只是对于我自己而言,做设计几乎全部是用AI来做的,所以这一系列教程大多数是关于AI的。

图片 1

我从2012年初开始尝试使用AI来完成一些设计与创作,一直至今。个人感觉,AI虽然有不少难用的地方,但是非常适合用于UI设计。甚至在很多方面,用AI来代替PS做设计更加高效、方便。主要原因是:

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

AI的强项在于对矢量图的处理。先哲有云:「如果希望在计算机里从无到有『生成』一张图像,通常矢量图创作软件更适合一些,除了需要类似使用数位版手绘等那样的特殊场合」。特别是在UI设计、Web设计领域,绝大多数时候并不需要结构和色彩非常复杂的图形。大多就是需要矩形、椭圆、圆角矩形这些很简单的几何形状。因此,在这一点上,PS等图像处理软件相对于AI来讲,没有太多的优势。

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

在AI里,可以较为方便地完成从排版布局、绘制图形、上色、切图导出这样的全部一套流程。意味着用AI做设计时,不必要中途换软件环境。例如很多设计师用PS做设计时要开着一个AI,先用AI画基本形,然后把AI里的图形作为智能对象复制到PS里,然后用PS继续创作。而用AI几乎就可以完全避免这样中途换软件的情况。

  1. 导出界面设计图

AI提供的一系列功能极其适用于排版布局。比如在PS里,参考线只是横着竖着的直线对吧;而在AI里,参考线可以是任何形状。参考线不是无限长?没问题!参考线是斜线?没问题!画个长方形甚至画个圈当参考线用?也没问题!

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

由于AI的创作主要是是基于矢量对象,所以在AI里,大多数操作都是可逆、可以在后期修改的。比如画一个按钮,可以很容易在后期调整按钮圆角的半径大小,同时保持按钮的图形样式不变。画一个六边形同样也可以加圆角,并在后期修改圆角大小。

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

AI里基于矢量对象的吸附、对齐功能相当好用,且在UI设计中相当常用。

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

由于AI有丰富的矢量效果(类似PS的滤镜和图层样式),因此AI退可做扁平,进可做拟物。下面这两张图就是用AI绘制的,完全没有用到除AI之外的其他软件:

图片 2

图片 3

~~~

图片 4

  1. 导出每一个 UI 元素

当然了,做扁平化设计AI就更不在话下了。

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

AI基于矢量对象的导出功能很好用,这一点将在后面的教程中讲到。并且AI可以将图稿导出为SVG格式的成品,很适合用在Web上。

图片 5

AI做出来的东西可以导出到任意大尺寸,而不会有「虚边」情况。这一点特别适合用于设计不同分辨率的图标,以及做Retina适配。

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

AI对于RetinaMacBookPro的支持非常好。

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

对了,AI在CS5就可以做到将矢量图形对齐到像素了,因此不用担心导出出来的切图里,直线没有准确对上像素,因此带来发虚的情况。

图片 6

如果偶尔要排个版做个册子的话,AI远比PS适合。

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

还有很多一时想不出的优点……

图片 7

因此,即使PS功能相当强大,并且网上有更多的学习资源以及素材资源,对于我来说,AI仍然是不可替代的。

图片 8

接下来我将要写的一些教程,内容主要是针对AI在UI设计中的一些进阶使用技巧。

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

因此,这些教程可能更适合对于AI已经有一定了解的用户来阅读,可能对于AI的基本使用功能不会介绍太多。一是因为大多数AI的基本功能在Adobe的官方文档上都会有介绍:IllustratorHelp;二是出于篇幅和个人时间、精力的限制;三是我相信,学习一个软件、能力最好的办法就是learnitthehardway,即在一定的压力或困难下完成学习,比如在学习AI遇到类似某某某功能找不到这样的困难时,自己通过搜索引擎或官方文档或通过自己尝试,找到解决方案,要比直接问别人效果要好得多。

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

AdobeIllustrator现在最高的版本是CC,即CreativeCloud。我将写的一系列教程要求您用的AI最低版本为CS6,因为CS6的一些很基础的功能在之前的版本里是没有的。当然如果您用的是CC版本最好了。

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

使用AdobeIllustrator做UI设计(二)——多重填充与多重描边

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

在这之前,说说计算机图形(注意:非图像)的一些基本知识。如果您用PS或AI比较多的话,可能会知道,计算机图形的最基本要素有两个:填充和描边。填充和描边可以是纯色,也可以是纹理,还可以是渐变。总之,一个形状确定了填充和描边后,这个图形的样式就确定下来了。

图片 9

自然,作为矢量图绘制软件,AI也可以处理图形的填充和描边。不过,AI有一个很强大的地方是——在AI里,一个图形是可以有好几个填充和好几个描边的。有人可能会问,这个特性有用吗?实际上,这是一个相当实用且强大的功能。我们通过完成一个实例来看一下:使用AI绘制这样一个知乎样式的按钮:

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

图片 10

图片 11

首先,在新建文档之前,要确保AI使用的单位是像素,而不是英寸、点、厘米或别的。这一点很重要,关系到导出的切图是否为pixel-perfect。在首选项里可以设置AI使用的单位是什么:

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

图片 12

图片 13

确保AI使用的单位是像素后,新建一个文档,文档的大小为320×480像素,颜色模式选为RGB,并确认「使新建对象与像素网格对齐」没有被勾选上。如图:

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

图片 14

图片 15

在这里要说明一下,AI在CS5开始,支持将对象对齐到像素网格,这一点在UI设计中很重要。不过为什么在新建文档时不把「使新建对象与像素网格对齐」选项勾上呢?我在多次创作过程中发现,将对象一开始就对齐到像素网格,带来的麻烦远比带来的便利要多。并且,对齐到像素网格可以在后期时来做。因此,在这里先不要勾上。

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

一般来说,做UI设计、海报设计什么的,如果不是特殊的需要,最好不要使用纯黑、纯白、纯红(#FF0000)这样的颜色。一是因为纯黑与纯白这样的颜色之间造成的对比让人感觉很不舒服,二是自然界几乎没有看上去纯黑和纯白的物体,不符合人们的生活经验。因此,我们给背景加上一个浅灰的颜色。即看上去和白色差不多,但又不是纯白,而是稍微偏暗一些的颜色。在默认图层里新建一个矩形,覆盖整个画板,填充颜色设置为#E6E6E6,去掉描边,将默认图层名称改为Backgound,并锁定这个图层,防止以后误操作。做好之后,看上去应该是这样:

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

图片 16

图片 17

图片 18

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

然后,开始画按钮了。我们希望在画面的正中位置附近画一个大小为72×32像素的圆角按钮。所以,新建一个图层,命名为Button。再新建一个矩形,然后把矩形的大小设置为72×31。之所以将矩形的宽度设置为31而非32,是因为接下来要给矩形画一个凹陷效果,这个要额外占用一个像素的高度,故设置为31而非32像素高。

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

由于人眼有视错觉,如果把按钮画在画板的正中心的话,人眼看上去感觉是在正中心偏下一些。因此,为平衡人眼的视错觉,按钮的位置要稍微高出正中心一些。把矩形按钮的正中心设置为(160,209.5)处。将纵座标设置为一个小数的原因是,这样可以做到像素对齐。当然,如果用对齐到像素网格功能也可以做到。这两步完成后,矩形应该是这个位置(为方便查看位置,我把矩形换了一个填充颜色):

  1. 适配 Retina 屏幕

图片 19

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

接着,给矩形做圆角效果。选中矩形,然后使用「效果」-›「风格化」-›「圆角…」这个命令,给矩形加上一个5像素大小的圆角效果。加上后效果如图:

图片 20

图片 21

  1. 导出为 SVG 格式文件

现在在「外观」面板里,可以看到「圆角」这个效果已经添加进去了。在接下来的步骤中,要始终保持「圆角」在最上方: