复现sketch钻石图标过程
2016-01-19 本文已影响552人
DEREK_GUO
应该每位用「sketch」做设计的designer,都想亲自画出它钻石图标bling bling的样子,毕竟sketch的图标这么美,下图就是。

仔细观察图标,不难发现图标就是由多个三角形构成,以下就是我在绘制sketch icon的过程中总结出的几个要点及大致过程。
- 从正面的3个三角形及1个扇形开始绘制。当用vector工具勾勒三角形轮廓时,最好先勾勒出矩形,然后在编辑模式下,用 vector选中一个角,最后delete就可以得到想要的三角形,这样做是误差最小的方式。

- Sketch icon不仅由三角形构成,而且对称图形也有很多,所以应该充分利用这点。举个例子,绘制图标的face面。如下图,vector工具绘制两个对称三角形构成一个面。虽然看起来构成了一个面,但实际上是由2个子路径组成。所以,要做的就是先将两个三角形union到一起,然后flatten2个三角形,这样就组成了一个路径。值得注意的是,2个三角形靠在一起时,记得将2个三角形重合一部分,在inspector里调节一个三角形的x坐标(坐标值变化0.1就够了),之后进行union和flatten操作。

- 另一个要点就是,图形上光影的变化用linear gradient慢慢调整就可以了。其中,适当的改变透明度是个很有用的技巧。

- 图标其他的几个面也用类似的方法画出,如下图。



- 最后,就绘制好Sketch Diamond Icon了。
