Skip to main content

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

???? Herramienta TEXTO en PHOTOSHOP | curso de Photoshop ⭐⭐⭐⭐⭐ (六月 2025)

???? Herramienta TEXTO en PHOTOSHOP | curso de Photoshop ⭐⭐⭐⭐⭐ (六月 2025)
Anonim

虽然设计一种能够以各种尺寸有效工作的字体,但精心制作的字母字距很难磨练,这个快速有趣的项目将向您展示如何使用Inkscape和fontastic.me创建自己的手写字体,给出你自己独特的字体。 fontastic.me的主要目的是为网站生成图标字体,但您可以创建一个字母字体,可用于生成标题或少量文本。

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

出于本教程的目的,我们将跟踪一些书面信件的照片,但您可以轻松地调整此技术并直接在Inkscape中绘制您的字母。对于使用绘图板的人来说,这可能特别有效。

05年1月1日

导入书面字体的照片

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

如果您要创建自己的,请使用深色墨水和白纸以获得强烈的对比度,并在光线充足的情况下拍摄完成的字母。此外,尽量避免使用字母中的任何封闭空格,例如“O”,因为这会在准备跟踪字母时使生活更加复杂。

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

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

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

05年02月02日

跟踪照片以创建矢量线字母

在开始之前查看跟踪位图图形的过程是个好主意。

单击照片以确保它已被选中,然后转到“路径”>“跟踪位图”以打开“跟踪位图”对话框。在这里,我们将所有设置保留为默认设置,并产生了良好,干净的结果。您可能需要调整曲线设置,但您可能会发现使用更好的光线再次拍摄照片更容易产生对比度更强的图像。

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

05年3月

将跟踪拆分为单个字母

此时,所有字母都连接在一起,因此请转到Path> Break Apart将它们分成单个字母。请注意,如果您的字母由多个元素组成,则这些字母也会被拆分为单独的元素。在我们的示例中,这适用于每个字母,因此在此阶段将每个字母组合在一起是有意义的。

要执行此操作,只需在字母周围单击并拖动选择框,然后转到对象>组或按Ctrl + G或Command + G,具体取决于您的键盘。

显然,您只需要使用包含多个元素的字母来执行此操作。在创建字母文件之前,我们会将文档重新调整为合适的大小。

05年4月

设置文档大小

您需要将文档设置为合适的大小,因此请转到“文件”>“文档属性”,然后在对话框中根据需要设置“宽度”和“高度”。我们将我们设置为500px乘500px,但理想情况下,您可以为每个字母设置不同的宽度,以便最后的字母更整齐地组合在一起。

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

05年05月05日

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

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

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

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

然后转到文件>另存为,并为该文件指定一个有意义的名称。我们称之为a.svg - 确保文件后缀为.svg。

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

最后,您可能需要考虑生成标点符号,但您肯定需要空格字符。对于空格,只需保存空白页。此外,如果你想要大写和小写字母,你也需要保存所有这些。

现在您可以访问fontastic.me并创建您的字体。您可以在随附文章中了解有关此过程的一些内容,该文章介绍了如何使用fontastic.me制作字体。