GitHub Octicons 的制作过程 已翻译 100%

在我们最近一篇文章中，我们宣布了Octicons，我们的新图标字体。我们投入大量工作在字体方面，整个过程中积累了大量的相关知识。五位设计师同时工作从而做到这一点，这是我们越来越大的合作之一。最好详细介绍一下我们如何建立Octicons，以及在前进的道路上学到了什么。

创建图标

在很多场合下，设计师都会使用Illustrator作为创建矢量图标的工具，但是在这里我们选择Photoshop。我们需要指定图标的大小，所以优化预置像素变得十分重要。最近发布的Photoshop CS6，已经在矢量图标设计中，扮演着一个十分强大角色。

其中，一个便利的功能，虽然不是那么容易上手，但对于需要创建2个以上视图的图标的场合，却是十分有效。在application frame visible Window > Application Frame，你可以使用Window > Arrange > New Window For …psd 创建包含俩个实例的文件。然后你可以点击Window > Arrange > 2-up Vertical，并排窗口。每一个窗口都是同一个文件的一个视图，但是你可以独立的移动放大或者缩小。当在一个窗口中构建路径，路径的线条不会出现在其他的窗口中。这样，可以允许你把某一个视图放大到100%，来证明你的图标也存在与其他窗口。

在Photoshop CS6中，Adobe推出了像素对齐为矢量的功能。如果你多数时间需要处理路径，这是一个了不起的功能。然而，有时候需要关闭此功能。暂时还没有一个热键可以完成操作，但是可以自行录制一段行为来用于打开和关闭该设置，这一行为可以定义为热键。

用Photoshop开始建立令人着迷的图标，我们开始审核我们网站上所有图标。我们创造了新的Octicons，增加了一些额外的将来可能会有用的图标。

建立字体

设计在于细节。在完成所有的图标设计后，是时候来创建我们的字体了。我们决定为每一个图标创建两种大小方案。一种是，16px，需要为它的大小做优化。在16px的图标中，细节很有限，所以每个像素都很重要。因为图标被设计到这么小的地方，所以它们并不能很好的放大缩小。为了解决这个问题，我们的第二方案,32px，就会包含更多细节，这样它就可以在不同场合下被放大。

在完成了图标的设计方案，我们需要把字体和图标整合在一起。为了完成这个目标，我们使用一个叫做Glyphs的应用。

开始的时候，我们需要建立我们的字体文件，这样我们就可以决定它的大小。因为字体技术上只有一个规格大小，我们决定设计为32px，而16px则是从32px缩小所得。

对于我们的图标字体，字体的度量包括 em为单位的宽度，高度和网格。这可以理解为宽度，高度和分辨率。

我们开始尝试x的高度，宽度为32，构造32*32的正方形。技术上行的通，但是我们发现，当把某些不是设置为整数单位的节点的字体导出的时候，节点的度量会被自动移动到最近的单元格。这样会导致图标走样变形。

知道了这点之后，我们决定稍微修改一下图标。使用2048*2048的正方形，这样我们就可以确保即使在导出的时候，发生自动移位，但总体的变化仍然使很小的。这通常是由于允许把网格的比率修改为字体的总体尺寸所致。当在只有32个单元格的下面，1个节点的移动会很明显。然而在2048个单元格中，1个单元格的移动就会让人很难觉察。

下面就是Glyphs下设置的最终尺寸：

在配置完成后，我们需要做的是：

1. 我们的图标是在Adobe Photoshop中设计的

尽管按照你觉得舒服的样式去设计你的图标。通过Photoshop来设计却是会增加一些步骤，但是更需要的是它们是在我们的控制范围之内。

2. 在Adobe Illustartor下把它放大到2048个单元

我们首先在Illustrator中打开Photoshop文件。当从Illustrator中拷贝路径出来的时候，Glyphs似乎是使用Illustrator的坐标作为定位。因为所有的图标都在一个图纸上，这样在使用简单的复制粘贴到Glyphs上的时候，会出现对齐问题。

为了解决这个问题，我们创建第二份2048*2048的文档。让Illustrator匹配Glyphs的网格，我们需要对标尺移动-1792pts。然后，我们可以把字体（被2048*2048的正方形包围）拷贝到新的文档，然后把它扩展铺满整个文档，并把它定位在（0，0）。在这里，我们可以把矢量路径到Glyphs的正确位置上了。

这个步骤需要在每个字体中重复。最后，每个字体都匹配上32px的方格，距离基线往下4px，把需要跟它匹配的图标排列在一起。

把字体导出为OTF

你可能会问，为什么我们选择2048.我们用其他大小，例如512和1024做过测试。我们发现这些尺寸对文件的大小没有太大的影响。它只影响了网格的比例大小。网格越大（更少的网格单元），文件越小。当使用2048个单元的时候，我们得到最佳的灵活性来调整网格的比列，而不影响字体的形状。最后，我们选择一个单元格为32px，使得导出的文件比0px的单元格导出的文件要小20%。更大的单元格，例如64和128，生成的文件，会小一点，在没有有效减小文件的前提下，却损失了矢量的质量。

我们把导出的otf文件上传到 Font Squirrel @font-face generator.

因为我们不希望使用标准的字体，而使用我们自己的unicode字体，我们自己指定子集的范围。你可以从这里得到我们的配置。

在我们的字体完成并可供浏览器使用之前，我们还剩下一些步骤，来擦亮它们。

子像素

没有对齐

对齐的

优化

最后，我们需要解答字体该如何取别名，webkit的 -webkit-font-smoothing属性就是我们的答案。

子像素抗锯齿

浏览器默认使用subpixel rendering。对于字体，效果很好，但对于图标，它就显得有点太重，最后会导致添加多余的像素。

没有抗锯齿

通过关闭font-smoothing，我们保留每一个像素。它对于直线效果很好，但是曲线或者有角度的线条，都会使它变得块状或者像素化。

抗锯齿

抗锯齿文本使最好的折中方案。在字体构建正确的时候，它提供锐利的边界，圆滑，轻量的曲线。

但只是webkit的一个功能，我们还需要在其他浏览器支持font-smoothing的时候，更新这些图标。

鸣谢

这些图标让我们觉得很自豪。它们是@bryanveloso, @jonrohan, @jsncostello, @kneath,和@cameronmcefee.的努力的工作成果。我们希望你会对篇文章感兴趣。