使用Inkscape和Fontastic.me创建您自己的字体

在本教程中,我将向您展示如何使用Inkscape和fontastic.me创建自己的手写字体。

如果您不熟悉这些, Inkscape是一款免费的开源矢量线绘图应用程序,适用于Windows,OS X和Linux。 Fontastic.me是一个提供各种图标字体的网站,但也允许您上传自己的SVG图形,并将它们转换为免费的字体。

虽然设计一种能够以各种尺寸有效工作的字体,精心制作的字母字距调整技术可能需要数年的磨练,但这是一个快速且有趣的项目,它将为您提供独特的字体。 fontastic.me的主要目标是为网站制作图标字体,但是您可以创建一个可用于生成标题或少量文本的字母字体。

为了本教程的目的,我将追踪一些书面信件的照片,但您可以轻松调整此技巧,并直接在Inkscape中绘制您的字母。 对于使用绘图平板电脑的用户来说,这可能特别有效。

在下一页中,我们将开始创建我们自己的字体。

05年1月

导入您的书写字体的照片

文字和图片©Ian Pullen

如果你想跟随,你需要一些绘制字母的照片,如果你不想自己创建,你可以下载并使用包含大写字母AZ的a-doodle-z.jpg。

如果您打算自己创作,请使用深色墨水和白纸进行强烈对比,并在完好的灯光下拍摄完整的字母。 另外,请尽量避免字母中的任何封闭空间,例如'O',因为在准备您的跟踪字母时,这会使生活更加复杂。

要导入照片,请转到文件>导入,然后导航到照片并单击打开按钮。 在下一个对话框中,我建议您使用Embed选项。

如果图像文件非常大,可以使用“视图”>“缩放”子菜单中的选项缩小图像大小,然后通过单击一次即可重新调整大小,以在每个角落显示箭头手柄。 点击并拖动一个手柄,同时按住Ctrl或Command键,它将保持其原始比例。

接下来,我们将追踪图像以创建矢量线字母。

05年05月

追踪照片以创建矢量线条字母

文字和图片©Ian Pullen

我之前在Inkscape中描述了跟踪位图图形 ,但会在此处再次快速描述该过程。

点击照片以确保它已被选中,然后转到路径>跟踪位图打开跟踪位图对话框。 在我的情况下,我将所有设置都保留为默认值,并且产生了一个很好的,干净的结果。 您可能需要调整跟踪设置,但是您可能会发现使用更好的照明再次拍摄照片以生成对比度更强的图像更容易。

在屏幕截图中,您可以看到我从原始照片中拖走的跟踪字母。 跟踪完成后,这些字母将直接放在照片上,因此它们可能不是很明显。 在继续之前,您可以关闭“跟踪位图”对话框,并单击照片将其选中,然后单击键盘上的“删除”键将其从文档中删除。

05年3月

将追踪分解为单独的字母

文字和图片©Ian Pullen

在这一点上,所有的字母连接在一起,所以去Path> Break Apart将它们分成单独的字母。 请注意,如果您的字母由多个元素组成,则这些字母也将被拆分为不同的元素。 就我而言,这适用于每个字母,所以在这个阶段将每个字母分组在一起是有意义的。

为此,只需单击并拖动字母周围的选区框,然后转到“对象”>“组”或按Ctrl + G或“Command + G”,具体取决于您的键盘。

显然,你只需要用包含多个元素的字母来做到这一点。

在创建字母文件之前,我们会将文档重新调整为合适的大小。

04年05月

设置文档大小

文字和图片©Ian Pullen

我们需要将文档设置为合适的大小,因此请转至文件>文档属性,然后在对话框中根据需要设置宽度和高度。 我将我的图片设置为500px,最好是500px,但最好是为每个字母设置不同的宽度,以便最后的字母更加整齐。

接下来,我们将创建将被上传到fontastic.me的SVG字母。

05年05月

为每个字母创建单独的SVG文件

文字和图片©Ian Pullen

Fontastic.me要求每个字母都是独立的SVG文件,因此我们需要在按下之前生成这些文件。

拖动所有字母,使其位于页面边缘之外。 Fontastic.me忽略页面区域之外的任何元素,所以我们可以将这些字母放在这里没有任何问题。

现在将第一个字母拖到页面中,并使用拐角处的拖动手柄根据需要重新调整大小。

然后转到文件>另存为,然后为该文件指定一个有意义的名称。 我打电话给我的a.svg - 确保该文件具有.svg后缀。

您现在可以移动或删除第一个字母,并将第二个字母放在页面上,然后再次进入文件>另存为。 你需要为每个字母做这个。 如果您比我更耐心,那么您可以调整页面的宽度以便更好地匹配每个字母。

最后,你可能想考虑制作标点符号,尽管你一定会想要一个空格字符。 对于一个空间,只需保存一个空白页。 另外,如果你想要大写和小写字母,你也需要保存所有这些。

现在您可以访问fontastic.me并创建您的字体。 我在一篇附文中解释了这个过程,解释了如何使用该网站制作你的字体: 使用Fontastic.me创建一个字体