再不知道字体图标就落伍啦!字体图标制作详解.pdf

再不知道字体图标就落伍啦！字体图标制作详解 上期通过分享 《浅谈矢量图形前景》，简单地从设计趋势、技术、以及现有应用环境 等角度讲述了矢量技术应用的可行性。这期我们将把阿里妈妈MUX这两年在矢量图 标制作上积累的经验也分享给大家； 在做手机端Web App 项目中,经常会遇到小图标在手机上显示比较模糊的问题，经过实 践发现了一种比较好的解决方案，图标字体化。在微社区项目中，有很多小的Icon （图 标），如分享、回复、赞、返回、话题、访问、箭头等，这些Icon （图标）一般都是纯 色的。开始制作时考虑用双倍大小的Sprite 图，通过CSS 样式设置只显示二分之一尺寸， 这样在Retina 屏上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的 效果不是很理想，后来又考虑多套图标适配方案、SVG 矢量图等，都因为种种原因放弃 掉了（如多套图标繁琐、Android 2.3 不支持SVG 格式等），为了解决以上问题，用到了 图标字体，下图为微社区用到的部分图标字体。 大家可能在网上看过很多关于矢量图标制作的教程，而且大多是技术同学分享的技 术贴。整个过程也相对比较简单。在这里我们将深入地向大家讲述字体图标制作的 规范流程和注意事项，很多内容是现在网上没有的，纯粹是阿里妈妈MUX这两年摸 索出来的。阿里妈妈MUX在国内首家推出了在线生成字体图标平台 ，省去了设计师 不太擅长的字体制作过程，所以在本教程中我们就不再详细介绍如何使用字体制作 工具制作字体图标的过程，更多的是介绍如何在AI工具中制作一个规范的字体图标。 一、制作前基础知识普及 1、在制作图标前请下载由阿里妈妈MUX提供的矢量图标制作模板；立即下载 2、尽量使用illustrator制作矢量图标；有些设计师在ps中使用路径绘制图标再导 成SVG，这种方式也是可以的，但是有时会出现一些奇怪的现象，如图形的路径混 乱了，图标倾斜了等不可预知的情况，所以还是建议大家在illustrator中绘制矢量 图标； 3、将illustrator中绘制的图形另存为SVG格式；最初iconfont平台是支持EPS 文件上传的，但是考虑到EPS文件在平台生成过程的不稳定性，所以现在统一采用 SVG格式；illustrator中SVG格式导出具体教程 iconfont 4、在绘制图标的过程中不要使用AI图形模块的旋转、镜像等功能，整个绘制过程 最好使用钢笔工具绘制；^^ 5、避免出现图形绘制过中断点的现象。 6、不可以用色彩叠加的方式来达到模块造型； 二、图标栅格 数字形态下，字符是用抽象化的图案绘制成的。当文本显示在屏幕上时，位置非常 精确，理想的字体形状需要用一定数量的像素栅格显示。图标设计师常用栅格来控制 图标组成元素的比例关系；但是我们在矢量图标制作过程中引入栅格概念主要目的 是模拟字体图标在不同尺寸下的展现效果，以达到优化的作用；也就是说图标设计的 时候我们用栅格来模拟像素，一个格子就是一个像素，一个图标需要一定数量的像 素组成。 举个例子：一个16X16图标，在16X16个像素中通过像素着色的方式把图形表达出 来； 那有同学就要问了，通过这样的栅格能达到什么样的优化效果呢？首先我们来了解 一下文字的渲染策略，看组图： （从左到右依次）理想的渲染状态、黑白渲染、灰度渲染、次像素渲染 上图左侧第一张是我们认为一种比较理想的渲染效果，但是通过刚才我们介绍栅格 我们可以了解到这种状态是不可能的，因为第一代黑白渲染和第二代灰度渲染是不 可能做到显示半格像素或一个像素中显示弧度的。 黑白渲染和灰度渲染在渲染图形遇到半格像素或则弧度的时候，他们会有各自不同 的处理方式；举个例子： 如上图红点处像素，我们理解他是有弧度的，且不占满一个像素；各个渲染方式的 处理办法如下： 黑白渲染 黑白渲染相对来说比较粗暴，直接通过四舍五入的形式把这里要描绘的图形不显示 了；（黑白渲染的形式主要应用于打印机渲染，但是打印机本身的精度非常高，所以 打印出来的图形还是很细腻的） 灰度渲染 灰度渲染显得就智能一些了，他通过灰度降级的方式来表达，如果占不到一个像素 那就根据他占的面积来降低这个像素的灰度；占的面积越小灰度就越低； 次像素渲染 次像素渲染是第三代渲染方式，相对来说比较高级，他从从左至右将一个像素分成 三份；用不同的色彩值来显示图形，这样图形看起来就更加细腻； 通过了解刚才三种渲染模式对不满一个像素的处理方式，我们就会发现，当我们绘 制图标的时候，如果没