header_v1.7.40

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

112天前发布

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

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

上一篇我们讲了 Ai 的设置,这一篇我们讲一下绘制前的准备工作,不要小看这些准备,它们可以让你后面的工作变得事半功倍!


一.新建文件

首先是新建文件,新建之前先搞清楚你的目的,如果你是自己练习绘制或者临摹一组 icon,那么新建画板的大小可以随意,够用就行。如果你是在实际工作中需要后期输出各种 png 或者 svg,那你最好按照我的这个方法来,后期一键输出所有文件 so easy!

假设我要绘制一组 2 倍设计稿中的 icon,大小为 48 px,先设置网格,根据 icon 的大小来设置,尽量设成能够整除 48 的大小,比如 6、8、12、24,这里我将网格线间隔和次分隔线都设置为 12,设置好之后新建文件:

(新建文件)

· 画板大小设为 icon 的实际大小,48x48,数量设为 20,多点少点都可以,后期可以在文件中增减

· 更多设置中,将列数和间距设置好,这里我设置了 5 列,间距是根据网格线间隔的数值来设置的,12 px

· 创建好文档,发现画板已经排列了整齐的 4 排 5 列,显示网格,放大查看,网格和画板完美对齐!这个关键就在上一步设置的间距数值:必须为网格线间隔的整倍数才行


如果你直接创建了文档而没有在更多设置里面排列好画板,没有关系, 还能抢救一下,打开画板窗口(找不到的可以在 窗口 — 画板 中打开):

(重新排列画板)


二.设置参考线

利用参考线可以帮助我们保证一组 icon 的视觉平衡,关于视觉平衡,网上有太多相关的文章,我就不重复写了,在这里推荐几篇我认为讲的比较好的:

· 比圆更圆—视觉感知在UI中的应用

· 优质icon设计的6个简单步骤 (不只讲视觉平衡,还有很多像素对齐相关的知识)

· https://material.io/guidelines/style/icons.html (Google MD 官方文档,英文不好的朋友可以看这个中文版: 图标样式 )

· 微软雅黑的设计-齐立_字体之窗_方正字库 (虽然是字体的设计,但是道理都是相通的,也很值得一看)



看完是不是有种热血沸腾想要大干一场的冲动,可是参考线从哪里找?不要紧张,我已经为你准备好了,在附件中下载即可

下载了文件之后不要急着打开!!!因为打开后你会发现里面什么都没有,因为这是一个符号文件。我来为你演示如何使用,首先复制这个文件,然后打开符号面板(找不到的朋友在窗口 — 符号中打开):

(符号文件的使用)

· 将 Icon_Grid 文件粘贴到符号文件所在的文件夹中

· 点开符号面板的左下角,发现 Icon_Grid 已经在列表中了,打开这个文件,里面是我制作好的参考线,一共5种,适用于 20px、24px、32px(2 种)、48px 的 icon 绘制,如果需要绘制 40px、64px 的,只需把 20px、32px 等比放大,其他尺寸类似。其中横排相邻的三个是一模一样的,只是形式不同,可以根据个人喜好选择:

(三种样式可供选择)

选择你喜欢的形式,将其拖拽到文档的每一个画板上,这里你可以选择 48px 的参考线,也可以选择 24px 的参考线放大两倍,有什么区别呢?24px 放大的安全区域更多,相应的 icon 会稍微小一点,这里我选择 48px 的参考线:

(快速复制)

· 这里我使用了快速复制,首先,按住 Alt 拖动参考线到相邻的画板上,然后按 ctrl+D,复制上一步操作,填满第一排五个画板。再用相同的方法填满全部画板



参考线放置就绪之后,打开图层面板(找不到的在窗口 — 图层中打开),将当前图层锁定,新建一个图层,这样的好处是参考线所在的图层和 icon 所在的图层可以很好的区分,可以随时隐藏参考线查看整体情况:

(图层设置)

· 将参考线所在的图层锁定,在新建的图层上绘制你的 icon


三.色板设置

什么?还要设置色板?我怎么不知道画个 icon 还有这么多破事!

不要急,其实很简单,很快你就会爱上这个操作:

(使用全局色快速改变配色)

· 色板中任选一个颜色,双击,勾选全局色,确定,右下角出现了一个小三角,代表这个是全局色,因为描边和填充有两种不同颜色,我这里设置了两个全局色

· 然后选中你的 icon,将填充和描边的颜色分别设置为这两个全局色。我这里用了几个简单的图形演示,最好在一开始就设好全局色,然后在绘制 icon 的时候就用全局色来配色

· 双击全局色,勾选预览,改变这个颜色,发现 icon 的颜色也随之改变了,实际上,凡是利用这个全局色配色的所有元素都会跟随改变。这样一来,你可以通过改变这两个全局色实现整套 icon 的快速配色,分分钟配出成吨的组合



好了,准备了这么多,终于可以开始 icon 的正式绘制了,我们下一篇见!





5

    文章信息

    • 文章标签

    Hello PM 意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功