InkscapeとFontastic.meを使って独自のフォントを作成する

このチュートリアルでは、Inkscapeとfontastic.meを使用して手書きフォントを作成する方法を説明します。

あなたがこれに慣れていない場合、 Inkscapeは、Windows、OS X、Linuxで利用できる無料のオープンソースベクターライン描画アプリケーションです。 Fontastic.meは、さまざまなアイコンフォントを提供するウェブサイトですが、独自のSVGグラフィックスをアップロードして無料でフォントに変換することもできます。

慎重に作成された文字のカーニングでさまざまなサイズで効果的に動作するフォントを設計するには、磨くには何年もかかるスキルが必要ですが、これは素早く楽しいプロジェクトです。 fontastic.meの主な目的は、ウェブサイト用のアイコンフォントを作成することですが、見出しや少量のテキストを作成するために使用できる文字フォントを作成することができます。

このチュートリアルの目的のために、私は書かれた手紙の写真を辿るつもりですが、このテクニックを簡単に適用してInkscapeで手紙を直接描くことができます。 これは、 描画タブレットを使用する人にとって特に効果的です。

次のページでは、独自のフォントの作成を開始します。

05の01

あなたの書いたフォントの写真をインポートする

テキストと画像©Ian Pullen

あなたが一緒にしたい場合は、いくつかの手紙の写真が必要になりますし、自分で作ってみたくない場合は、大文字のAZを含むa-doodle-z.jpgをダウンロードして使用することができます。

自分で作成する場合は、暗い色のインクと白い紙を使用してコントラストを強くし、完成した文字を良好な状態で撮影します。 また、 'O'のような文字の閉じたスペースを避けてください。これは、トレースされた文字を準備するときに人生をより複雑にするためです。

写真を読み込むには、[ファイル]> [読み込み]の順に進み、写真に移動して[開く]ボタンをクリックします。 次のダイアログでは、埋め込みオプションを使用することをお勧めします。

画像ファイルが非常に大きい場合は、[表示]> [ズーム]サブメニューのオプションを使用してズームアウトし、一度クリックして各コーナーに矢印ハンドルを表示してサイズを変更できます。 CtrlキーまたはCommandキーを押しながらハンドルをクリックしてドラッグすると、元の比率が維持されます。

次に、ベクトル線の文字を作成するために画像をトレースします。

05の02

写真をトレースしてベクターラインレターを作成する

テキストと画像©Ian Pullen

私はこれまでInkscapeビットマップグラフィックのトレースを説明してきましたが、ここでプロセスを簡単に説明します。

写真がクリックされていることを確認したら、[パス] - [ビットマップのトレース]を選択し、[ビットマップのトレース]ダイアログを開きます。 私の場合は、すべての設定をデフォルトにしておき、良い結果が得られました。 トレースの設定を調整する必要があるかもしれませんが、より明るいコントラストの画像を作成するために、写真を再度撮影する方が簡単です。

スクリーンショットでは、元の写真からドラッグしたトレースされた文字を見ることができます。 トレースが完了すると、手紙は写真の上に直接配置されるので、あまり目立たないかもしれません。 移動する前に、[ビットマップのトレース]ダイアログを閉じて、写真をクリックして選択し、キーボードのDeleteキーをクリックしてドキュメントから削除することもできます。

03/05

トレースを個々の文字に分割する

テキストと画像©Ian Pullen

この時点で、すべての文字が結合されているので、パス>分割して個別の文字に分割します。 2つ以上の要素で構成された文字がある場合、それらも別々の要素に分割されていることに注意してください。 私の場合、これはすべての手紙に適用されるので、この段階で各手紙をまとめることは意味があります。

これを行うには、文字を囲む選択マーキーをクリックしてドラッグし、キーボードに応じてオブジェクト>グループに移動するか、Ctrl + GまたはCommand + Gを押します。

明らかに、複数の要素を含む文字でこれを行うだけです。

レターファイルを作成する前に、適切なサイズにドキュメントのサイズを変更します。

04/05

ドキュメントサイズを設定する

テキストと画像©Ian Pullen

ドキュメントを適切なサイズに設定する必要があるので、[ファイル]> [ドキュメントのプロパティ]に移動し、ダイアログで必要に応じて幅と高さを設定します。 500pxで500pxに設定しましたが、最終的な文字がよりきれいにフィットするように、各文字の幅を違うように設定するのが理想的です。

次に、fontastic.meにアップロードされるSVG文字を作成します。

05/05

各レターの個別SVGファイルを作成する

テキストと画像©Ian Pullen

Fontastic.meでは、それぞれの文字を別々のSVGファイルにする必要があるので、これを押す前にこれらを生成する必要があります。

すべての文字をドラッグして、ページの端の外側に配置します。 Fontastic.meはページ領域外にある要素を無視するので、ここには問題なく駐車できます。

最初の文字をページにドラッグし、角のドラッグハンドルを使用して必要に応じてサイズを変更します。

次に、[ファイル]> [名前を付けて保存]に移動し、ファイルに意味のある名前を付けます。 私はmine a.svgと呼んでいます - ファイルに.svgサフィックスが付いていることを確認してください。

これで、最初の文字を移動または削除して2番目の文字をページに置き、[ファイル]> [名前を付けて保存]に再度移動できます。 あなたはそれぞれの手紙のためにこれを行う必要があります。 あなたが私よりも忍耐力を持っているならば、あなたはそれぞれの手紙によく合うようにページの幅を調整するかもしれません。

最後に、句読点を作成することを検討することをお勧めしますが、間違いなくスペース文字が必要です。 スペースの場合は、空のページを保存するだけです。 また、大文字と小文字が必要な場合は、これらのすべてを保存する必要があります。

今度はfontastic.meを訪問してフォントを作成することができます。 私は、フォントを作成するためにそのサイトを使用する方法を説明した付随する記事で、このプロセスについて少し説明しました: Fontastic.meを使用してフォントを作成する