Illustratorで簡単!イラスト・写真をファミコン風のドット絵にする方法

Illustratorで簡単!イラスト・写真をファミコン風のドット絵にする方法

ゲーム好き、特にファミコン・スーファミ世代の方にはたまらないのがドット絵

今のものすごくリアルなゲーム画面を見慣れている若い人たちの中には、もしかしたら「ドット絵ってなに?」って人もいるかもしれませんが、8ビット全盛期のゲームを遊び倒してきた人たちにとって、ドット絵は当時の懐かしい記憶を蘇らせるトリガーなわけです。

まさにノスタルジー!(はじめて使った)

ということで、妙にレトロスイッチが入っちゃったんで、今回のアイキャッチはドット絵で作成してみました。

いやー、大変だった。

こうね、まず始めに正方形を描いてね、で、それをコピペしてはつなげコピペしてはつなげ……って、

そんなメンドクセーことできるかーーーー!!
(本当にそうやって作業してる人にはごめんなさい)

実は、Illustratorの機能を使えば、今回のアイキャッチのようなドット絵が簡単に作れちゃうんです。
作り方を覚えれば、あとは自分の好きなようにアレンジできちゃうんで、気になった方はぜひ挑戦してみてください。
 
 

スポンサーリンク

イラストをドット絵にする

ドット絵にしたいイラスト・写真を準備しましょう。
今回は、アイキャッチにも使ったこのブログのマスコットキャラ「ウッチくん」を例に解説していきます。

RiNG OF LIFEのマスコットキャラ「ウッチくん」

ウッチくん

 
 
まず、イラストをラスタライズします。
オブジェクトを選択し、メニューから『オブジェクトラスタライズ』という順にクリックして進みましょう。

『オブジェクト→ラスタライズ』という順にクリック

オブジェクトを選択し、メニューから『オブジェクト→ラスタライズ』という順にクリック

 
 
「ラスタライズ」のウィンドウが開きます。
[解像度]で『高解像度(300ppi)』を選択し、『OK』ボタンをクリックしましょう。

[解像度]で『高解像度(300ppi)』を選択し、『OK』ボタンをクリック

[解像度]で『高解像度(300ppi)』を選択し、『OK』ボタンをクリック

 
 
次に、ラスタライズしたオブジェクトにモザイクをかけます。
オブジェクトを選択し、メニューから『オブジェクトモザイクオブジェクトを作成』という順にクリックして進みます。
(バージョンがCS3以前なら、『フィルタクリエイトモザイク』)

『オブジェクト→モザイクオブジェクトを作成』という順にクリック

オブジェクトを選択し、メニューから『オブジェクト→モザイクオブジェクトを作成』という順にクリック

 
 
「モザイクオブジェクトを作成」のウィンドウが開きます。
モザイクタイルが正方形になるように「新しいサイズ」や「タイル数」の数値を調整します。

『ラスタライズデータを削除』にチェックを入れ、『OK』ボタンをクリック

モザイクタイルが正方形になるように「新しいサイズ」や「タイル数」の数値を調整

 
 
今回の場合だと、10×10pxのモザイクタイルを作りたいので、

  • タイル数の幅
    594(新しいサイズの幅)÷ 10(モザイクタイルの幅)= 59.4
  • タイル数の高さ
    1000(新しいサイズの高さ)÷ 10(モザイクタイルの高さ)= 100

 
以上の数値をタイル数の幅・高さの欄にそれぞれ入力しています。
(タイル数の幅に59.4と入力して実行してみましたが、小数点以下は切り捨てられるようです。)
 
 
数値の調整が完了したら、『ラスタライズデータを削除』にチェックを入れ、『OK』ボタンをクリックしましょう。
 
 
すると、以下のようなドット絵ができあがります。

ドット絵風のウッチくん

ウッチくん ドット絵ver.

 
 
タイルもほぼ正方形に出来ていますね。

正方形のモザイクタイル

正方形のモザイクタイル

 
 
ちなみに、タイル数を変えれば、細かいドット絵から粗いドット絵まで自由にアレンジすることができます。
 
 
ドットモザイクになったオブジェクトはグループ化されているので、グループ化を解除しておきましょう。

グループ化を解除するには、オブジェクトを選択した状態で、
メニューから『オブジェクトグループ解除』という順にクリックするか、「Shift + Ctrl(MacならCommand)+ G」キーを押すと解除できます。
 
 

写真をドット絵にする

応用編として、写真をドット絵に変えてみようと思います。
ここでは、以下の写真を例に解説していきます。

ファミコン

ファミコン

メモ
写真のリンクは必ず切っておきましょう。
パスデータの場合は、ラスタライズして画像データに変換しておいてください。
 
 
イラストの時と同様、メニューから『オブジェクトモザイクオブジェクトを作成』という順にクリックして進み、モザイクタイルが正方形になるように「新しいサイズ」や「タイル数」の数値を調整します。

