自分で書いた文字をフォントとして使用できるようにする方法をご紹介します。今回はProcreateで書いた文字をフォントにするので、紙に書いた文字をスキャンしてデータ化する方法はご紹介しておりません。
ProcreateとはiPad専用の有料イラスト制作アプリです。ブラシの種類が豊富で、Apple Pencilを使えば力の入れ方次第で線に強弱をつけることもできます。アニメーション機能にも対応しています。
難しそうだね！
文字を書いてパス化してicomoonにアップロードしてダウンロードするだけだよ！
目次
1000x1000pxキャンバスに文字を書く
キャンバスサイズ1000x1000px（RGB）を立ち上げて文字を書きます。レイヤーを追加してフォントにしたい文字を書きます。今回は英数字と書きやすい記号のみフォントにしますが、日本語にも対応させたい場合は漢字、ひらがな、カタカナを書いてください。
目印をつけてあげるとサイズ感を統一することができます。特に下のラインをそろえてあげるとフォントにしたときに文字の位置がそろって入力されます。パス化するときにAdobe Illustratorを使うので、そのときにそろえることもできます。
1キャンバス1文字じゃなくていいの？
レイヤーごとに１つの画像としてまとめて保存することができるから大丈夫だよ！でもレイヤーの上限があるからアルファベット大文字、小文字とキャンバスをわけてもいいかもね！
PNGファイルで書き出す
全てのレイヤーにチェックを入れてて表示した状態にします。背景色からチェックを外し背景を透過したら「🔧設定」＞「共有」＞「PNGファイル」からPCと共有できるファイルに保存します。保存ができたらAdobe Illustrationを立ち上げます。
PNGファイルで書き出すとすべてのレイヤーが１枚１枚の画像として保存ができるよ！
OneDriveに保存したよ！
書き出しファイル形式についてはこちらの記事をご覧ください。
文字の数だけアートボードを用意する
Adobe Illustrationを立ち上げて「新規ファイル」から幅1000x高さ1000pxの正方形のアートボードを作成します。「ウィンドウ」＞「アートボード」から新規アートボードを文字の数だけ作成します。
アートボードを整列させるにはアートボードのメニューから「すべてのアートボードを再配置」をクリックして「横列数」に横に並べる数を入力して「OK」をクリックします。
アートボード中央中心に配置する
保存した文字をアートボードに配置します。「ファイル」＞「配置」から保存した画像を配置します。ドラッグすると複数の画像を一度に選択することができます。
クリックして配置していきます。このとき配置する位置がずれていても大丈夫です。全て配置できたら位置を揃えます。画像をクリックして「プロパティー」から中心中央にするアイコンをクリックします。
１つずつ中心中央にするの？
まとめてできる方法があるかもしれないけど、わからなかったから１つずつ配置したよ。
パス化する：トレース＞拡張
読み込んだ文字は画像なのでパス化します。パス化とはざっくりと画像を図形化することです。人間は画像に書かれている文字を読むことができますが、パソコンはパス化して図形にしてあげないと画像に書かれている文字がどんな形がわかりません。
「ウィンドウ」＞「画像トレース」からプリセット「白黒のロゴ」カラーモード「白黒」を選択して「トーレス」をします。次に「プロパティ」から「拡張」をします。これでパス化ができました。
「トレース」がクリックできないときは、「プレビュー」からチェックを外してみてね！
文字以外の白い部分もパス化されているので「レイヤー」から白い部分のレイヤーを削除します。
オブジェクトを右クリックして「グループ解除」をしてからいらない部分を削除してもOKだよ！
SVG形式で書き出す
全ての文字画像の配置、パス化、白い部分を削除ができたらアートボードごとにSVGで書き出します。「ファイル」＞「別名で保存」からファイル形式「SVG」を選択して「アートボードごとに書き出す」と「すべて」にチェックをいれて保存します。範囲を指定して保存する場合は「範囲」にチェックをいれて書き出すアートボードを指定してください。
SVGで書き出すファイルを保存するフォルダーを作成しておくとicomoonにアップロードするときに楽だよ！
IcoMoon
IcoMoonは自作の文字/アイコンをWebフォントにすることができるアプリです。検索エンジンで「icomoon」と検索して「Icon Font & SVG Icon Sets IcoMoon」をクリックしてサイトを開て画面右上の「IcoMoon App」をクリックします。もしくは、下記URLをクリックしてください。
画面左上の「Import Icons」からさきほど保存したSVGファイルを全てインポートします。
ドラッグしてファイルを全て選択するか、「Ctrl」「A」で全選択して開きます。
フォントにしたい文字を選択します。画面上部にある選択アイコンをクリックしてから選択すると枠が黄色になります。
画面右下の「Generate Font F」をクリックします。
SVGに文字を割り当てます。割り当てる前は赤枠部分は「□」になっているので、「□」をクリックして文字を入力します。
割り当てられた文字が入力されたら、そのSVGの文字になるんだね！
「Download」の横にある設定マークをクリックしてフォントの名前を入力します。
なんで「UT－Hbold03」なの？
「UTami-Handwriting bold」でうーたみの太字の手書き文字ってことだよ！数字にも対応してることがわかるように好きな数字もフォント名に入れたよ！好きなフォント名を付けてみてね！
「Download」します。
ダウンロードするとZipフォルダーが画面左下に表示されるのでクリックして開きます。
エクスプローラーの「ダウンロード」からもフォルダーを開くことができるよ！
「fonts」フォルダーをクリックします。
「True Typeフォント ファイル」をクリックします。
「インストール」をクリックして完了です。
Wordなどから文字を入力して自作のフォントにすることができます。
Windowsからダウンロードしたフォントを確認する方法は、「コントロールパネル」＞「デスクトップのカスタマイズ」＞「フォント」から確認できるよ！
Procreateに自作フォントを取り込む
ZipファイルをiPadと共有できるフォルダーに移動します。今回はOneDriveとファイルアプリを使用してフォントをProceateに取り込む方法をご紹介します。
ここまではPCで行うよ！次にiPadから操作するよ！
エクスプローラーを２つ開いて、「ダウンロード」からZipフォルダーを「OneDrive」にドラッグ＆ドロップして移動させます。
OneDriveからZipフォルダーの「…」＞「共有」をクリックします。
Apple Storeから「Microsoft OneDrive」と「ファイル」を入手してね！
iPadからOneDriveを開いてZipファイルをファイルアプリに保存します。
保存先は「このiPad内」＞「Procraete」＞「Fonts」にします。
ここまでがOneDriveだね！
そうだよ！次はファイルアプリから操作するよ！
ファイルアプリを立ち上げてZipフォルダーをタップして解凍します。
タップするだけ？
タップするだかけで解凍されて、同じ名前のフォルダーが作成されるから、フォルダーをタップして開いてね！
フォルダーが解凍されると同じ名前のフォルダができているのでタップして「fonts」を開きます。
「プロクリエイトのマークがあるファイル」をダブルタップするとプロクリエイトが起動してフォントが読み込まれます。
Procreateのマークがないんだけど！
ない場合はファイルの拡張子に「.ttf」があるファイルをダブルクリックするとProcreateが立ち上がるよ！テキストを入力してインストールしたフォントを選択してみてね！
詳しいフォントのインストール方法についてはこちらをご覧ください。ダブルタップしてもフォントが読み込まれない場合にプロクリエイトからフォントを読み込む方法もご紹介してます。
是非自作フォントを作成してみてください！イラストに追加してもかわいいです☆
作成したUt-Hbold03フリーフォントです！ダウンロードして使ってみてください！
コメント