あのマリオが描ける!フォトショップを使ったドット絵の描き方 -photoshop-

babymetalのドット絵

マリオなどのゲームキャラクターのイラストをドット絵、イラストを描く人をドット絵師と呼ぶそうです。少し前にファビコンという32ピクセル四方のイラストを描くことになった時、いろいろ調べているうちに知りました。

世界中で知られているマリオのドット絵は16ピクセル四方で描かれていて、トレードマークにもなっているヒゲやオーバーオールは、全部で16×16=256ピクセルという制約の中でマリオの顔や動きを表現するためにデザインされたそうです。 google画像検索でマリオのドット絵を見てみる。

1ピクセルのラインで描かれたヒゲが見事に鼻と口を表現してますよね。他にもゲーム機による制約があったりして、ドット絵師さんはいろんな工夫をしてドット絵を描いています。

この記事はドット絵を初めて描いてみた私が調べたことや、描く前に行なったフォトショップの設定方法をまとめたものです。

さすがにドット絵師さんが描いたような緻密なものをいきなり描くのは無理なので、上のドット絵のような簡単なものから始めてみてはいかがでしょうか?根気があれば誰でも描けますよ!

ドット絵を描く前のPhotoshop各種設定

環境設定

フォトショップ環境設定ダイアログ
  1. 「編集(E)」>「環境設定(N)」>「ガイド・グリッド・スライス(S)」を選択します。
  2. 「環境設定」ダイアログで、「グリッド」エリアの「グリッド」に “32” 、「分割数」に “32” を設定します。

「グリッド線」は「実線」で表示され、「分割数」は「破線」で表示されます。この例では「グリッド線」を32ピクセル四方のドット絵の有効領域にして、「分割数」の1マスが「1 pixel」になるように設定しています。16ピクセル四方のドット絵を描く場合は「グリッド線」に “16” 、「分割数」に “16” を設定してください。

新規ファイルを作る

フォトショップ新規ファイル作成ダイアログ

Ctrl+Nを押して[新規]ダイアログを表示します。「幅(W)」に “32” 、「高さ(H)」に “32” 、「解像度(R)」に “72” を設定して新規ファイルを作成します。

鉛筆ツールの設定

フォトショップブラシ設定ダイアログ
  1. 「ツール」パネルから、「鉛筆」ツールを選択します。
  2. 「オプション」バーの「クリックでブラシプリセットピッカーを開く」をクリックします。
  3. 「クリックでブラシプリセットピッカー」の「直径」に ”1px” を設定します。

スナップの設定

狙った線をうまく描けない時があるのであらかじめ「表示(V)」>「スナップ(N)」を押してスナップを解除しておきます。

グリッドの設定

「表示(V)」>「表示・非表示(H)」>「グリッド(G)」を押してドキュメントにグリッドを表示します。

フォトショップを使ったドット絵の描き方

以上でドット絵を描くために必要なフォトショップの設定は終わりです。これでドット絵を描くことできますが、その前に私が実際にドット絵を描いてみて、フォトショップの使い方でとても便利だなと思ったことを紹介します。

線やキャラクターの描き方についてはドット絵師さんのサイトを見てください。「ドット絵 描き方」で検索すれば沢山出てくるはずです。どのサイトもびっくりするくらい丁寧にドット絵の描き方が解説されていて面白いですよ。

今回は、その中から私のオススメのサイトを紹介させていただきます。まずは時間の無い人にオススメのサイトから。すぐ読めて、ドット絵を描いてみようかなという気持ちにさせてくれるサイトです。

ドット絵講座

次は、じっくりとドット絵に取り組んでみようかなと思っている人向けのサイト。ボリューム満点です。

第1ドット 『とりあえず描いてみようZ』

フォトショップでドット絵を描くときに便利なショートカット

Ctrl++ ウィンドウをズームイン
Ctrl+ ウィンドウをズームアウト
Ctrl+0 ウインドウを画面サイズに合わせて表示
Ctrl+1 ウィンドウをピクセル100%表示
B 鉛筆ツール
Shift+B 「ブラシ」、「鉛筆」、「色の置き換え」、「混合ブラシ」ツールを切り替える
Space+ドラッグ 手のひらツールで画像をスクロールする

※上表のショートカットはWindows用です。Macでは CtrlCommand に読み替えてください。

ぼかしフィルターを使った中間色の作り方

フォトショップぼかしフィルターを使った中間色の作り方

中間色とは、ある色とある色のちょうど真ん中の色のことです。例えば、黒と白の中間色が灰色になります。この中間色をドット絵では立体感を出すためによく使います。必ず中間色を使わなければいけないという訳ではありませんが、判断材料として使うためにも正しい中間色の求め方を知っておきたいところです。

  1. 隣同士に並んだピクセルを中間色を作りたい2色でそれぞれ塗ります。
  2. 色を塗った2ピクセルを選択して、「フィルター(T)」>「ぼかし」>「平均」をクリックします。
  3. 変更された色が中間色です。

完成したドット絵のサイズ拡大

フォトショップ画像解像度ダイアログ

せっかく描いたドット絵もこのままの大きさでは使い道が限られてしまいます。特に今の高解像度ディスプレイでは豆粒ほどの大きさに表示されてしまいます。画像を拡大していろんなところで使えるようにしましょう。

  1. 「イメージ(I)」>「画像解像度(I)」を選択します。
  2. 「画像解像度」ダイアログの「幅(D)」と「高さ(G)」に拡大後に必要な大きさを入力し、「再サンプル(S)」をチェック、補完方式には「ニアレストネイバ―法」を選択します。

拡大率は元絵の整数倍の大きさに設定してください。2倍、3倍、4倍・・・の拡大は問題ありませんが、1.5倍、2.13倍・・・に拡大するとイラストが崩れてしまうので注意が必要です。

フォトショップ拡大結果比較

いかがですか。今回描いたドット絵は完成までに3時間くらいかかってしまいましたが、その3時間があっという間に思えるくらい集中して楽しむことができました。興味を持った方はぜひドット絵にトライしてみて下さい。

ちなみに冒頭に書いたファビコンというのは、IEやChromeなどのブラウザのタブにサイト名と一緒に表示される小さいアイコンのことです。ブックマーク一覧にも表示されてます。

こちらも簡単なものから複雑で動くものまであったり、工夫されていて見ていて面白いですね。

ドット絵を使ったGIFアニメの作り方を紹介する記事を書きました。あわせてどうぞ!

動くアイコンを作ろう!フォトショップを使ったGIFアニメーションの作り方
動くアイコンを作ろう!フォトショップを使ったGIFアニメーションの作り方
GIFアニメとは複数の写真やイラストを重ねて一定の間隔で順番に表示する動画のことです。フォトショップの「タイムライン」パネルを使って、ドット絵のGIFアニメを作る方法を紹介します。
スポンサーリンク
レクタングル大広告
レクタングル大広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする