创建像素字体

如果你了解了做法,那么创造一款像素字体很容易。你可能已经看过了我们之前制作的像素字体的视频教程。本文中会介绍更多内容。

新建字体

首先,启动 Glyphs(……)并选择 “文件 > 新建”(Cmd-N)来新建字体文档。这次,在你开始绘制字母之前,前往 “文件 > 字体信息”(Cmd-I)并为你的字体起个响亮的名字。因为我们创意爆棚,所以为它取名 “Pixelfont”。然后,选择 “其他设定”,你可以在这个选项卡中找到 “网格间距” 选项。“网格间距” 选项会控制节点的坐标值如何取整。默认值为 1。对于像素字体而言,我们希望所有的工具和修改都贴齐网格,所以将数值设置得大一些。这样,可以确保你的“像素”们可以自动摆在正确的位置。我们将 “网格间距” 设为 50:

为什么网格间距会是 50?简而言之,我们选择 50 是因为它可以被 1000 整除,并在特定的字号下提供完美的像素渲染。

计算字体的屏幕显示尺寸:屏幕上的字号以 PPM 计算,即 “每个全身字宽所占的像素数”。按照 PostScriot 格式字体的默认数值,每个全身字宽包含 1000 字体单位,如果这样,那么每个全身字宽中会包含 (1000÷50=) 20 个网格,也就是像素。换句话说,在字号 20 px 的情况下,字体中的每个 “像素” 正好对应一个屏幕像素。对于分辨率为 72 ppi(像素每英寸)的屏幕而言,也就是 (20 px ÷ 72 ppi × 72 每英寸的 pt 数换算 =) 20 pt。这是 Mac 和 Adobe 软件中默认的分辨率设置。在 Windows 上,分辨率按 96 ppi 计算,所以在 (20÷96×72=) 15 pt 的字号下,像素字号为 20。

绘制像素

在字体视图中,点击左下角的加号按钮来新建字符形。双击名称(newGlyph)将其重命名为 pixel

双击字符形区域,在新的编辑标签页中打开字符形。你会看到根据你的设置所出现的网格。在工具栏中选择 “矩形工具”(F)并绘制一个和网格单元等大的矩形。你会发现,路径自动贴合了网格。将正方形绘制在原点处,即基线和左侧边线相交的地方。

在画布上的任何位置右击来打开上下文菜单。取消勾选 “导出” 选项。我们不想导出 pixel 字符形,因为它无法用键盘敲出来,在最终字体中保留的话只会占用资源。

这就是你在像素字体中所需要的全部路径了。耶!

搭建字符形

要开始制作你的字母表,在字体视图中双击你最喜欢的字母来打开它。我要从 f 开始,因为我喜欢毛茸茸的(fluffy)小白兔。前往 “字符 > 添加部件”(Shift-Cmd-C),从对话框中选择 pixel,然后点击“选择”。

选中 pixel 部件并按下 Cmd-C 将其拷贝。然后,按下 Cmd-V 来粘贴,并通过方向键或鼠标来移动。重复此步骤,直到你满意了这个字符形为止。或者,你也可以按住 Option 键的同时拖动部件来复制。你还可以同时操作多个 pixel 部件,这样可以进一步加快速度。别忘了在框选的同时按住 Option 键,因为常规的框选仅会选取路径。

好了,这就是我们的 f

那么,继续快乐搭建你的其他字符形吧!

批量编辑

默认的字符形宽度是 600 单位。这样看上去并不太好:

要开始进行字间距设计,你可以让你的全部字符形拥有同样的左右边距。首先全选字符形(Cmd-A),然后在字体视图中左下角的面板中输入边距数值。左右边距的数值必须是网格间距的整数倍,本例中我们直接设为 50。

这样,再来对单一字母进行设置就更简单了。想要了解更多关于字间距设计的内容,请阅读我们的字间距教程.

看上去好多了,你觉得是吧?

像素变体

当然了,你可以用你的 pixel 部件玩点花样。比如,它可以不是方的:

要想实现这个,你可以直接修改 pixel 的形状,或者添加一个新字符形,命名为比如 pixel.circle。你会发现,当绘制圆形时,会产生类似这样的效果:

这是因为 “网格细分” 会将网格进一步分割,贴齐会以细分网格为准,而非直接对应网格本身。如果将细分值设为 25,你的圆形就会变成这样:

从 Glyphs 2.3 开始,手柄点不再向网格贴齐。所以如此一来,细分值设为 2 即可。

将 “细分” 值设为适应你像素设计的数值。要想获得最大的自由度,可将其设为和 “网格间距” 相等。

这样,你就有了两个(或更多)像素变体,但怎样使用它们呢?前往 “字体信息”(Cmd-I)并选择 “子样” 选项卡。点击加号按钮来添加两个新子样。子样会被默认命名为 “Regular”,但你可以在 “Style Name” 文本框中重命名。我们将子样命名为 squarecircle,因为要们想获得一个方形像素的子样,和一个圆形像素的子样。确保你的字体中有两个像素字符形,比如 pixelpixel.circle。然后,在你想要使用另一种形状像素的子样中,点击“自定义参数”旁边的加号按钮,添加自定义参数。在 “属性” 处填写 Rename Glyphs,或点击箭头后在下拉菜单中选择。如果双击 “值” 区域,会打开一个对话框。填写你想要替换的字符形名称,比如本例中我们想用 pixel.circle 字符形替换 pixel 字符形,所以我们输入:

pixel.circle=pixel

如果你创建了像素形状各异的多个子样,你可以将其用作分层字体。本例中我们叠加了一个方形像素的子样、一个圆形像素的子样和一个三角形像素的子样:

渲染提示

