GitHub 英文原文：The Making of Octicons

在我们比来一篇文章中，我们公布了Octicons，我们的新图标字体。我们投入大量任务在字体方面，全部过程当中积聚了大量的相干常识。五位设计师同时任务从而做到这一点，这是我们愈来愈大的协作之一。最好具体引见一下我们怎么树立Octicons，和在行进的路途上学到了甚么。

创立图标

在非常多场所下，设计师城市运用Illustrator作为创立矢量图标的Tools，可是在这里我们选择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推出了像素对齐为矢量的功用。假如你大多数工夫需求处置途径，这是一个了不得的功用。但是，有时分需求封闭此功用。临时还没有一个热键可以完成操纵，可是可以自行录制一段行动来用于翻开和封闭该设置，这一行动可以界说为热键。

用PhotoshopStart树立引人入胜的图标，我们Start审核我们网站上一切图标。我们发明了新的Octicons，增加了一些额定的未来可能会有效的图标。

其它翻译版本 (1) 加载中

树立字体

设计在于细节。在完成一切的图标设计后，是时分来创立我们的字体了。我们决议为每个图标创立两种巨细计划。一种是，16px，需求为它的巨细做优化。在16px的图标中，细节很有限，所以每一个像素都很主要。由于图标被设计到这么小的地方，所以它们其实不能很好的放大减少。为了处理这个问题，我们的第二计划,32px，就会包括更多细节，如许它就能够在分歧场所下被放大。

在完成了图标的设计计划，我们需求把字体和图标整合在一同。为了完成这个目的，我们运用一个叫做Glyphs的使用。

Start的时分，我们需求树立我们的字体文件，如许我们就能够决议它的巨细。由于字体技巧上只要一个规格巨细，我们决议设计为32px，而16px则是从32px减少所得。

关于我们的图标字体，字体的怀抱包含 em为单元的宽度，高度和网格。这可以了解为宽度，高度和辨别率。

我们Start测验考试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字体，我们本人指定子集的范畴。你可以从这里失掉我们的设置装备摆设。

在我们的字体完成并可供阅读器运用之前，我们还剩下一些步调，来擦亮它们。

子像素

这是网格的工作！上面的每个网格单位代表   Glyphs的一个像素。它在app中即是128个单位（我们实践是运用32单位的网格，可是这个是为了阐明我们的观念）。当线条没有和网格对齐，字体衬着引擎会测验考试去做抵偿。它经过走样来完成，把一半的像素衬着为灰色像素。上面的创立新的Repo图标就是没有对齐的。后果就会是如许：

没有对齐

对齐的

优化

最初，我们需求解答字体该怎么取别号，webkit的 -webkit-font-smoothing属性就是我们的谜底。

子像素抗锯齿

阅读器默许运用subpixel rendering。关于字体，后果很好，但关于图标，它就显得有点太重，最初会招致添加过剩的像素。

没有抗锯齿

经过封闭font-smoothing，我们保存每个像素。它关于直线后果很好，可是曲线或许有角度的线条，城市使它变得块状或许像素化。

抗锯齿

抗锯齿文本使最好的折衷计划。在字体构建准确的时分，它供给锋利的鸿沟，油滑，轻量的曲线。

但只是webkit的一个功用，我们还需求在其他阅读器支撑font-smoothing的时分，更新这些图标。

道谢

这些图标让我们感到很骄傲。它们是@bryanveloso, @jonrohan, @jsncostello, @kneath,和@cameronmcefee.的尽力的任务效果。我们盼望你会对篇文章感兴味。

本文中的一切译文仅用于进修和交换目标，转载请务必注明文章译者、出处、和本文链接。 2KB翻译任务按照 CC 协定，假如我们的任务有进犯到您的权益，请实时联络我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务