美文网首页工具
图标云制作方法

图标云制作方法

作者: 一起学分析 | 来源:发表于2018-09-05 22:52 被阅读29次

文字云玩儿得多了,最近看到网上出现了图标云的玩儿法,所以探索记录一下操作办法。先来看一下结果效果图:


文字云和图标云

需要的网站或工具如下:
1、文字云制作网站:https://wordart.com
2、图标字体生成网站IcoMoon APP:https://icomoon.io
3、字体制作软件FontCreator:下载链接

1.制作流程和思路

众所周知,目前大多数文字云制作网站都只支持文字制作字云,所以用图标制作,除了用手工堆+写脚本的方法,可能是别无他法了。但诸如wordart网站提供的上传自定义字体的功能给我们制作图标云提供了另一种可能。实际上如何制作图标云字体是完成图标云的最关键步骤。

在对图标没有特别要求的情况下,我们这样完成图标云制作:

1. icomoon下载初步图标字体
2. FontCreator制作字体
3. wordart上传字体
4. wordart制作图标云

在需要自定义图标的情况下,我们这样完成图标云制作:

1. 获得自定义的png或SVG图标
2. 通过在线工具或illustrator等将png转换为svg图标
3. 上传svg图标至icomoon,并生成图标字体
4. icomoon下载初步图标字体
5. FontCreator制作字体(这里也可以直接使用FontCreator处理,png,不过效果可能不理想)
6. wordart上传字体
7. wordart制作图标云
2.制作方法

(1)icomoon下载初步图标字体
我们在icomoon网站选择一些提供的免费图标,然后点击generate font,创建图标字体,选择download下载刚才选择的图标。

选择要下载的图标
(2)使用FontCreator制作字体
下载的文件解压后,font文件夹有个icomoon.ttf的字体文件,这个就是我们最初的图标文件,当然直接上传到 wordart是 无法制作图标云的,所以我们还需要一个步骤。
使用FontCreator打开icommoon.ttf后就可以看到里面已经有了我们刚才选择的图标。
FontCreator打开图标字体文件

接下来就是体力活了,我们再新建一个字体文件,取名为faceicon,然后从我们的icommoon.ttf中将图标一个个的复制到faceicon中。从大写的A开始,一直到全部复制完成(直接ctrl c +ctrl v,当然,技巧就是利用shift键选择多项,然后复制粘贴——惊异于软件还支持这种功能)。


将图标复制到新的图标字体文件中

最终的结果如下:


最终结果
最后将这个字体保存,文件名也取名为faceicon.ttf

(3)wordart上传字体
选择fonts选项卡,点击add font,把刚才的faceicon.ttf上传上来。

上传字体
上传后制作好的faceicon字体就在字体列表中了:
faceicon
(4)wordart制作图标云
接下来的工作就简单多了,在fonts中选择刚才上传的faceicon字体。切换回WORDS,在下面的横框中随意的添加一些大写字母。
添加文字
点击visualize,就得到了最后的结果(有可能你的结果和我有些不一样,是因为shapes、style的设置不一样,可以自行进行调整):
完整的图标云
最后,应当注意的是,如果你需要对特定的图标进行突出显示,那么记得第二步制作字体时记住该图标对应的字母是什么,自作图标云words选项中,设置该字的size较大即可。
3.自定义图标

最后试一下通过阿里巴巴矢量图标库下载svg,然后上传到icomoon制作的自定义图标。


自定义图标

相关文章

  • 图标云制作方法

    文字云玩儿得多了,最近看到网上出现了图标云的玩儿法,所以探索记录一下操作办法。先来看一下结果效果图: 需要的网站或...

  • PS剪影图标设计要点与注意事项

    1、切图安全框:可以约束图标大小,保持整体图标的视差平衡感。 制作方法:全选--复制ctrl+c---粘贴ctrl...

  • 5分钟学会轻质感3D图标

    立体图标制作方法 去年年底在做项目时沉淀下来下面这套图标设计: 14年的菜心问我怎么做的,今天就来和他分享下制作方...

  • 网易云图标ai制作方法

    1.图标分解,由4个半圆,1个矩形,两个园构成。 2.新建600*600图层。 3.分别创建直径为400px,30...

  • Avue引入阿里云线上图标

    .一、登录阿里云矢量图标库 登录阿里云矢量图标库官网[https://www.iconfont.cn/],搜索自己...

  • UI设计轻质感图标制作方法

  • PS画笔制作文字长阴影

    前言 前两篇主要讲到ICON图标的制作方法,分别为:《UI设计教程-用PS+AI制作出萌萌哒小黄人》,《龙母金币I...

  • 网易云音乐图标

    title: 网易云音乐图标 网易云音乐原图 网友提供的 自己临摹的--和原图确实有差距。。。。。

  • vue3引入iconfont

    首先登陆阿里云矢量图标库[http://www.iconfont.cn/home/index],把需要的字体图标加...

  • ui设计自学

    今天开始练习制作小图标。 云课堂上有小图标课程,跟着做感觉不是很难,但是由于不熟练,动作比较慢。 总的来说,小图标...

网友评论

    本文标题:图标云制作方法

    本文链接:https://www.haomeiwen.com/subject/zavowftx.html