Sketch产品交互设计视觉设计——图标设计

夜雨原创玩转Sketch第八期:图标(icon)绘制教程下篇

2017-08-10  本文已影响277人  夜雨y

怎么用Skech绘制一枚图标?绘制图标前有哪些注意事项需要了解的?图标绘制Sketch教程,分为上下两篇,上篇是先对图标的知识作大致的了解,在下篇(本篇)中将讲解如何使用Skech绘制图标,同时涉及简单的布尔运算。

注:玩转Sketch系列教程适用于Sketch44或者更高级的版本。

1.手绘图标

在没有计算机,仅有笔和纸的时代,图标基本是靠手绘的,讲究是是一笔一画。在Skech中,我们同样可以利用钢笔、铅笔工具来达到手绘图标的目的。但是,手绘图标的效率较低,更多适用于需要花大量时间的logo创作中。现在较为流行的图标绘制方法是形状拼接法。

2.形状拼接法

形状拼接法是目前广为流行的一种图标绘制方法,在Sketch中,形状拼接发可以分为三部曲:图标分解、图标运算、图标组合。

(1)图标分解:把想要绘制的图标分解为几何形状

我们通过观察网站或者应用的图标,就可以发现,图标一般由正方形、圆形、三角形等几何图形构成,如下图所示:

所以,仅仅通过第一步,我们就可以绘制一些简单的图标形状,例如,放大镜图标,只需要画一个圆和矩形,然后组合在一起即可。

(2)图标运算:通过布尔运算得出复杂的图形

对于一些复杂的图形,我们虽然可以将其分解为简单的几何形状,但是无法通过第一步那样简单的组合得出想要的图标,例如心形图标:

这个时候,我们就需要用到Sketch中的布尔运算,来构建复杂的图形,布尔运算一共分为4种运算方式,分别是:

合并(Union):执行合并后,你将得到两个形状区域的和。

减去(Subtract):将上层形状区域与下层形状中的重叠部分,从下层区域中挖去,同时只保留下层被挖去后的区域。

相交(Intersect):取两个形状重叠的部分。

排除(Difference):将两个形状相交的部分挖去,保留其它部分。

(3)图标组合

图标组合是在前两步的基础上,对图标进行组合操作,最终得出我们想要的图标,以心形为例,我们把圆和正方形组合在一起之后,使用布尔运算的合并操作,即可得到一个心形。

上一篇 下一篇

猜你喜欢

热点阅读