マリオなどのゲームキャラクターのイラストをドット絵、イラストを描く人をドット絵師と呼ぶそうです。少し前にファビコンという32ピクセル四方のイラストを描くことになった時、いろいろ調べているうちに知りました。
世界中で知られているマリオのドット絵は16ピクセル四方で描かれていて、トレードマークにもなっているヒゲやオーバーオールは、全部で16×16=256ピクセルという制約の中でマリオの顔や動きを表現するためにデザインされたそうです。 google画像検索でマリオのドット絵を見てみる。
1ピクセルのラインで描かれたヒゲが見事に鼻と口を表現してますよね。他にもゲーム機による制約があったりして、ドット絵師さんはいろんな工夫をしてドット絵を描いています。
この記事はドット絵を初めて描いてみた私が調べたことや、描く前に行なったフォトショップの設定方法をまとめたものです。
さすがにドット絵師さんが描いたような緻密なものをいきなり描くのは無理なので、上のドット絵のような簡単なものから始めてみてはいかがでしょうか？根気があれば誰でも描けますよ！
ドット絵を描く前のPhotoshop各種設定
環境設定
- 「編集(E)」＞「環境設定(N)」＞「ガイド・グリッド・スライス(S)」を選択します。
- 「環境設定」ダイアログで、「グリッド」エリアの「グリッド」に “32” 、「分割数」に “32” を設定します。
「グリッド線」は「実線」で表示され、「分割数」は「破線」で表示されます。この例では「グリッド線」を32ピクセル四方のドット絵の有効領域にして、「分割数」の1マスが「1 pixel」になるように設定しています。16ピクセル四方のドット絵を描く場合は「グリッド線」に “16” 、「分割数」に “16” を設定してください。
新規ファイルを作る
Ctrl+Nを押して［新規］ダイアログを表示します。「幅(W)」に “32” 、「高さ(H)」に “32” 、「解像度(R)」に “72” を設定して新規ファイルを作成します。
鉛筆ツールの設定
- 「ツール」パネルから、「鉛筆」ツールを選択します。
- 「オプション」バーの「クリックでブラシプリセットピッカーを開く」をクリックします。
- 「クリックでブラシプリセットピッカー」の「直径」に ”1px” を設定します。
スナップの設定
狙った線をうまく描けない時があるのであらかじめ「表示(V)」＞「スナップ(N)」を押してスナップを解除しておきます。
グリッドの設定
「表示(V)」＞「表示・非表示(H)」＞「グリッド(G)」を押してドキュメントにグリッドを表示します。
フォトショップを使ったドット絵の描き方
以上でドット絵を描くために必要なフォトショップの設定は終わりです。これでドット絵を描くことできますが、その前に私が実際にドット絵を描いてみて、フォトショップの使い方でとても便利だなと思ったことを紹介します。
線やキャラクターの描き方についてはドット絵師さんのサイトを見てください。「ドット絵 描き方」で検索すれば沢山出てくるはずです。どのサイトもびっくりするくらい丁寧にドット絵の描き方が解説されていて面白いですよ。
今回は、その中から私のオススメのサイトを紹介させていただきます。まずは時間の無い人にオススメのサイトから。すぐ読めて、ドット絵を描いてみようかなという気持ちにさせてくれるサイトです。
次は、じっくりとドット絵に取り組んでみようかなと思っている人向けのサイト。ボリューム満点です。
フォトショップでドット絵を描くときに便利なショートカット
| Ctrl++ | ウィンドウをズームイン |
|---|---|
| Ctrl+– | ウィンドウをズームアウト |
| Ctrl+0 | ウインドウを画面サイズに合わせて表示 |
| Ctrl+1 | ウィンドウをピクセル100%表示 |
| B | 鉛筆ツール | Shift+B | ｢ブラシ｣、｢鉛筆｣、｢色の置き換え｣、｢混合ブラシ｣ツールを切り替える | Space+ドラッグ | 手のひらツールで画像をスクロールする |
※上表のショートカットはWindows用です。Macでは Ctrl を Command に読み替えてください。
ぼかしフィルターを使った中間色の作り方
中間色とは、ある色とある色のちょうど真ん中の色のことです。例えば、黒と白の中間色が灰色になります。この中間色をドット絵では立体感を出すためによく使います。必ず中間色を使わなければいけないという訳ではありませんが、判断材料として使うためにも正しい中間色の求め方を知っておきたいところです。
- 隣同士に並んだピクセルを中間色を作りたい2色でそれぞれ塗ります。
- 色を塗った2ピクセルを選択して、「フィルター(T)」＞「ぼかし」＞「平均」をクリックします。
- 変更された色が中間色です。
完成したドット絵のサイズ拡大
せっかく描いたドット絵もこのままの大きさでは使い道が限られてしまいます。特に今の高解像度ディスプレイでは豆粒ほどの大きさに表示されてしまいます。画像を拡大していろんなところで使えるようにしましょう。
- 「イメージ(I)」＞「画像解像度(I)」を選択します。
- 「画像解像度」ダイアログの「幅(D)」と「高さ(G)」に拡大後に必要な大きさを入力し、「再サンプル(S)」をチェック、補完方式には「ニアレストネイバ―法」を選択します。
拡大率は元絵の整数倍の大きさに設定してください。2倍、３倍、４倍・・・の拡大は問題ありませんが、1.5倍、2.13倍・・・に拡大するとイラストが崩れてしまうので注意が必要です。
いかがですか。今回描いたドット絵は完成までに3時間くらいかかってしまいましたが、その3時間があっという間に思えるくらい集中して楽しむことができました。興味を持った方はぜひドット絵にトライしてみて下さい。
ちなみに冒頭に書いたファビコンというのは、IEやChromeなどのブラウザのタブにサイト名と一緒に表示される小さいアイコンのことです。ブックマーク一覧にも表示されてます。
こちらも簡単なものから複雑で動くものまであったり、工夫されていて見ていて面白いですね。
ドット絵を使ったGIFアニメの作り方を紹介する記事を書きました。あわせてどうぞ！
