海贼旗在呼唤着我

图标字体的建立与ps字形的使用 #设计

2016.01.08

图标作为设计中不可缺少的元素,占据着很重要的位置。在一段时间的尝试之后,我找到了一个自己比较满意的icon使用方式——图标字体。

网上也有关于图标字体制作的教程,也比较详细。我想分享的是用_图标字体+ps 2015的新功能——字形面板_来使用。


1. 图标绘制

在ai中绘制icon,根据图标设置画板大小,绘制时注意对齐像素网格,否则图标应用到ps中会出现模糊,最后保存为svg格式。具体内容可参考阿里妈妈mux上的教程。http://mux.alimama.com/posts/1025

2. 使用icomoon的制作

图标字体我使用的是icomoon来生成的。网址:https://icomoon.io/app/ ,简单操作如下:
打开网站后,他们提供了一套免费的图标。点击import icons按钮,选中我们保存的svg文件,完成上传。
网页上出现了我们刚刚上传的图标,右侧选择select all,可以全部选中。
点击Generate Font 按钮,进入图标字体设置界面。点击preferences可以设置一些参数,主要设置一下字体名称即可,方便以后区分。
全部设置完成后点击download下载字体。
解压并打开此文件,找到fonts里面的字体文件,点击安装即可。

3. Photoshop字形的使用

在Photoshop 2015中打开字形工具(低版本没有此功能),找到我们刚刚安装的图标字体。即可看到其包含的所有图标。

第一行是最近使用的字形,最下面可以改变预览大小以及icon的大小。选择字体工具,设置字体大小(建议为图标字体的整倍数),双击字形面板中的图标即可完成输入。接下来就可以如同字体一样设置图标的颜色、大小了。如果需要编辑图标,只需右键转换成形状即可,是不是很方便呢。

Comments
Write a Comment