如何用Sketch画微质感图标?


第一步:找图片参考
绘制微质感图标,第一步需要找到一个适合的图片参考。我找了以下几个扳手和螺丝刀的实物图,用于基础形状的绘制。
第二步:绘制基本形状
根据以上找到的图片参考,我提取出了下面的基础形状。

第三步:加强光影关系
以上就基本完成了这个图标的绘制,但现在还是很扁平的感觉,质感不够强烈。接下来我们要通过分析参考图的光影关系进一步对图标优化。
1.柔和过渡,虚化高光,投影
善用高斯模糊工具,先绘制基础图形,然后对齐进行高斯模糊,调整到合适的数值。
2.平缓凹陷转折
图形剪切叠加,同时拉出渐变,交汇处图形间渐变颜色明暗关系明显,形成凹陷感。
3.深凹处光影
可直接采用内阴影叠加,也可绘制图形剪切并进行高斯模糊。

还有其他的图标教程
好棒的教程