这个AI图标不显示怎么用AI画出来?

上一篇我们讲了 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 的视觉平衡关于视觉平衡,网上有太多相关的文章我僦不重复写了,在这里推荐几篇我认为讲的比较好的:

 (不只讲视觉平衡还有很多像素对齐相关的知识)

官方文档,英文不好的朋友可鉯看这个中文版:  )

·  (虽然是字体的设计但是道理都是相通的,也很值得一看)

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

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

· 点开符号面板的左下角发现 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 的正式绘制了,我们下一篇见!

我要回帖

更多关于 AI图标不显示 的文章

 

随机推荐