Skip to main content

IllustratorとFontastic.meを使って手描きのフォントを作成する

【Photoshop講座】フォントでつくる!夜を彩るネオンサイン (六月 2026)

【Photoshop講座】フォントでつくる!夜を彩るネオンサイン (六月 2026)
Anonim

このチュートリアルでは、IllustratorとオンラインWebサービスfontastic.meを使用して独自のフォントを作成する方法を紹介します。

Adobe Illustratorのコピーが必要ですが、コピーがなくても購入したくない場合は、Inkscapeを使用した同様のチュートリアルに興味があります。 Inkscapeは、Illustratorのフリーでオープンソースの代替品です。どちらのベクトル線描画アプリケーションを使用しても、fontastic.meはそのサービスを完全に無料で提供します。

紙に描かれた文字の写真を使って手描きフォントを作成する方法を紹介しますが、Illustratorに直接描画された文字を使って同様のテクニックを使ってフォントを作成することもできます。あなたが描画タブレットを使用している場合は、これが望ましいかもしれません。

写真を使用する場合は、暗い色のペンを使用して文字を描画し、コントラストを最大限に高めるために白い紙を使用してください。また、Illustratorが個々の文字を辿るのができるだけ簡単になるように、明瞭でコントラストのある写真を作成するために、写真をよく撮ります。

空白の文書を開く

最初のステップは、作業するために空のファイルを開くことです。

に行く ファイル>新規 ダイアログで希望のサイズを設定します。正方形のページサイズ500pxを使用しましたが、これは必要に応じて設定できます。

次に、写真ファイルをIllustratorに読み込みます。

手描きの写真をインポートする

手書きテキストの写真がない場合は、このチュートリアルで使用したのと同じファイルをダウンロードできます。

ファイルをインポートするには、にアクセスしてください。 ファイル>プレイス 手描きのテキストの写真がどこにあるのかに移動します。クリック 場所 ボタンを押すと、ドキュメントに写真が表示されます。

これで、このファイルをトレースしてベクトル文字を入力することができます。

手描きの手紙の写真をトレースする

手紙をたどることはとても簡単です。

ちょうどに行く オブジェクト>ライブトレース>作成と展開 しばらくすると、すべての文字が新しいベクターラインバージョンでオーバーレイされていることがわかります。あまり明白でないのは、写真の背景を表す別のオブジェクトに囲まれているということです。バックグラウンドオブジェクトを削除する必要があります。 オブジェクト>グループ解除 四角形の外枠の外側をクリックすると、すべての選択が解除されます。今すぐ近くにクリックしますが、文字の1つではなく、長方形の背景が選択されていることを確認してください。ちょうど 削除 キーボードのキーを押して削除します。

しかし、あなたの手紙のいずれかに複数の要素が含まれている場合は、それらをまとめてグループ化する必要があります。すべての手紙には複数の要素が含まれているので、それらをすべてグループ化しなければなりませんでした。これは、文字の異なる部分をすべて囲む選択マーキーをクリックしてドラッグし、次に オブジェクト>グループ.

個々の文字をすべて残し、次にこれらを使ってfontastic.me上にフォントを作成するために必要な個々のSVGファイルを作成します。

関連する:IllustratorでLive Traceを使用する方法を学ぶこともできます。

個々の文字をSVGファイルとして保存する

残念なことに、Illustratorでは、複数のアートボードを個々のSVGファイルに保存することはできないため、それぞれの文字を別々のSVGファイルとして手動で保存する必要があります。

まず、すべての文字を選択してドラッグし、アートボードにオーバーレイしないようにします。次に、最初の文字をアートボード上にドラッグし、コーナーのドラッグハンドルの1つをドラッグしてアートボードに塗りつぶします。押さえつける シフト キーを押しながら同じ比率を維持します。

完了したら、に行きます ファイル>名前を付けて保存 ダイアログで、 フォーマット にドロップダウン SVG (svg)、ファイルに意味のある名前を付けて 保存する。その文字を削除して、アートボード上の次の文字を置き換えてサイズを変更することができます。やり直す 名前を付けて保存 すべての手紙を保存するまで続行してください。

最後に、続行する前に、空白文字として使用できるように空のアートボードを保存します。あなたの手紙の句読点と小文字のバージョンを保存することを検討することもできますが、このチュートリアルでは心配していません。

これらの別々のSVG文字ファイルを用意して、fontastic.meにフォントをアップロードして作成することができます。 fontastic.meを使用してフォントを完成させる方法については、この記事をご覧ください。 Fontastic.meを使ってフォントを作成する。

新しい資産のエクスポートパネルを使用する

現在のバージョンのAdobe Illustratorには、すべての図面を1つのアートボードに配置して個別のSVGドキュメントとして出力できる新しいパネルが含まれています。方法は次のとおりです。

  1. 選択 ウィンドウ>資産のエクスポート Asset Exportパネルを開きます。
  2. 1つまたはすべての文字を選択してパネルにドラッグします。それらはすべて個別のアイテムとして表示されます。
  3. パネル内のオブジェクトの名前をダブルクリックし、名前を変更します。パネル内のすべての項目に対してこれを行います。
  4. エクスポートする項目を選択して選択します。 SVG から フォーマット ポップダウン。
  5. クリック 輸出する.