ゲーム好き、特にファミコン・スーファミ世代の方にはたまらないのがドット絵。
今のものすごくリアルなゲーム画面を見慣れている若い人たちの中には、もしかしたら「ドット絵ってなに？」って人もいるかもしれませんが、8ビット全盛期のゲームを遊び倒してきた人たちにとって、ドット絵は当時の懐かしい記憶を蘇らせるトリガーなわけです。
まさにノスタルジー！（はじめて使った）
ということで、妙にレトロスイッチが入っちゃったんで、今回のアイキャッチはドット絵で作成してみました。
いやー、大変だった。
こうね、まず始めに正方形を描いてね、で、それをコピペしてはつなげコピペしてはつなげ……って、
そんなメンドクセーことできるかーーーー！！
（本当にそうやって作業してる人にはごめんなさい）
実は、Illustratorの機能を使えば、今回のアイキャッチのようなドット絵が簡単に作れちゃうんです。
作り方を覚えれば、あとは自分の好きなようにアレンジできちゃうんで、気になった方はぜひ挑戦してみてください。
スポンサーリンク
イラストをドット絵にする
ドット絵にしたいイラスト・写真を準備しましょう。
今回は、アイキャッチにも使ったこのブログのマスコットキャラ「ウッチくん」を例に解説していきます。
ウッチくん
まず、イラストをラスタライズします。
オブジェクトを選択し、メニューから『オブジェクト→ラスタライズ』という順にクリックして進みましょう。
オブジェクトを選択し、メニューから『オブジェクト→ラスタライズ』という順にクリック
「ラスタライズ」のウィンドウが開きます。
[解像度]で『高解像度（300ppi）』を選択し、『OK』ボタンをクリックしましょう。
![[解像度]で『高解像度（300ppi）』を選択し、『OK』ボタンをクリック](https://ring-of-life.com/wp/wp-content/uploads/2016/12/illustrator-dot-design3.jpg)
[解像度]で『高解像度（300ppi）』を選択し、『OK』ボタンをクリック
次に、ラスタライズしたオブジェクトにモザイクをかけます。
オブジェクトを選択し、メニューから『オブジェクト→モザイクオブジェクトを作成』という順にクリックして進みます。
（バージョンがCS3以前なら、『フィルタ→クリエイト→モザイク』）
オブジェクトを選択し、メニューから『オブジェクト→モザイクオブジェクトを作成』という順にクリック
「モザイクオブジェクトを作成」のウィンドウが開きます。
モザイクタイルが正方形になるように「新しいサイズ」や「タイル数」の数値を調整します。
モザイクタイルが正方形になるように「新しいサイズ」や「タイル数」の数値を調整
今回の場合だと、10×10pxのモザイクタイルを作りたいので、
- タイル数の幅
594（新しいサイズの幅）÷ 10（モザイクタイルの幅）= 59.4 - タイル数の高さ
1000（新しいサイズの高さ）÷ 10（モザイクタイルの高さ）= 100
以上の数値をタイル数の幅・高さの欄にそれぞれ入力しています。
（タイル数の幅に59.4と入力して実行してみましたが、小数点以下は切り捨てられるようです。）
数値の調整が完了したら、『ラスタライズデータを削除』にチェックを入れ、『OK』ボタンをクリックしましょう。
すると、以下のようなドット絵ができあがります。
ウッチくん ドット絵ver.
タイルもほぼ正方形に出来ていますね。
正方形のモザイクタイル
ちなみに、タイル数を変えれば、細かいドット絵から粗いドット絵まで自由にアレンジすることができます。
ドットモザイクになったオブジェクトはグループ化されているので、グループ化を解除しておきましょう。
グループ化を解除するには、オブジェクトを選択した状態で、
メニューから『オブジェクト→グループ解除』という順にクリックするか、「Shift + Ctrl（MacならCommand）+ G」キーを押すと解除できます。
写真をドット絵にする
応用編として、写真をドット絵に変えてみようと思います。
ここでは、以下の写真を例に解説していきます。
ファミコン
パスデータの場合は、ラスタライズして画像データに変換しておいてください。
イラストの時と同様、メニューから『オブジェクト→モザイクオブジェクトを作成』という順にクリックして進み、モザイクタイルが正方形になるように「新しいサイズ」や「タイル数」の数値を調整します。
数値の調整が完了したら、『ラスタライズデータを削除』にチェックを入れ、『OK』ボタンをクリックしましょう。
「新しいサイズ」や「タイル数」の数値を調整
すると、以下のように写真でも簡単にドット絵に変えることができます。
ファミコン ドット絵ver.
スポンサーリンク
さまざまな応用
今回紹介した機能を使えば、ファミコン風以外のドット絵を作ることも可能です。
四角いモザイク柄
先ほど作成したファミコンのドット絵を例に解説します。
オブジェクトを全て選択し、メニューから『オブジェクト→変形→個別に変形』という順にクリックして進みます。
オブジェクトを全て選択し、メニューから『オブジェクト→変形→個別に変形』という順にクリック
以下のようなウィンドウが開きます。
ここで、[拡大・縮小]の水平方向と垂直方向の比率を80%ほどに縮小してみましょう。
![[拡大・縮小]の水平方向と垂直方向の比率を80%ほどに縮小](https://ring-of-life.com/wp/wp-content/uploads/2016/12/illustrator-dot-design11.jpg)
[拡大・縮小]の水平方向と垂直方向の比率を80%に縮小
すると、以下のようにそれぞれのドットが強調されたモザイク柄が完成します。
ドットが強調されたモザイク柄のファミコン
丸いモザイク柄
タイルをひとつ選択して大きさを確認します。
タイルをひとつ選択して大きさを確認
タイルの大きさを確認したら、オブジェクトを全て選択して、
メニューから『効果→形状に変換→楕円形』という順にクリックして進みます。
オブジェクトを全て選択し、メニューから『効果→形状に変換→楕円形』という順にクリック
「形状オプション」のウィンドウが開くので、『値を指定』を選択し、「幅」と「高さ」を先ほど調べたひとつのタイルの「幅」と「高さ」と同じくらいにします。
設定が完了したら、『OK』ボタンをクリックしましょう。
「幅」と「高さ」を先ほど調べたひとつのタイルの「幅」と「高さ」と同じくらいにする
すると、以下のように丸いモザイク柄のドット絵が完成します。
丸いモザイク柄のファミコン
星柄
オブジェクトを全て選択して、
メニューから『効果→パスの変形→パンク・膨張』という順にクリックして進みます。
オブジェクトを全て選択し、メニューから『効果→パスの変形→パンク・膨張』という順にクリック
「パンク・膨張」のウィンドウが開くので、スライダーのカーソルを「収縮」の方にスライドさせます。
（スライダー横の入力欄に任意の数値を入力してもOKです。）
スライダーのカーソルを「収縮」の方にスライド
スライドさせたら『OK』ボタンをクリックしましょう。
すると、以下のようにキラキラした星柄のドット絵が完成します。
星柄のファミコン
花柄
オブジェクトを全て選択して、
メニューから『効果→パスの変形→パンク・膨張』という順にクリックして進みます。
オブジェクトを全て選択し、メニューから『効果→パスの変形→パンク・膨張』という順にクリック
「パンク・膨張」のウィンドウが開くので、スライダーのカーソルを「膨張」の方にスライドさせます。
（スライダー横の入力欄に任意の数値を入力してもOKです。）
スライダーのカーソルを「膨張」の方にスライド
スライドさせたら『OK』ボタンをクリックしましょう。
すると、以下のような可愛らしい花柄のドット絵が完成します。
花柄のファミコン
まとめ
今回は、Illustratorでイラスト・写真をファミコン風のドット絵にする方法を解説しました。
本当に驚くほど簡単にできるので、気になった方はぜひやってみてください。
色んな画像をドット絵に変えて、自分好みにアレンジするのもすっごく楽しいですよ！
また、ドット絵と相性バッチリなゲームフォントもまとめて紹介してますので、こちらの記事もぜひ見てみてください。
Photoshopでドット絵を描く方法はこちら！
