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

需要的网站或工具如下:
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后就可以看到里面已经有了我们刚才选择的图标。

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

最终的结果如下:

最后将这个字体保存,文件名也取名为faceicon.ttf
(3)wordart上传字体
选择fonts选项卡,点击add font,把刚才的faceicon.ttf上传上来。

上传后制作好的faceicon字体就在字体列表中了:

(4)wordart制作图标云
接下来的工作就简单多了,在fonts中选择刚才上传的faceicon字体。切换回WORDS,在下面的横框中随意的添加一些大写字母。

点击visualize,就得到了最后的结果(有可能你的结果和我有些不一样,是因为shapes、style的设置不一样,可以自行进行调整):

最后,应当注意的是,如果你需要对特定的图标进行突出显示,那么记得第二步制作字体时记住该图标对应的字母是什么,自作图标云words选项中,设置该字的size较大即可。
3.自定义图标
最后试一下通过阿里巴巴矢量图标库下载svg,然后上传到icomoon制作的自定义图标。

网友评论