PSD图标华丽变身Iconfont字体图标

分类栏目:用户体验 - 前端开发

36080

发布于 1 条评论

在做手机移动端项目,经常会遇到图标在手机上显示模糊的问题,经过无数革命先辈的总结,得出将图标字体化的优秀解决方法,不但可以高清显示图标、适配retina屏,还能像字体一样定义颜色和大小,在觉唯网中也是大量了使用的字体图标。结合最近动漫项目字体图标的运用,在此总结如何将PSD文件华丽变身为iconfont的过程。欢迎一起探讨,轻拍砖!

完成华丽的变身,只需三大步。简而言之就是:

  1. PSD图标矢量化,复制出图标路径(关键点:路径
  2. 粘贴图标路径到Illustrator中还原图标,导出SVG文件(关键点:轮廓化图标
  3. SVG导入字体图标自动化平台工具,生成iconfont字体文件。

下面正式开始我们的华丽变身之旅。

第一阶段:准确无误的复制出PSD图标路径

我们得到鬼斧神工的设计稿之后,深呼吸,调整好心态,准备开搞。如何将PSD转为SVG?关键在于“路径”。弱水三千只取一瓢,我们最终需要的只是图标的路径、路径、路径(重要的东西讲三次)。如何获取图标的路径呢?正常情况下我们将会面临三个情景:

  • 情景一:设计稿的图标是用路径工具绘制(在项目开始前,尽量与设计师沟通使用此方法设计图标)。
    恭喜你,运气真好,此时你只需要做到“复制”就可以进入下一阶段。复制路径的步骤方法:选择“路径选择工具” —> 点击图标所在图层 —> Ctrl+C —> 准备进入下一阶段
  • 情景二:设计稿的图标不是用路径绘制。
    此处苦逼的节奏已来临。三个解决方法:
    (1)、选中图标形状的选区,点击“从选区生成工作路径”,如果图标选区像素精度不够,生成的工作路径就很龊了,缺乏精度,无法直视,基本上不能使用或者需要二次加工修改。(适用:图标源文件像素足够大非常精细)
    (2)、默默的掏出“钢笔”工具按照图标的形状,小心翼翼的临摹出来。(适用:拥有使用钢笔等工具的临摹技能)
    (3)、寻找设计师好基友帮助,将图标修改为路径绘制;(适用:没办法了,求人吧)
  • 情景三:设计稿的图标只有部分是路径或由多个路径图层组合而成。
    这里只能呵呵了。解决方案:不管三七二十一,路径全部拷贝出来,缺少的后面再补、再通过钢笔描绘、图形裁剪等方式来处理得到。

第二阶段:优雅的将路径粘贴到Illustrator还原图标

到这里,我们的第一阶段已经完成,接下来进入第二阶段。在这个过程可能花费的时间很多,但不轻言放弃,相信付出的努力是有回报的。打开Illustrator矢量作图利器,新建一个 64*64 的文档。将我们之前复制出来的路径粘贴入文档中,选择“复合路径”,点击确定,并且将路径大小调整到合适的位置,如图:

PSD图标华丽变身Iconfont字体图标 - 1 PSD图标华丽变身Iconfont字体图标 - 2

路径粘贴完成后,接下来我们需要将路径还原成图标形状。矢量物体由填充和边框组成,后续为了能成功转换为iconfont文件,需要注意的是:

  1. 路径必须闭合
  2. 不能带描边,需要轮廓化形状

在这个过程中会发生很多意外,我们要习惯,拥抱变化,成就未来。下面以此动漫图标还原为例,图标的最终面貌是这样子的:

PSD图标华丽变身Iconfont字体图标 - 3

我们下面开始进入还原图标。

step1:为方便于我们观察路径,先对形状进行描边。ai 里面有三种对齐描边方式:居内描边、居外描边、居中描边。我们点击 “窗口 — 描边” 可弹出描边对话框视图,这里我们该选择哪种描边方式,可以查看psd设计稿的处理方法,这里的例子是居内描边,大小为 2px:

PSD图标华丽变身Iconfont字体图标 - 4

step2:右键取消分组,使每部分的路径独立分开。此时我们已进入高潮,成也路径,败也路径,亮出我们的王牌路径工具:路径查找器(视图 – 路径查找器),开始对路径的裁剪、合并等手术操作。先从下方的两只圆形小脚开始吧,我们选中其中一只圆形小脚,将其进行轮廓化描边处理:

PSD图标华丽变身Iconfont字体图标 - 5

我们再次选中这只圆形小脚,按住Shift键同时选中底部的圆角大框(这里的圆角大框建议就地粘贴多一份出来,因为我们进行形状模式处理后该圆角大框可能会被删除),然后点击在“路径查找器”中的“减去顶层”,效果如图:

PSD图标华丽变身Iconfont字体图标 - 6

同样,我们对另外一只圆形小脚和上方的两根天线做类似方法处理,效果如图:

PSD图标华丽变身Iconfont字体图标 - 7

通过上图的蓝色线范围,我们可以看出,两只小脚和两根天线的多余部分已经被裁剪掉了。

注:上面提到的轮廓化描边,是指将物体的边框独立转换成一个填充物体,也就是由边框线变成形状轮廓。以上操作并不是绝对需要,因为我们演示里的小圆角最终效果是空心的(描边效果),所以我们需要将其转换为一个填充形状来处理;而上方的两根天线则无需转换,我们直接将其去掉边框、设置填充色即可。

step3:最后我们将中间的两只圆圆的眼睛,设置填充色,去掉边框;两个圆角方框都轮廓化描边(这里的处理方式与设计稿对齐保持一致):

PSD图标华丽变身Iconfont字体图标 - 8

step4:我们的路径已经基本处理完成,我们可以全选路径,将其编组,然后设置一个填充色(任意颜色皆可,但建议最后保存时填充黑色,避免出现意想不到的坑),校验一下是否有问题。

PSD图标华丽变身Iconfont字体图标 - 9

step5:保存为svg格式(文件 — 储存为 — 格式:svg格式),弹出对话框,默认选项,点击确认完成。

PSD图标华丽变身Iconfont字体图标 - 10

第三阶段:SVG 华丽变身 IconFont 闪亮现世

到这里了,也就离成功不远了,开始得瑟吧。

将我们在上述中精雕细琢的SVG上传到iconfont自动生成平台处理,可选择目前主流平台 :https://icomoon.io/app/ 、http://iconfont.cn/http://font.baidu.com/editor/ 等,几乎是一键生成,你只需要上传然后下载即可,下载的文件一般也会附有字体文件的使用方法演示(如有个性化需求也可以自定义,如:形状大小、编码信息修改等等)。

注:实际项目中加载ttf字体文件有时会失败或需要较长的时间,此时页面上会显示一个“口”字或其他的错乱的形状,体验非常不好;建议将字体文件转为base64编码在样式中使用。

小贴士扩展

在某些小米手机图标无法显示问题:

PSD图标华丽变身Iconfont字体图标 - 11

解决方案是导出字体文件时,检查图标是否出现上述屏蔽的Unicode,将其修改为其他即可。

全部评论 / 1

  1. 若水

    收藏 Mark!

    若水 2016-02-22
    20