cover_image

图标keyline线画法详解

原创印迹印迹在霓虹

第三十六篇原创文章

可能是全网最详细的图标keyline线画法教程！

上一篇我们了解了图标的尺寸，知道了不同位置的icon要画多大。这就准备开始了，不过别急，在画图标之前，还需要做一项准备工作，就是图标的keyline线。虽然我们知道它，但你不一定熟悉它的画法，总不能每次都记参数是吧。本篇内容就为大家安排的明明白白，看完要是还不会（我哭给你看），打开底部的视频教程...

好了，言归正传。

上面这个图标Keyline线大家都知道，前文也有提及。Material Design规定了它在24x24dp下的圆形、正方形、垂直矩形、水平矩形的尺寸规范。但是它只给了具体参数，并没有详解这些基本形从何而来。这是24dp下的图标keyline，如果换做32、48、96...又该如何？难道还需要去计算这个值不成？数学要能这么好，做什么设计哟～还有三角形该画多大？小矩形呢？

废话不多说，就以24px的图标尺寸为例，来康康该如何操作。

1、打开ai，新建画板（24*24px），画板数量自定。建议每个图标一个画板，方便后期操作。

2、打开网格设置，【视图】-【显示网格】，快捷键「cmd+"」。

默认网格是1x1px，就是横竖各24格子，我们需要修改它。

3、修改网格大小，【首选项】-【参考线和网格】。

把网格线间隔设置为“2”，其他默认，点「确定」。

此时每一格为2*2px，横竖各12格。

4、开始绘制构形线框

选择矩形工具在画板四周留出一格，画一个矩形，这个尺寸就是图标最大的绘制区域。

然后按键盘快捷键「cmd+5」把矩形转换为「参考线」；如果没有显示参考线，按下键盘「cmd+;」即可，如下图：

以这个正方形为基准

竖矩形高度和正方形高度一致，左右各空出一格。

接着宽矩形，宽度和正方形一致，上下各留出一格。

圆形就很简单了，直接画一个和正方形一样大小的圆然后转换成参考线。

接着画对角线，用直线拉出来四条线「cmd+5」转换一下就好啦～

接下来画里面的小正方形和小圆形，这个小正方形是画一些小图标时的参考线，比如“返回”小箭头，小圆形是辅助作用，可有可无。

ok,这样一个基本的构形线框就画出来了。

有经验的各位总监就看出来了，这里还少了正方形和三角形的基本形。

不急，这就来。

5、画正方形之前回到第三步修改下网格大小【参考线和网格】，把网格线间隔由“2”改为“1”。

此时每一格的大小就是1px，标准的24个格子。

正方形怎么画呢？参照最大的正方形往里缩小1格就得到「正方形」。

利用【多边形工具】画出三角形，顶部与圆形对齐，底部与正方形对齐，左右留出1px。

至此，已画出所有基本形：正方形、竖矩形、横矩形、圆形、三角形，还有一个小矩形。

这是24*24px图标的keyline线画法，48px呢？很简单，只需修改【参考线与网格】参数，把【网格线间隔】设为“4”，画板网格数12x12。

接下来的步骤和基本形的比例和上面24px尺寸的一样，这里就不重复啦。

画完基本构形线框后，再把【网格线间隔】由“4”改为“2”（下面这张图应该在上一步），画正方形和三角形。

这样48px的图标keyline线就完成了，这个方法的好处就是不用死记每个基本型的参数，过程中只需修改两次“网格线间隔”的参数即可。会了24px的画法，其他尺寸的keyline线都可以此类推，大家可以试试看。

接着来验证一下画好的keyline线，有没有发现，不记参数画出来的基本形尺寸刚好和计算出来的一致。

以此关键图形画出来的图标

看完还有疑问？贴心的小视频已经备好：

最后回答几个我早已料到的问题：

1、画好的参考线想临时隐藏怎么办？

按键盘「cmd+;」显示和隐藏。

2、参考线怎么复制？

右键画板【解锁参考线】，即可把画好的参考线复制粘贴到其他画板。

3、画完形状转为参考线时不显示怎么办？

康康软件右侧属性面板，把【参考线】第一个属性打开。

4、画对角线时像素点对不齐怎么办？

把图形填充和描边都关掉。

🔔下篇预告：图标拐角那些事

🤗一起聊设计🥳

我是热爱设计，持续输出设计文章的印迹。

高质量的设计交流群已经开通啦，

扫码加我好友即刻进群，

与更多优秀设计师一起成长👥

👨🏻‍💻Follow me💁‍♂️

🏠Website：fangyin.me

🔍Zcool、UICN、Zhihu、PM：Fyin印迹

如果你觉得本文对你有所帮助，求点赞求转发求在看

如果还能加个关注就是对我莫大的支持啦⬇️

继续滑动看下一个

印迹在霓虹

向上滑动看下一个