Illustratorで簡単にドット絵風の文字を作成する方法

全記事

普段使っているお気に入りのフォントを、Adobe Illustrator(イラストレーター)を使って、簡単にドット絵風に変換することが出来ます。
今回はドット絵風の文字を作成する方法をご紹介します

設定が面倒な方や読んでも分からないという方もご安心ください。今回作成したaiファイルをページの最後で配布しているので、ダウンロードしてaiファイルを開いてお試しください。

テキストオブジェクトを作成

まずはじめに、テキストオブジェクトを作成します。文字ツール(T)を使用して文字を打ち込みます

書体は小塚ゴシックのRの太さで、文字のサイズを40ptに設定しました。文字パネルから情報の確認と調整が出来ます。

アピアランスの「ラスタライズ表示」を使用

上部メニューのウィンドウ内のアピアランスにチェックを付けてをアピアランスパネルを表示します

テキストを選択してから、アピアランスパネル左下の新規効果を追加をクリックします

ラスタライズをクリックしてラスタライズ効果の設定画面を表示させます

アピアランスのラスタライズの設定値について

解像度

解像度が低いほど荒いドットになります。細かなドットが良い場合は解像度を上げます。72ppiを基準に調整するのがオススメです。

アンチエイリアス

アンチエイリアスは、なしに設定します。輪郭をなめらかに見せる効果のあるアンチエイリアスですが、今回のドット表現には不要です

クリッピングマスクを作成

クリッピングマスクを作成にチェックを付けるようにします。
オブジェクトの周囲の追加設定は0にします。
この設定をしない場合、ラスタライズの効果を確定したときに余白が出来てしまいます

文字にラスタライズ効果がかかりました

ラスタライズ効果がかかり、Happy halloween文字がドットに変換されました

アピアランスパネルの効果は調整が何度でも可能

A.ラスタライズ効果の再設定

fxのアイコンをクリックすると、先ほどのラスタライズ効果の設定画面を再度表示させることが出来ます。設定を変えてOKを押すと新しく設定した効果が文字にかかります

B.効果の非表示

目のアイコンをクリックすると、目のアイコンが消えてアピアランスの効果が無効になります。再度クリックすると目のアイコンが表示されてアピアランス効果が有効になります

調整して最適な仕上がりを探す

ドットの荒さを調整しましょう。調整には2つの方法があります、直観的で簡単なのは文字のサイズを変更することです

【方法1】文字のサイズを変更する

文字を小さくして一番好みの仕上がりで止めます。数値の変更は矢印キーの上下でも変更が出来ます。小さくすると文字が重なってしまうので文字の距離を広げました。

【方法2】ラスタライズ効果の解像度を変更する

ドットの効果を確定させる

調整が終わり、仕上がり具合が気に入ったら、ドットの効果を確定させましょう。今のままだと文字のサイズを変更するだけで、ドットのかかり具合が変わってしまいます。

メニューバー > オブジェクト > アピアランスを分割
をクリックしてアピアランスの効果を確定させましょう

分割後は、ラスタライズの設定で画像に変換されます。見た目には変化がありませんが、アピアランスパネルを確認すると、ラスタライズやテキスト、文字がなくなり、グループに置き換わっています

モザイクオブジェクトを使いパスに変換

画像をパス(ベクター形式)に変換します。モザイクオブジェクトの機能を利用してパスに変換します。トレース機能よりもキレイに仕上がり、微調整も出来るようになります。

モザイクオブジェクトとは、画像を細かい正方形のパスに変換し、規則正しく並べます。適切に設定することで、ピクセル化したような効果を加えることが出来ます。

単位をピクセルに変更する

モザイクオブジェクトを作成する時に、変換前の画像のピクセル数が簡単にわかるように、単位をピクセルに変換します。ショットカットキー 【Ctrl + Shift + Alt + U】 で単位が切り替わります。

ダイアログを表示させて変更もできます

ドキュメント設定のダイアログが表示されるので、単位をピクセルに変更してOKをクリックします

モザイクオブジェクトを作成

モザイクオブジェクトにしたい画像(テキスト)を選択して、モザイクオブジェクトを作成をクリックします。

単位がピクセルであることを確認してから、新しいサイズ(現在のサイズ)の数値をそのままタイル数に入力します。変更前の画像が不要の場合は、ラスタライズデータを削除にチェックを付けて、OKをクリックします。

モザイクオブジェクトに変換されました、分かりやすいように背景を灰色にしています。正方形のパスが1ピクセルを表現していることが確認できます

余分な部分を削除

変換後のデータに含まれている余分な部分を削除します。白塗りの正方形はすべて不要なので、共通オブジェクトから選択して削除しましょう

グループ解除をして一つだけ選択

変換後はグループ化されているので、グループ解除を繰り返して、正方形一つだけを選択できる状態にします。

グループ解除の方法
方法1. 右クリック > グループ解除
方法2. メニュバー > オブジェクト > グループ解除
方法3. Ctrl + Shift + G を同時押しのショートカットキー

オブジェクトを選択した状態で、グループ解除をしてください。一番オススメの方法はショートカットキーを利用した方法です。私はいつもショートカットキーを利用しています。

共通アピアランスでまとめて選択する

グループの解除後は、白塗りの正方形をひとつ選択したあと、共通のアピアランスを持つオブジェクトをまとめて選択しましょう。

メニューバー > 選択 > 共通 > アピアランスをクリックするとまとめて選択が出来ます

白い正方形だけが選択されました

Deleteキーを押して削除

Deleteキーを押して削除します。白い正方形だけが削除されて、黒い文字の部分が残りました。のちに作業がしやすいように、グループ化をしておくことをオススメします。

たくさんのバリエーションを作成してみました

いろいろな書体をいろんなサイズで、作ってみました。お気に入りの書体でぜひチャレンジしてみてください。

せっかくなので、こちらのaiファイルを配布させていただきます、ご自身の作品等に、ご自由にお使いください。

★ドット文字 aiファイル テンプレートのダウンロード

↓こちらをクリックでダウンロードできます

エンジェルブログ_ドット絵風フォント.ai

ドット絵効果の確定(アピアランスの分割)をしていませんので、文字を打ち換えたり、フォントの種類を変更するだけで簡単に使用できると思います。

書体はAdobe fontより選び使用しています。adobe有料プランをお使いの方であれば、無料でインストールが出来ると思います。