Illustrator教程Illustrator教程如何导出已经设计好的按钮.docx
- 文档编号:24029665
- 上传时间:2023-05-23
- 格式:DOCX
- 页数:12
- 大小:186.50KB
Illustrator教程Illustrator教程如何导出已经设计好的按钮.docx
《Illustrator教程Illustrator教程如何导出已经设计好的按钮.docx》由会员分享,可在线阅读,更多相关《Illustrator教程Illustrator教程如何导出已经设计好的按钮.docx(12页珍藏版)》请在冰豆网上搜索。
Illustrator教程Illustrator教程如何导出已经设计好的按钮
Illustrator教程:
如何导出已经设计好的按钮
我们学习了如何使用AdobeIllustrator的多重填充和多重描边功能制作一个简单的界面。
这个界面背景是浅灰色,上面有一个绿色的按钮。
那么该如何已经设计好的按钮?
本节就为大家介绍方法,并说说AI基于矢量对象强大的切图、导出功能
我们学习了如何使用AdobeIllustrator的多重填充和多重描边功能制作一个简单的界面。
这个界面背景是浅灰色,上面有一个绿色的按钮:
现在,这个界面设计好了,问题出来了,如何导出成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的官方帮助文档:
IllustratorHelp
方法三比较类似,按画板上的参考线来生成切片。
这个和方法二比较类似,且不是很常用,先不介绍了。
方法四就是手工拽线、画框、对齐,就像传统的切图方式那样。
有了前面这三种方法,这种方法几乎很少用到了,因此也不介绍了。
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的压缩版),即可。
5.iOS切图导出须知
就像上文说的,iOS要做Retina屏幕适配。
因此,要准备两套切图:
普通版和Retina版。
命名规则是:
Retina版的切图名称为「普通版名称@2x.png」这样的格式。
例如,一个普通版的切图文件名字叫greenButton.png,那么,Retina版的切图名称应为greenButton@2x.png。
iOS工程师拿到切图后,会直接用“greenButton.png”这个文件名来用,iOS的CocoaTouchUIKit框架会聪明地根据不同的屏幕选择相应的文件。
如果在OSX上做设计,可以用Automator来自动为切图文件名加上“@2x”后缀,如图:
在Windows下,把这段代码存为一个.bat格式文件,每次切完图后,复制一份放到Retina切图目录里执行一次,可达到同OSX的Automator相同的效果:
@echooff
ren*.png*@2x.png
另外,为减少App尺寸,做类似按钮、文本框等切图图片时,建议将切图按这样的方式缩放(不太好说明,直接上图):
iOS工程师拿到这样的图后,会使用类似
-(UIImage*)stretchableImageWithLeftCapWidth:
(NSInteger)leftCapWidthtopCapHeight:
(NSInteger)topCapHeight
或
-(UIImage*)resizableImageWithCapInsets:
(UIEdgeInsets)capInsetsresizingMode:
(UIImageResizingMode)resizingMode
这样的代码,按某一个像素线拉伸,或按设定边帽拉伸,将这张图拉伸到原先的宽度,而保留圆角不变。
使用AI很容易完成缩放按钮宽度而保持圆角半径不变(见上一篇文章)。
最终缩放的宽度应为「圆角尺寸x2+1」像素,要额外留出1px的宽度是为拉伸考虑。
由此可见,虽然说AI自带的切图工具还是赶不上类似Slicy这样的神器,不过也不算太难用了,依然可以说很容易集成到工作流程里,增加工作效率。
下课了,希望大家学习愉快。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Illustrator 教程 如何 导出 已经 设计 按钮