如果你的像素更复杂,就需要确保渲染提示功能关闭。所以,在导出文件(Cmd-E)时,取消勾选 “自动渲染提示” 选项。为什么呢?请阅读我们关于 PostScript 自动渲染提示的教程,了解渲染提示能做什么、不能做什么。

使用滤镜做后期处理

如果你想要再拿你的字体做些实验,可以试试一些内建的滤镜。和之前一样,检查一下你的“网格细分”设置值,否则,某些滤镜可能会产生不能让你满意的效果。例如,如果你对方形像素应用了“圆角”滤镜,你会得到这样的效果:

你可以按 “好” 直接应用滤镜,或者,我更建议将其添加为自定义参数。要实现后者,不要在滤镜对话框中按 “好”,而是点击左下角的齿轮图标并选择 “拷贝自定义参数”。然后,按 “取消”,并打开 “字体信息” (Cmd-I),前往 “子样” 选项卡,点击左下角的加号按钮,添加一个新的子样。修改子样名称(我为其命名 Rounded)并点击 “自定义参数” 区域中的任意位置,将其激活以便粘贴。然后,只要按下 Cmd-V 将刚刚在滤镜对话框中拷贝的参数粘贴进来即可。嗒哒!

使用自定义参数来设置网格间距也是个不错的办法。点击加号按钮添加新的自定义参数,“属性” 处只需双击后填写 Grid Spacing 或单击箭头后从下拉菜单中选择。然后,双击 “值” 处填写 1,网格间距即设为了 1。

使用自定义参数,你可以在导出时为不同的子样应用滤镜,这样就不会破坏原始的像素路径。换句话说,你可以无损地创建一个全像素的字体家族

本例中,我们使用了 “粗糙化” 滤镜。路径轮廓被切碎,节点则随机散开:

同样,点击齿轮并选择 “拷贝自定义参数”。前往字体信息(Cmd-I)按 Cmd-V 粘贴代码,或新建子样后粘贴。

这里我们使用了 “曲线偏移” 滤镜,但不勾选 “生成笔画” 选项:

点击齿轮拷贝自定义参数代码。前往 “字体信息”(Cmd-I)并使用 Cmd-V 粘贴代码,或新建子样来粘贴。

当然了,你可以在同一个子样中应用多个滤镜。本例中,我们应用 “圆角”、“曲线偏移” 和 “去除重叠” 滤镜:

请注意看:滤镜的顺序非常重要。Glyphs 会依次执行这些滤镜。本例中,我们首先应用 “曲线偏移” 将轮廓扩展 3 单位,这样像素就会产生一点点重叠。然后我们应用“取出重叠”,你可能已经猜到了——将像素合并成一个路径。然后再次 “曲线偏移” -3 单位,将路径移回原来的位置。之后,我们应用 “圆角” 来让字体变平滑。第一个 “圆角” 参数中正值(+20)处理凸角,第二个 “圆角” 参数中的负值(-20)则将凹角变圆。这里负值仅可通过自定义参数手动添加。如果你从滤镜对话框中拷贝自定义参数,只能得到正值。

不过,为什么这么麻烦?很简单。如果我们没有用多个滤镜,而只是直接使用 “圆角”,会得到完全不同的结果:

下例中,我们同样使用 “曲线偏移” 将轮廓扩展 3 单位,应用 “去除重叠” 合并像素,再应用 3 单位 “曲线偏移” 将路径移回原位,和之前那个例子一样。不过这次,我们再使用 “粗糙化” 滤镜:

下例中,我们想让我们的像素字体只有外轮廓。要实现这种效果,我们还是使用 “曲线偏移” +3 单位,应用 “去除重叠” 再应用 “曲线偏移” -3 单位,和前面的那些例子一样。然后我们再添加一个 “曲线偏移” 滤镜,不过这次激活 “生成笔画” 选项。

所以,尽情尝试各种玩法吧,只要牢记滤镜的顺序!

第三方滤镜

想要再 Glyphs 的默认滤镜之外尝试更多滤镜?看一下你的 “插件管理器”,可以通过 “窗口 > 插件管理器” 来访问。它有一个很方便的搜索功能,帮你找到相关的滤镜。(下面提供的链接仅供参考,如果插件管理器出了什么问题,你可能会用到它们。)

Mekkablue 的 Shadow 滤镜用于将你的字符形变成带影子的版本。看一下:

另一个有趣的滤镜是 mekkablue 的 “碎片化” 滤镜。它会将字符形切开,然后将获得的碎片进行移动和旋转随机的数值,用户可以指定随机数的最大值。本例中,我们还是先使用 “曲线偏移” 扩展轮廓 3 单位、应用 “去除重叠” 再应用 “曲线偏移” -3 单位来移动轮廓,然后再使用 “碎片化” 滤镜:

用于像素字体的插件

在像素爱好者中享有盛名的《街机游戏字体》作者大曲都市, 发布了一款用于制作像素字体的可选工具,名为 “Pixel Pen Tool”。这款插件十分方便,能够自动添加 _pixel 字符形,也能即时处理很多字体信息设定,比如全身字宽单位数、网格以及垂直量度:

和 Glyphs 里的其他插件一样,你可以从 “窗口 > 插件管理器” 免费获取这款插件。

在插件管理器中,你也能找到 mekkablue 的 “Pixelate” 滤镜。它会插入像素部件、重设字宽,将轮廓字符形转换为像素字符形,并将原始轮廓移动至背景。

用于像素字体的脚本

有一些很方便的脚本可以帮你处理像素字体。在 mekkablue 的 GitHub 库中,你会看到一个 dedicated to pixel fonts 文件夹。要了解更多内容,以及安装说明,请查看 readme 文档。


2016-09-05 更新:添加了插件管理器。
2020-02-17 更新:添加了 “用于像素字体的插件”

Chinese translation by Willie Liu (刘育黎) from 3type (三言).