如何使用iconfont的标准图标模板进行图标绘制并上传svg格式到iconfont的项目库形成自己团队的矢量图标库

图标作为界面设计中的必要组成部分,现在行业对它的重视度越来越高。目前设计师大多数都是从iconfont上下载修改使用。而有些公司则要求形成自己的统一性的图标库,那么在iconfont上新建并上传项目则成了一项很重要的工作。

因为做这项任务时并没有找到一篇教程教具体我怎么做,过程中还是遇到了很多问题,只能自己不断探索然后把我自己得经验分享一下有什么问题可以大家一起讨论。

1.在iconfont上登录账号并新建项目。


首先登录账号,建议使用公司账户建立一个官方的账号,方便后期人员变动时的管理。目前Iconfont提供三种登录方式,GitHub,内部员工和新浪微博。

Image title

然后选择我的项目,点击使用帮助里的图标绘制,下载官方给出的图标模板(1024*1024px)。

Image title

2.图标绘制。

由于日常工作图标尺寸大小不一,不建议直接在1024*1024的模板中绘制,以免不好控制图标描边粗细的大小。建议还是根据原始图标的标准尺寸绘制,然后扩展后放大到1024*1024px在这我用一个32*32的图标举例,具体的操作过程。首先,新建一个32*32的画板,黄色的参考线是我自己画的,用来规范图标的尺寸和位置,我会分享在文末。然后画好图标以后复制此画板得到一个新的图标,执行对象—路径—轮廓化描边。记得,轮廓化描边后记得用路径查找器的第一个联集将图标合并一下,这样图标得到了扩展,无论怎么放大都会保证描边和圆角等元素的视觉效果。

Image title

3.图标导出svg。

接着,保存的工作我觉得有两种方法。

第一种:打开刚刚从iconfont上下载的1024*1024的图标模板,把扩展后的图标复制到里面并且等比例放大到合适的大小,最后存储为-svg。

第二种:由于工作中设计图标的数量很多,单独一个一个保存势必会很耗费时间,因此在这边我认为批量导出比较好。这样就是新建一个文件,里面建立多个1024*1024的画板,把所有扩展后的图标依次复制过来排列好,执行存储为-存储为svg-使用画板-选择你想要导出的范围即可。在这里提示,画板名称前边的数字就是导出时需要填写的画板范围。

Image title

4.上传到iconfont的项目里。

后面的工作就比较简单了,点击上传图标到项目,选择刚刚导出的svg文件,点击上传,然后每个单独设置每个图标的名称,标签,是否保留颜色等属性上传即可。

Image title

哈哈以上就是我的分享,第一次写教程,写的乱七八糟的,希望你们能看懂。国庆节要在家整理最近的作品,实际输出变少,心里变得很空虚呢。我们一起加油哦。

Image title




声明:* 本站所提供的资源均来源于互联网,站内所有文字、图片内容由网站会员上传而来,UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。如果有侵犯到您的权益,请联系本站删除,谢谢合作!联系邮箱:Uishe#qq.com (请将[#]换成@)