在iconfont上看到这样一组图标，感觉还不错就拿来临摹了。

# 临摹前准备

先分析下这组图标的特点：使用3种颜色、线条结合色块、靠右侧有断点。 

有点瑕疵的就是每个图标上的断点间距都不统一，如图：

所以怎样保证每个图标的断点统一是需要解决的问题之一。

针对上述分析做以下准备：

1、制定深灰、浅紫色颜色组件，方便统一调整颜色

我用的ai，做了2个全局色

2、规范图标尺寸

我打算做48*48px大小的，将线条宽度设为2px，参考了material design的图标规范，将关键线尺寸设定为：

3、为保证断点间距一致，我做了一个参考图形（具体怎么用后面说），设定断点长度为4px、断点间距为2px

# 临摹过程

1、先在画板上画出大致轮廓

2、打开参考线和网格，调整图形，让图形更规范

为了避免图形在实际使用时失真，需尽量让线条和填充形状刚好“落在像素上”，可以理解为边界与像素对齐，如下图：

3、使用刚才的参考图形制作断点

4、第一个临摹完成

这是临摹后的：

# 总结

1、针对相同的颜色和图形可制作组件，并全局使用，这样修改起来简单

2、确保图标在视觉上一样大，图形的整体尺寸（长宽）可以不是整数像素

3、文字图形可以直接画出来（如上图中的“¥”），便于统一线宽

临摹的第一组图标，哟嚯嚯～

Powered by Froala Editor