使用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創建一個字體