视觉设计 » 如何绘制UI图标关键线?最详细的keyline线画法

如何绘制UI图标关键线?最详细的keyline线画法

发表于: 视觉设计. 评论
Sponsor

前言:在设计APP界面、WEB界面是都会使用参考线,而绘制APP图标也是如此,为了让图标更规范,更统一,我们可以通过设置网格和绘制关键线(keyline)来辅助。今天给大家分享UI图标关键线绘制方法,非常详细的教程,UI设计师们一起来学习吧!

如何绘制APP图标关键线?最详细的keyline线画法

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

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

教程/步骤:

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

如何绘制APP图标关键线?最详细的keyline线画法 如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

4、开始绘制构形线框

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

以这个正方形为基准

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

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

不急,这就来。

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

如何绘制APP图标关键线?最详细的keyline线画法

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

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

如何绘制APP图标关键线?最详细的keyline线画法

如何绘制APP图标关键线?最详细的keyline线画法

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

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

如何绘制APP图标关键线?最详细的keyline线画法

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

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

如何绘制APP图标关键线?最详细的keyline线画法

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

如何绘制APP图标关键线?最详细的keyline线画法

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

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

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

2、参考线怎么复制?

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

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

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

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

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

扩展阅读:

如果深入了解图标的规范,可以阅读以下文章:
Material Design图标规范——产品图标
https://www.shejidaren.com/product-icon.html
系统图标背后的Material基础规范
https://www.shejidaren.com/material-design-specification.html
安卓图标模板:icon Grids
https://www.shejidaren.com/android-template-icon-grids-psd.html

作者 | 印迹
来源 | 印迹拾光(id:Fyin_Design )

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }