【ICON 绘制】从打开 Ai 到输出文件,我的独门秘技之 04 输出篇

用户头像
上海/设计爱好者/8年前/1154浏览
【ICON 绘制】从打开 Ai 到输出文件,我的独门秘技之 04 输出篇

这是一系列关于 icon 绘制的教程,从打开 Ai 到输出切图,这里没有什么高深的理论,只有最最实用的技巧,Just follow me!

终于到了要输出文件的时候,首先确保你是按照我的方法来设置文件的,忘记了的朋友可以去回顾一下 【ICON 绘制】从打开 Ai 到输出文件,我的独门秘技之 02 准备篇


对每个画板进行命名:

(画板命名)

· 关闭参考线所在的图层(重要!否则后期会输出参考线)

· 利用画板工具对每个 icon 所在的画板进行命名,空白的画板不用管


点击文件 — 导出 — 导出为多种屏幕所用格式 (或者快捷键 Alt +Ctrl+E):

(导出切图)

· 选择你要输出的画板

· 选择输出路径(动图里面已经选好了,没有单独演示)

· 将背景色设置为透明

· 选择格式,可以直接点击 iOS 或 Android,也可以点击添加缩放手动添加,格式可以选择 PNG、SVG、PDF 等多种,

· 设置完成后,点击导出画板


(导出结果)

怎么样,是不是超级快速方便,只要前期准备做好,你也可以一键导出需要的所有切图。


需要注意的是,Ai 里面默认你绘制的 icon 是一倍图,可是我们绘制的是两倍图,这可怎么办?这时候就需要手动设置一下了,不能直接利用默认的输出方式,具体设置如下:

(绘制二倍图时的导出设置)

· 在格式中,将缩放 0.5x 当成一倍图,不带后缀,将本身做为两倍图,带 @2x 后缀,三倍图同理



这一系列的文章到这里就结束了,是不是觉的干货满满,感觉不错的话可以点个关注,我会不定期分享一些干货,很干的那种



26
阅读原文
|
举报
|
40
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
科技医疗透明柜UI界面设计
新能源APP应用UIKit
手表表盘UI系列
高级感金属拟物 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】汽车icon
【新年UI图标】旅行icon
【新年UI图标】体育icon
钱包ui模板
高级表盘系列UI源文件
3D渐变流体抽象矢量UI背景图
【新年UI图标】30个图标
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI通用设计素材1
UI界面 组件
UI 登录界面设计模板包
盲盒APP UI设计
拟物风质感写实UI卡片合集源文件
我的钱包-UI界面设计-app
【新年UI图标】钱包icon
【新年UI图标】会员icon
智能家居中心 简约 UI设计组件库
你可能喜欢
大家都在看
登录注册