恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何绘制符合iconfont规范的图标并上传项目
0.0°
2019-09-24 原创文章 教程 举报 5786 38 36 1

如何使用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





更新:2019-09-24

下载
收藏

38人已收藏

宋脸小

灵感获得在每一个动情的午后

  • 17

    作品

  • 106

    粉丝

  • 283

    关注

  • 如何用sketch批量上传图标到iconfont(进阶版)
  • 2019-UI设计作品集
  • B端产品-实践教学信息管理系统设计
  • Illustration Collection2018年插画

    猜你喜欢

      2019-09-24 原创文章 教程 举报 5786 38 36 1

      如何绘制符合iconfont规范的图标并上传项目

      0.0°

      你确定要举报如何绘制符合iconfont规范的图标并上传项目

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年09月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      36
      38
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录