自分の文字をフォントにする方法【手書き】Procreate×Adobe Illustrator×IcoMoon

Procreate
スポンサーリンク

自分で書いた文字をフォントとして使用できるようにする方法をご紹介します。今回はProcreateで書いた文字をフォントにするので、紙に書いた文字をスキャンしてデータ化する方法はご紹介しておりません。

ProcreateとはiPad専用の有料イラスト制作アプリです。ブラシの種類が豊富で、Apple Pencilを使えば力の入れ方次第で線に強弱をつけることもできます。アニメーション機能にも対応しています。
ゴリたみ
ゴリたみ

難しそうだね!

文字を書いてパス化してicomoonにアップロードしてダウンロードするだけだよ!

うーたみ
うーたみ

1000x1000pxキャンバスに文字を書く

キャンバスサイズ1000x1000px(RGB)を立ち上げて文字を書きます。レイヤーを追加してフォントにしたい文字を書きます。今回は英数字と書きやすい記号のみフォントにしますが、日本語にも対応させたい場合は漢字、ひらがな、カタカナを書いてください。

目印をつけてあげるとサイズ感を統一することができます。特に下のラインをそろえてあげるとフォントにしたときに文字の位置がそろって入力されます。

ゴリたみ
ゴリたみ

1キャンバス1文字じゃなくていいの?

レイヤーごとに1つの画像としてまとめて保存することができるから大丈夫だよ!でもレイヤーの上限があるからアルファベット大文字、小文字とキャンバスをわけてもいいかもね!

うーたみ
うーたみ

PNGファイルで書き出す

全てのレイヤーにチェックを入れてて表示した状態にします。背景色からチェックを外し背景を透過したら「🔧設定」>「共有」>「PNGファイル」からPCと共有できるファイルに保存します。保存ができたらAdobe Illustrationを立ち上げます。

ゴリたみ
ゴリたみ

PNGファイルで書き出すとすべてのレイヤーが1枚1枚の画像として保存ができるよ!

OneDriveに保存したよ!

うーたみ
うーたみ

書き出しファイル形式についてはこちらの記事をご覧ください。

文字の数だけアートボードを用意する

Adobe Illustrationを立ち上げて「新規ファイル」から幅1000x高さ1000pxの正方形のアートボードを作成します。「ウィンドウ」>「アートボード」から新規アートボードを文字の数だけ作成します。

アートボードを整列させるにはアートボードのメニューから「すべてのアートボードを再配置」をクリックして「横列数」に横に並べる数を入力して「OK」をクリックします。

アートボード中央中心に配置する

保存した文字をアートボードに配置します。「ファイル」>「配置」から保存した画像を配置します。ドラッグすると複数の画像を一度に選択することができます。

クリックして配置していきます。このとき配置する位置がずれていても大丈夫です。全て配置できたら位置を揃えます。画像をクリックして「プロパティー」から中心中央にするアイコンをクリックします。

ゴリたみ
ゴリたみ

1つずつ中心中央にするの?

まとめてできる方法があるかもしれないけど、わからなかったから1つずつ配置したよ。

うーたみ
うーたみ

パス化する:トレース>拡張

読み込んだ文字は画像なのでパス化します。パス化とはざっくりと画像を図形化することです。人間は画像に書かれている文字を読むことができますが、パソコンはパス化して図形にしてあげないと画像に書かれている文字がどんな形がわかりません。

「ウィンドウ」>「画像トレース」からプリセット「白黒のロゴ」カラーモード「白黒」を選択して「トーレス」をします。次に「プロパティ」から「拡張」をします。これでパス化ができました。

文字以外の白い部分もパス化されているので「レイヤー」から白い部分のレイヤーを削除します。

SVG形式で書き出す

全ての文字画像の配置、パス化、白い部分を削除ができたらアートボードごとにSVGで書き出します。「ファイル」>「別名で保存」からファイル形式「SVG」を選択して「アートボードごとに書き出す」「すべて」にチェックをいれて保存します。範囲を指定して保存する場合は「範囲」にチェックをいれて書き出すアートボードを指定してください。

SVGで書き出すファイルを保存するフォルダーを作成しておくとicomoonにアップロードするときに楽だよ!

うーたみ
うーたみ

IcoMoon

IcoMoonは自作の文字/アイコンをWebフォントにすることができるアプリです。検索エンジンで「icomoon」と検索して「Icon Font & SVG Icon Sets IcoMoon」をクリックしてサイトを開て画面右上の「IcoMoon App」をクリックします。

画面左上の「Import Icons」からさきほど保存したSVGファイルを全てインポートします。ドラッグしてファイルを全て選択するか、「Ctrl」「A」で全選択して開きます。

フォントにしたい文字を選択します。選択すると枠が黄色になります。上記画像の赤枠部分は未選択なのでフォントにならない文字です。

画面右下の「Generate Font F」をクリックします。

SVGに文字を割り当てます。

ゴリたみ
ゴリたみ

割り当てられた文字が入力されたら、そのSVGの文字になるんだね!

「Download」の横にある設定マークをクリックしてフォントの名前を入力します。

ゴリたみ
ゴリたみ

なんで「UT-Hbold03」なの?

「UTami-Handwriting bold」でうーたみの太字の手書き文字ってことだよ!数字にも対応してることがわかるように好きな数字もフォント名に入れたよ!

うーたみ
うーたみ

「Download」します。

ダウンロードしたZipファイルを開いて「fonts」>「フォント名(種類True Type フォントファイル)」を開いたら「インストール」をクリックして完了です。

Wordなどから文字を入力して自作のフォントにすることができます。

Procreateに自作フォントを取り込む

ZipファイルをiPadと共有できるフォルダーに移動します。今回はOneDriveにZipファイルを移動する手順をご紹介します。

ダウンロードしたZipフォルダーはエクスプローラーのダウンロードフォルダーに入っているのでOneDriveに移動します。

iPadからOneDriveを開いてZipファイルをファイルアプリに保存します。保存先は「このiPad内」>「Procraete」>「Fonts」にします。

ファイルアプリを立ち上げてZipフォルダーをタップして解凍します。

フォルダーが解凍されると同じ名前のフォルダができているのでタップして「fonts」>「プロクリエイトのマークがあるファイル」ダブルタップするとプロクリエイトが起動してフォントが読み込まれます。

詳しいフォントのインストール方法についてはこちらをご覧ください。ダブルタップしてもフォントが読み込まれない場合にプロクリエイトからフォントを読み込む方法もご紹介してます。

是非自作フォントを作成してみてください!イラストに追加してもかわいいです☆

タイトルとURLをコピーしました