绘制一套统一的icon
icon绘制的一些心得
刚开始做ui设计的时候对于icon的绘制都是增加一个画一个有时候甚至直接下载使用。
并且全部用ps一把梭。
后来随着能力增强开始自己绘制统一的icon，并且在考虑以多少尺寸绘制一套icon，并且可以再sketh中进行多个尺寸的扩展，这样我就可以在sketch组件中定义icon组件随时可以更换icon（sketch组件的优点可以看看我的关于sketch组件的文章）
所以这个时候开始要查阅资料了看看别人有没有经验可借鉴
于是找到了这篇文章http://m.ui.cn/details/479516
内容有点多所以我吸收转换成自己可用的。
首先我说一下文章里要提取出来的内容
设计时常用图标尺寸一般在12-36px之间（@1倍图）。为了方便绘制的时候查看页面效果，我们可以从中选择一个尺寸作为绘制尺寸，然后通过设定缩放倍率来获得其他尺寸的图标。
所以作者通过偶数和4的倍数得到了12、16、20、24、28、32、36。
然后通过这几个基础尺寸风别扩大或者缩小1.5 2 2.5 3 3.5倍看得到的数值是否最大覆盖12、16、20、24、28、32、36。这组数字
最后作者得出下面的结论
若绘制面型图标
L=12时，p=1，i=1.5、2、2.5、3，可选图标大小为：12、18、24、30、36；
L=16时，p=1，i=1.5、2、2.5，可选图标大小为：16、24、32、40；
若绘制线型图标
L=12时，p=1，b=1、2，i=1.5、2、2.5、3，可选图标大小为：12、18、24、30、36；
L=16时，p=1，b=1、2、3，i=1.5、2、2.5，可选图标大小为：16、24、32、40。
所以我们可以选择上面的尺寸画icon
如果要了解的更详细可以去看原文章我的重点不在这里
来说说我在工作中的应用
最近在项目中要做一组3px的线性图标，一般app底部tab的icon尺寸44px或者48px，一倍图下是22px或者24xp。
然后问题来了我是在二倍图用3px画呢，还是在一倍图用1.5px画呢，并且画多大尺寸呢。
在探索这个问题时候我首先利用sketch的便利下载了kitchen这个插件（大家可以去试一下这个插件，这个插件有一个可以帮你填充文本和头像 、图片的功能很方便），这个插件直接嵌入了iconfont。
我再@1的花瓣上把淘宝的各大产品icon拉下来发现都是16px大小
并且结合上面的文章计算一如下图
刚好 这样我就可以用1px在在16px的大小下绘制一套统一的icon，并且16px下绘制的icon可以扩展的尺寸比较多
可以用ai或者sketch绘制然后制作成组件
ai的话可以画好后利用sketch的sketch icons插件批量导入导入的时候还能设置尺寸参数完美
