header_v1.7.40

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

203天前发布

原创文章 / UI / 教程
IpNeNaEcRe 原创,如需商业用途或转载请与IpNeNaEcRe联系,谢谢配合。

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

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


对每个画板进行命名:

(画板命名)

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

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


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

(导出切图)

· 选择你要输出的画板

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

· 将背景色设置为透明

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

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


(导出结果)

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


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

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

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



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



12

    文章信息

    • 文章标签

    Hello PM 意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功