数値の調整が完了したら、『ラスタライズデータを削除』にチェックを入れ、『OK』ボタンをクリックしましょう。

『ラスタライズデータを削除』にチェックを入れ、『OK』ボタンをクリック

「新しいサイズ」や「タイル数」の数値を調整

 
 
すると、以下のように写真でも簡単にドット絵に変えることができます。

ドット絵風のファミコン

ファミコン ドット絵ver.

 
 

スポンサーリンク

さまざまな応用

今回紹介した機能を使えば、ファミコン風以外のドット絵を作ることも可能です。
 
 

四角いモザイク柄

先ほど作成したファミコンのドット絵を例に解説します。

オブジェクトを全て選択し、メニューから『オブジェクト変形個別に変形』という順にクリックして進みます。

『オブジェクト→変形→個別に変形』という順にクリック

オブジェクトを全て選択し、メニューから『オブジェクト→変形→個別に変形』という順にクリック

 
 
以下のようなウィンドウが開きます。
ここで、[拡大・縮小]の水平方向と垂直方向の比率を80%ほどに縮小してみましょう。

[拡大・縮小]の水平方向と垂直方向の比率を80%ほどに縮小

[拡大・縮小]の水平方向と垂直方向の比率を80%に縮小

 
 
すると、以下のようにそれぞれのドットが強調されたモザイク柄が完成します。

ドットが強調されたモザイク柄のファミコン

ドットが強調されたモザイク柄のファミコン

 
 

丸いモザイク柄

タイルをひとつ選択して大きさを確認します。

タイルをひとつ選択して大きさを確認

タイルをひとつ選択して大きさを確認

 
 
タイルの大きさを確認したら、オブジェクトを全て選択して、
メニューから『効果形状に変換楕円形』という順にクリックして進みます。

『効果→形状に変換→楕円形』という順にクリック

オブジェクトを全て選択し、メニューから『効果→形状に変換→楕円形』という順にクリック

 
 
「形状オプション」のウィンドウが開くので、『値を指定』を選択し、「幅」と「高さ」を先ほど調べたひとつのタイルの「幅」と「高さ」と同じくらいにします。
設定が完了したら、『OK』ボタンをクリックしましょう。

「形状オプション」のウィンドウ

「幅」と「高さ」を先ほど調べたひとつのタイルの「幅」と「高さ」と同じくらいにする

 
 
すると、以下のように丸いモザイク柄のドット絵が完成します。

丸いモザイク柄のファミコン

丸いモザイク柄のファミコン

 
 

星柄

オブジェクトを全て選択して、
メニューから『効果パスの変形パンク・膨張』という順にクリックして進みます。

メニューから『効果→パスの変形→パンク・膨張』という順にクリック

オブジェクトを全て選択し、メニューから『効果→パスの変形→パンク・膨張』という順にクリック

 
 
「パンク・膨張」のウィンドウが開くので、スライダーのカーソルを「収縮」の方にスライドさせます。
(スライダー横の入力欄に任意の数値を入力してもOKです。)

スライダーのカーソルを「収縮」の方にスライド

スライダーのカーソルを「収縮」の方にスライド

 
 
スライドさせたら『OK』ボタンをクリックしましょう。

すると、以下のようにキラキラした星柄のドット絵が完成します。

星柄のドット絵

星柄のファミコン

 
 

花柄

オブジェクトを全て選択して、
メニューから『効果パスの変形パンク・膨張』という順にクリックして進みます。

メニューから『効果→パスの変形→パンク・膨張』という順にクリック

オブジェクトを全て選択し、メニューから『効果→パスの変形→パンク・膨張』という順にクリック

 
 
「パンク・膨張」のウィンドウが開くので、スライダーのカーソルを「膨張」の方にスライドさせます。
(スライダー横の入力欄に任意の数値を入力してもOKです。)

スライダーのカーソルを「膨張」の方にスライド

スライダーのカーソルを「膨張」の方にスライド

 
 
スライドさせたら『OK』ボタンをクリックしましょう。

すると、以下のような可愛らしい花柄のドット絵が完成します。

花柄のドット絵

花柄のファミコン

 
 

まとめ

今回は、Illustratorでイラスト・写真をファミコン風のドット絵にする方法を解説しました。

本当に驚くほど簡単にできるので、気になった方はぜひやってみてください。
色んな画像をドット絵に変えて、自分好みにアレンジするのもすっごく楽しいですよ!

また、ドット絵と相性バッチリなゲームフォントもまとめて紹介してますので、こちらの記事もぜひ見てみてください。

【商用利用可あり】デザインやゲーム制作に使える無料フォント16選

2017.09.26
 
 
Photoshopでドット絵を描く方法はこちら!

誰でも簡単!Photoshopでドット絵を描く方法を分かりやすく解説

2016.12.25

スポンサーリンク








Illustratorで簡単!イラスト・写真をファミコン風のドット絵にする方法