懐かしいファミコン風の低解像度のドットを組み合わせたデザインを作成したいときもIllustratorが便利です。今回はベクターイラストをドット風のデザインに変えてみたいと思います。アイコンやプロフィール画像に使うと面白いのではないでしょうか。   ちなみに今回はこのようなベクターオブジェクトをサンプルにしましたが、写真などのビットマップ画像からも作成することができます。   まずはベクターオブジェクトにラスタライズを行い、一旦ビットマップデータに変換していきます。設定はデフォルトでOKですが、背景の透過は後から調整しますのでどちらでも大丈夫です。   このようにベクターのオブジェクトからビットマップデータに変換されたのが確認できました。   変換したビットマップデータを選択して、メニューにある「オブジェクト」から「モザイクオブジェクトを作成」をクリックします。   モザイクオブジェクトの設定パネルが表示されます。ここで「タイル数」の項目を目的のデザインに合わせて調整していきます。数字が多ければより細かいドット絵になります。少なければ荒いドット絵を作成することができます。   対象のビットマップが指定したタイル数のベクターオブジェクトがモザイク状に集まったオブジェクトが作成されました。ちなみに元のビットマップも保持される形になります。   背景透過の場合、デフォルトでは白塗りのオブジェクトに置き換えられています。そこで背景部分のオブジェクトを削除します。作成されたモザイクオブジェクトはグループ化されているので、一旦グループ解除します。   削除対象の背景オブジェクトの一部を選択し、メニューの「選択」から「共通」→「カラー（塗り）」をクリックします。   こうすることで、同一レイヤー内で対象と同じ塗りのオブジェクトが全て選択される形になります。一つづつ選択するのは大変なのでこのように一括して選択できると楽ですね。   あとは選択した背景の白塗りオブジェクトを全て削除すればOKです。このように背景が全てなくなりました。   モザイクオブジェクトで作成されるタイルは四角形ですが、パスアピアランスを使うことで円形にすることができます。パスアピアランスについては過去記事「Illustratorのパスアピアランス効果まとめ（ワープ・パスの変形）」もご参考にどうぞ。メニューから「効果」→「形状に変換」→「楕円形」をクリックします。   アピアランスの設定パネルが表示されますので、タイルの大きさに合わせてサイズを調整します。   このようにタイルの数や形状と大きさ、またタイルの並び方や余白を調整することでいろんなドット風デザインを作成することができます。   元のベクターイラストと比べてみると、雰囲気の違いを確認できますね。これらのモザイクオブジェクトは全てベクターなので拡大縮小しても、解像度が落ちることはありません。  

---

  このようなドット絵を作成する際にはIllustratorのモザイクオブジェクト作成機能を使うと、簡単かつスピーディーに作成することができますね。モデルになる素材も写真などのビットマップ画像はもちろんのこと、ベクターオブジェクトも使えますのでどんなイラストや写真もドット風のデザインに仕上げることができます。ぜひ試してみてください。   今回はドット風のデザインを作成しましたが、ポリゴン風のデザインに仕上げる場合にはPhotoshopを使うことで作成することができます。詳しくはこちらの記事「【デザインワークショップ】vol.8　写真をポリゴンデザインに仕上げてみる 」もどうぞ！