ILLUSTRATOR做UI设计Word文档格式.docx
《ILLUSTRATOR做UI设计Word文档格式.docx》由会员分享，可在线阅读，更多相关《ILLUSTRATOR做UI设计Word文档格式.docx（24页珍藏版）》请在冰豆网上搜索。
7、AI在CS5就可以做到将矢量图形对齐到像素了，因此不用担心导出出来的切图里，直线没有准确对上像素，因此带来发虚的情况。
8、AI基于矢量对象的导出功能很好用，很适合用在Web和UI上。
由于AI有丰富的矢量效果（类似PS的滤镜和图层样式），因此AI退可做扁平，进可做拟物。
二、多重填充与多重描边
计算机图形（注意：
非图像）的一些基本知识。
计算机图形的最基本要素有两个：
填充和描边。
填充和描边可以是纯色，也可以是纹理，还可以是渐变。
总之，一个形状确定了填充和描边后，这个图形的样式就确定下来了。
自然，作为矢量图绘制软件，AI也可以处理图形的填充和描边。
不过，AI有一个很强大的地方是——在AI里，一个图形是可以有好几个填充和好几个描边的。
实际上，这是一个相当实用且强大的功能。
我们通过完成一个实例来看一下：
使用AI绘制这样一个知乎样式的按钮：
首先，在新建文档之前，要确保AI使用的单位是像素，而不是英寸、点、厘米或别的。
这一点很重要，关系到导出的切图是否为pixel-perfect。
在首选项里可以设置AI使用的单位是什么：
确保AI使用的单位是像素后，新建一个文档，文档的大小为320x480像素，颜色模式选为RGB，并确认「使新建对象与像素网格对齐」没有被勾选上。
如图：
在这里要说明一下，AI在CS5开始，支持将对象对齐到像素网格，这一点在UI设计中很重要。
不过为什么在新建文档时不把「使新建对象与像素网格对齐」选项勾上呢？
我在多次创作过程中发现，将对象一开始就对齐到像素网格，带来的麻烦远比带来的便利要多。
并且，对齐到像素网格可以在后期时来做。
因此，在这里先不要勾上。
一般来说，做UI设计、海报设计什么的，如果不是特殊的需要，最好不要使用纯黑、纯白、纯红（#FF0000）这样的颜色。
一是因为纯黑与纯白这样的颜色之间造成的对比让人感觉很不舒服，二是自然界几乎没有看上去纯黑和纯白的物体，不符合人们的生活经验。
因此，我们给背景加上一个浅灰的颜色。
即看上去和白色差不多，但又不是纯白，而是稍微偏暗一些的颜色。
在默认图层里新建一个矩形，覆盖整个画板，填充颜色设置为#E6E6E6，去掉描边，将默认图层名称改为Backgound，并锁定这个图层，防止以后误操作。
做好之后，看上去应该是这样:
然后，开始画按钮了。
我们希望在画面的正中位置附近画一个大小为72×
32像素的圆角按钮。
所以，新建一个图层，命名为”Button”。
再新建一个矩形，然后把矩形的大小设置为72x31。
之所以将矩形的宽度设置为31而非32，是因为接下来要给矩形画一个凹陷效果，这个要额外占用一个像素的高度，故设置为31而非32像素高。
由于人眼有视错觉，如果把按钮画在画板的正中心的话，人眼看上去感觉是在正中心偏下一些。
因此，为平衡人眼的视错觉，按钮的位置要稍微高出正中心一些。
把矩形按钮的正中心设置为（160，209.5）处。
将纵座标设置为一个小数的原因是，这样可以做到像素对齐。
当然，如果用对齐到像素网格功能也可以做到。
这两步完成后，矩形应该是这个位置（为方便查看位置，我把矩形换了一个填充颜色）：
接着，给矩形做圆角效果。
选中矩形，然后使用「效果」-›「风格化」-›「圆角…」这个命令，给矩形加上一个5像素大小的圆角效果。
加上后效果如图：
现在在「外观」面板里，可以看到「圆角」这个效果已经添加进去了。
在接下来的步骤中，要始终保持「圆角」在最上方：
再给按钮换一个底色，颜色是#8CE01E。
接下来，要进入重头戏了。
点击「外观」面板下的「添加新填色」按钮（即“fx”按钮左边的那个），再新建一个填色层，颜色为纯白到纯黑的渐变，方向是从上到下，透明度为20%，混合模式为「明度」。
完成后画板和外观面板看起来应该类似这样：
这样，可以看到，通过一个底色填色层，和一个明暗渐变填色层，我们成功地做出了色彩明暗渐变效果。
这，就是多重填充的应用之一。
另外再解释一下，混合模式选择「明度」的意思是，取下层对象的色相和饱和度，取上层对象的明度（亮度）作为最终颜色输出。
因此，这样可以做出一个颜色只在明度上的渐变，而不会影响色相和饱和度。
给矩形的描边设置为一个像素，颜色为#7F7F7F描边。
这样，按钮的基本描边就做出来了。
不过却有一个问题：
打开像素预览，会发现描边是虚的：
出现这个情况的原因是描边没有对齐到像素网格，而是被夹在两条像素的正中。
并且，这个图形加上描边后，大小超出了预定的72×
32大小。
解决这个问题的办法是，将描边对齐方式设置为「使描边内侧对齐」。
设置好后，描边就清晰了。
现在的图形和外观面板看上去应该是这样：
接下来，再新建一个描边，颜色设置为纯白，依然是内侧对齐，透明度为50%。
并在外观面板里，把这个描边置于灰色描边的下方，如图：
到这一步时，按钮看上去没有什么变化。
不过接下来，就是见证奇迹的时刻了。
给半透明白色描边加上一个「变换」效果，「移动」参数设置为1像素：
这一步后，按钮就画好了，有高光，且模拟了下凹效果：
此时的外观面板应如图所示：
按钮画好了，接下来，说说这样做有什么好处。
首先，这个按钮本身只用了一个图层，并且只是一个矢量对象，保持了文件的整洁。
不信，可以看看「图层」面板，只有按钮和背景两个图层。
到此为止，按钮的大小正好是预定的72×
32像素大小，且是像素精确的：
然后，如果我不满意按钮的大小的话，我可以随意调整，而不用担心渐变和圆角大小什么的也跟着变动。
如图，虽然按钮大小变大了，但边缘依旧是1像素粗细，且圆角依然是5像素大小，渐变也没变：
要是不满意圆角的大小的话，也可以随意调整，不必担心其他的也跟着变：
把按钮换个颜色？
简单，把最下面的填色层换一个颜色就可以了，其他的都不用改，渐变什么的依然在：
三、图片输出
现在，这个界面设计好了，问题出来了，如何导出成iOS或Web前端工程师可以用的界面？
在这一节教程里，就说说AI基于矢量对象强大的切图、导出功能。
1.导出界面设计图
如果要是想导出整个界面设计图的话，那很好说。
AI有两个关于导出的命令，一个就叫「导出」，另一个叫「存储为Web所用格式」。
在这里要使用后者。
因为只有「存储为Web所用格式」才能保证导出的文件是像素精确的。
在执行这个命令之前，确保设计图上所希望显示的东西都没有被隐藏掉。
然后执行命令，格式选择PNG，点击「存储」按钮就可以导出整个设计图了。
一般来说，做UI设计导出成品，格式除了PNG以外基本没有其他的选择。
BMP太大了，微软自己都基本不用了。
用JPG图片的锐边、线条等部分（学名称之为图像的高频分量）会因为有损压缩而须掉。
只有PNG在保证文件大小不会太大的同时，仍然为无损格式，这一点对pixel-perfect要求较高的UI设计是至关重要的。
并且PNG还有一个好处：
PNG支持半透明。
所以说，如果没有特殊要求的话，导出应一律为PNG格式。
为iOS做设计的话，UI资源，包括切图、主屏幕图标、启动画面等等应全部使用PNG格式。
导出后查看图像，可以看到图像的大小就是我们预定的320×
480像素大小，且按钮做到了像素精确，边缘没有糊掉：
2.导出每一个UI元素
在正式聊这个话题之前，为方便说明，我们再放上去一个按钮。
选中按钮，复制一下，新建一个新图层，把这个按钮粘贴到新图层里去。
再根据上一节课所学的办法，把按钮的底色改成灰色。
改好后差不多应该是这个样子：
现在的任务是，分别导出两个按钮的切图，供前端工程师使用。
对此，主要有以下几种方法:
1．方法一，不必动用切图工具。
这样做：
首先，隐藏掉欲导出按钮之外其他的任何图层或矢量对象，确保画板上只有欲导出按钮是可见的。
然后，依然使用「存储为Web所用格式」，但是在弹出的选项对话框里，去掉「剪切到画板」这个勾选。
可以看到，「奇迹发生了」，AI自动把导出文件的尺寸设置为了按钮大小，一点不多也一点不少：
点击「存储」导出，查看之，可以看到导出的大小确实就是我们想要的，圆角边缘是半透明的，凹陷什么的也在，并且是像素精确的：
导出灰色的按钮也同理，隐藏掉除灰色按钮之外的所有东西，然后使用「存储为Web所用格式」命令就可以了。
不过，显而易见的是，这种方法有一个缺点。
如果要是做一个类似登录界面那样比较简单的界面还好，但如果要是做一个复杂的界面，那么要一直反复隐藏显示图层、对象什么的，特别麻烦。
2．方法二，也是AI切图导出的终极大招。
首先，还是要把背景隐藏掉，因为要确保背景是透明的。
然后，选中一个按钮，执行菜单命令：
「对象」-›「切片」-›「用所选对象切片」。
这个按钮就被切好了：
可以看到，我们根本没有做拉线、画框、对齐这些繁琐的步骤，仅仅花不到十秒，点击几下鼠标，AI就基于按钮的外观自动为我们切好了。
这种方法特别适合于每个UI元素没有堆叠这样的情形。
对于灰色的按钮同理，再点击几下鼠标，又切好了一个：
导出时，依然要使用「存储为Web所用格式」这个命令，然后按Shift选中两个按钮切片，导出选项选择「选中的切片」，如图：
这样，就可以干干净净地导出所有图稿中的UI切片了：
可以看到，这种方法导出效率极高。
不过，如果要是矢量对象很多的话，可能每次要点击几下还是有些繁琐。
其实，还可以有更偷懒的办法。
有人会想，直接用快捷键不就省掉几下点鼠标了吗？
可惜的是，AI并没有给这个极其实用的命令分配一个快捷键。
但我们可以让它有快捷键。
方法是使用AI的动作功能，把这个命令单独保存为一个动作，以后每次只要按下快捷键即可执行了，进一步增加工作效率，减少痛苦：
如何创建和使用动作呢？
方法同PS。
3.适配Retina屏幕
做iOSUI设计的人都知道，一般来说，要为UI准备两套切图资源。
一套为普通分辨率的，适配于iPhone3GS，iPad2等老机子。
另一套是Retina版，即切图大小长宽分别为原来两倍，使在同样面积下的UI元素显示更加精致，适配于iPhone4、iPad3等较新的机器。
在AI里，如果为Retina屏幕做适配的话，也挺简单的。
导出时缩放设置为200%即可：
4.导出为SVG格式文件
SVG格式不同于PNG和JPG等格式。
SVG是基于XML的矢量图形。
优势是可以随意缩放。
因此，比较适合以此做RetinaWeb适配。
AI自然可以导出基于SVG的矢量格式。
不过，我没有找到比较简单的切图方法。
所以，最好是将设计稿的每个图形元素分别复制到新的文稿里保存。
保存时，把按钮移动到左上角，然后选择「保存」/「另存为」/「存储副本」，格式选择SVG或SVGZ（SVG的压缩版），即可。
升级会员 