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

01/06

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

テキストと画像©Ian Pullen

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

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

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

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

次のいくつかのページでは、最初のフォントを作成するプロセスについて説明します。

02の06

空白の文書を開く

テキストと画像©Ian Pullen

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

[ファイル]> [新規作成]の順に進み、ダイアログボックスで必要に応じてサイズを設定します。 私は500pxの正方形のページサイズを使いましたが、あなたはこれを必要に応じて設定することができます。

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

03/06

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

テキストと画像©Ian Pullen

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

ファイルをインポートするには、ファイル/場所に移動して、手書きテキストの写真の場所に移動します。 [配置]ボタンをクリックすると、写真がドキュメントに表示されます。

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

04/06

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

テキストと画像©Ian Pullen

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

Object> Live Trace> Make and Expandに行き、しばらくすると、すべての文字が新しいベクターラインバージョンで上書きされていることがわかります。 あまり明白でないのは、写真の背景を表す別のオブジェクトに囲まれているということです。 バックグラウンドオブジェクトを削除する必要があるので、オブジェクト>グループ解除の順に進み、すべての選択を解除するために、四角形の外枠の外側をクリックします。 今すぐ近くにクリックしますが、文字の1つではなく、長方形の背景が選択されていることを確認してください。 キーボードのDeleteキーを押すだけで削除できます。

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

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

関連項目: Illustratorでライブトレースを使用する

05/06

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

テキストと画像©Ian Pullen

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

最初に、すべての文字を選択してドラッグし、アートボードを重ねて置かないようにします。 次に、最初の文字をアートボード上にドラッグし、コーナーのドラッグハンドルの1つをドラッグしてアートボードに塗りつぶします。 Shiftキーを押しながら同じ倍率を維持します。

完了したら、[ファイル]> [名前を付けて保存]に移動して、ダイアログボックスの[形式]ドロップダウンリストをSVG(svg)に変更し、ファイルに意味のある名前を付けて[保存]をクリックします。 その文字を削除して、アートボード上の次の文字を置き換えてサイズを変更することができます。 もう一度名前を付けて保存を実行し、すべての手紙を保存するまで続けます。

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

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

06の06

Adobe Illustrator CC 2017の新しい資産書き出しパネルの使用方法

SVGの作成は、Adobe Illustrator CC 2017の新しいAsset Exportパネルで、クリックアンドドラッグのワークフローになります。

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

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