header_v0.7.32

字体图标 | 快速学会生成字体图标?

197天前发布

原创文章 / UI / 资讯
白秋 原创,如需商业用途或转载请与白秋联系,谢谢配合。

看文章学好制作字体图标。

fff458c20c7aa801219c777f1542.jpg


(一)提问:字体图标是什么?有什么用?


字体图标使用场景分析:

  • 刚接触字体图标

  • 公司招的实习生

  • 未听过字体图标

  • 觉得字体图标很难

  • 教过很多人做字体

  • 女生

  • 百度

  • ......


 总结:字体图标好像在设计当中挺常用。




二)要找一个靠谱有经验的人传授


首先,你需要知道字体图标它有什么用?

区分在哪儿?


1.图标格式是PNG

  • 一张PNG图片

  • 无法更改颜色、大小

  • 需要你不断地导图

  • 体质大


2.图标格式是SVG

  • 生成一个连接

  • 缩放大小

  • 改变颜色

  • 添加阴影

  • 改变透明度

  • 让各个浏览器支持

  • CSS生成

  • 有一些变化,如 Hover

  • 旋转角度

  • 体积小且不失真


所以,你明白字体图标的作用了吗?

(注意:不过字体图标有个弊端就是,你每添加或者删除图标,必须都要重新上传一次再导出来,所以对于马虎的同学需要多次检查哦~)



(三)快速生成字体图标


1.使用AI&Sketch矢量软件制作图标,格式必须是SVG。


每个图标都必须命好名称,最好使用英文来命名。若是名称超过两个词组的话,一般命名格式是”main_menu“,加下划线( _ )而不是间隔线( - )。


411e58c20db8a801219c77adfc7c.jpg  

→ 平时命名的图标


2.导出SVG格式的图标后,需要在图标前面添加好数字进行排序。


若是你开发的产品需要很多图标,命名格式则是”0001main_menu“。意味着有1千个字体图标;若是不多的,可以命名为“001”或者“01”即可。


改为这样的排序原因是防止你换了设备,又或者清空了之前上传的历史记录,你的图标排序就会乱。


因为程序员写程序的时候,只会记录你排序时候的数字,例如:main_menu 图标对应的代码是e900,你换了设备后就会变成e907。


这样就会出错,我表示已经吃过很多亏的人了,以前常常就是因为这件事,还跟和我合作的前端冷战了许久~



bc5558c20e13a801219c776c42ea.jpg    

→ 导出图标后进行排序(排序好不可修改)



3.电脑打开字体图标生成网址:https://icomoon.io。

把图标上传上去下载即可生成一个连接,此时图标已经被改为字体图标了。



具体操作

第一步:找到入口IcoMoon App,点击进入


d15f58c20dd0a801219c77ed3ebb.jpg    

→ 注意右上角




第二步:找到Import Icons导入你命好名称的SVG图标


53ce58c20ddea801219c77ba01fd.jpg    

→ 注意左上角




第三步:全选中你导入的图标(左边是选择、右边是删除),若是导错了,就可以删除掉重新再导入


307758c20e44a801219c776aa545.jpg    

→ 选择 全选/删除




第四步:点击Preferences,设置你的文件名称与图标的前缀。生成的字体名称应该是:dplw-add。


4d9258c20e58a801219c773e8aaa.jpg    

→ 对图标前缀名称与文件包进行命名




第五步,点击Download即可完成了。(注意:为了确保出错,下载好的包可以解压看看,是否有漏掉一些图标)


eaa458c20e66a801219c77cd5a3f.jpg    

→ 注意右下角




四)题外话


平时制作图标的注意点:


  • 建立的画板,最好使用双数,例如:24px、32px、64px等(不过我平时使用的是32px比较适中)


  • 图标不能占满整个画板,要留个2px,怕调整图标的时候出问题(即是画板32px,图标就是30px)


  • 每个图标之间的高度或者宽度两者当中,其中一个变数必须保持一致(由于图标大小都不一致,所以有些图标的宽度我会设为30px,而有些图标却把高度会设为30px,目的为了保持一致性


  • 若是线标,最好把他们的粗细调整为一致,保持图标与图标之间不会差距太多


  • 目前字体图标大多数用在Web端,因为移动端要求的版本比较高,一般都不会采用


  • 一般我会喜欢去一些现成的网址下载或者使用RightFont工具直接拖拽进去


  • 最重要的一点,导出之前,必须把图标修改为面的图标(轮廓化描边),而且要合并形状,不然会出现一些图标损坏的现象。



好了,就这么简单就做完字体图标了!回去再也不用被人欺负你不懂字体图标了!

小编可以睡觉了。


切记,学好字体图标,可以确保设计师和前端保持长久的友谊。

7
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功