AI_移动UI设计如何进行切图

 

　　AI中适合做矢量图，也完全可以使用AI进行移动UI界面设计完全没有问题，但是现在移动开发中矢量文件的使用

　　还没有得到普及，使用矢量图形的一些问题还没有一套非常成熟简单的方法，因此现在大多移动应用还是使用位

　　图格式的图片，那么这就需要我们学会在AI中进行切图和标注尺寸

 

　　尺寸标注

　　对于移动UI界面的设计，用AI也非常的简单，首先再创建画板的时候单位使用像素，如果我们的目标机型是2倍率

　　的机型，那我们就将画布新建为 720 x 1280 px 大小 ，之后就正常作图即可

 

　　UI界面绘制完成之后，我们需要进行切图和尺寸标注，直接在AI中进行尺寸标注的话好像还没有更简单的方法，得

　　需要自己进行 pt 和 px 之间的换算，这也不是难事，也可以导入PS中或者使用一些专门的标注工具进行标注

 

　　切图

　　除了标注，就是切图，AI中切图比PS要方便的多，比如我们有如下的源文件

　　

 

　　首先，要把背景隐藏掉，因为要确保背景是透明的。然后，选中一个按钮，执行菜单命令：

　 「对象」-›「切片」-›「用所选对象切片」 这个按钮就被切好了，同理也将第二个切出来

　　

　　   

 

　　可以看到，我们根本没有做拉线、画框、对齐这些繁琐的步骤，仅仅花不到十秒，点击几下鼠标，AI 就基于

　　按钮的外观自动为我们切好了。这种方法特别适合于每个 UI 元素没有堆叠这样的情形

 

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

　 「选中的切片」

 

　　

 

　　

　　导出不同倍率的图片

 

　   由于在AI中做的图表都是矢量的，那么我们的切片也就能够进行倍率的缩放而不会有任何的问题，如何导出

　　不同倍率的图片也非常简单，只需要调节上图中的  百分比  ，我们的原始稿是720的，如果导出360的，就

　　将  百分比 设为 50% 导出就行了，非常的简单