デジタル画像は全てドットで構成されているのですが、ドット絵とはドットが視認できる低解像度の絵のことを言います。ドット絵は初期のコンピューターゲームなどに使用されている手法だったので、レトロな雰囲気を表現したい時やアートとしても活用されていますね。
この記事ではPhotoshopを使用して、拡大しても綺麗なドット絵の作り方をお伝えしましょう。
【準備】Photoshopでドット絵用のカンバスを作る
通常のイラストと違い、ドット絵を書くためには正方形の網目のような状態の専用のカンバスが必要です。まずはそのカンバス作成を行いましょう。
ドット絵用のカンバスの作り方①｜カンバスを作成
まずはドット絵を描くためのカンバスの作り方を紹介します。Photoshopのツールバーから［ファイル］-［新規］を開きましょう。
カンバスのサイズは自由ですが、ここでは16×16pxの正方形を用意します。今日お伝えするドット絵の描き方では1×1pxで色を塗っていきます。また、解像度は72ピクセル/インチで設定し、背景は使用用途によっても変わりますが、今回の作り方では透明に設定しました。
完成した新規ファイルは16×16pxの非常に小さなファイルですので、6400倍くらいに拡大して作業するようにします。作業倍率は自分の好みで決めてください。
次に、作業がしやすいようにレイヤーに白の背景を仮で用意しておきます。⬇︎
ドット絵用のカンバスの作り方②｜グリッドの表示
最後にグリッドを表示させましょう。
ツールバーの［表示］-［表示・非表示］-［グリッド］を選ぶと、グリッドが表示されます。⬇︎
ドット絵用のカンバスの作り方③｜グリッドの調整
このままでは、グリッドのサイズが希望の1×1pxになっていない場合もありますので、Photoshopに表示されているグリッドが1ピクセル間隔に合うように調整します。
［Photoshop］-［環境設定］-［ガイド・グリッド・スライス］を開きましょう。⬇︎
グリッド線と分割数を今回希望の16と入力します。グリッドの色も自由に設定できるので、ドット絵に使用する予定ではない色を選ぶと分かりやすいですね。
今回は「ライトブルー」を選択しました。⬇︎
ドット絵用のカンバスの作り方④｜ドット絵の環境設定
ドット絵を書くためには設定しておかなくてはいけないPhotoshopの環境設定がありますので作業前に確認しておきましょう。
Photoshopの［ファイル］-［環境設定］-［ツール］を開きます。⬇︎
［オプション］の中にある［ベクトルツールと変形をピクセルグリッドにスナップ］にチェックマークが入っているかを確認し、もし入っていない場合はチェックマークを入れましょう。⬇︎
こうして、ピクセルグリッドにパスがぴったりと合わせられるようになりました。
Photoshopでドット絵を描いていく
ドット絵用のカンバスとPhotoshopの環境設定が整えば、実際にドット絵を描いていきましょう。ここでは簡単な猫のドット絵を描いてみます。
Photoshopでドット絵を描いていく①｜鉛筆ツールの選択
まずはPhotoshopのツールパネルで［鉛筆ツール］を選択します。
ツールから鉛筆のサイズをクリックし、鉛筆サイズを［1px］硬さを［100%］に設定します。⬇︎
ツールバーからカラー設定をし使用する色を決めましょう。カラーピッカーで好みを色を選ぶかWEBカラーの入力などでの細かなカラー指定もできます。⬇︎
カラーは、スウォッチから選ぶこともできますので希望の色がスウォッチにあれば利用しましょう。⬇︎
Photoshopでドット絵を描いていく②｜絵を描く
絵を描く前に、先ほど背景用の新規レイヤーを作成した時と同じく絵を描く用のレイヤーを作成しておくと良いでしょう。レイヤーが作業ごとに分かれていると、作業をやり直したい時や同じファイルを利用していくつかのパターンを作成する時にも便利です。⬇︎
そのまま下絵を描いてみましょう。横や縦に真っ直ぐの線を引きたい場合は［Shift］を押したまま線を描いてください。真っ直ぐな線が描けるようになります。⬇︎
Photoshopでドット絵を描いていく③｜消しゴムツールを使う
間違ってドットを打ってしまった時には消しゴムツールを使用してドットの削除をします。
メニューツールから［消しゴムツール］を選択しオプションを［ブロック］で設定します。⬇︎
ペンツールで描いた部分が削除できるようになりました。⬇︎
Photoshopで作成したドット絵を保存する
完成したドット絵を保存します。ファイル形式は自由ですが、今回はWebで使用しやすいように背景を透明にしたPNG形式を選択して画像を保存しましょう。
Photoshopで作成したドット絵を保存①｜完成した画像の確認
画像が完成したらグリッドの表示を消してドット絵の確認をしましょう。
最初にグリッドを表示させた時と同じようにPhotoshopのツールバーの［表示］-［表示・非表示］-から［グリッド］を非表示にします。
Photoshopで作成したドット絵を保存①｜画像の保存
ドット絵が完成したら希望の形式で保存します。まずは作業しやすいように仮で作成しておいた白の背景レイヤーを非表示にし、［ファイル］-［書き出し］-［PNGとしてクイック書き出し］を選択しましょう。⬇︎
ドット絵がPNG形式で保存されました。背景も透明になっていますね。⬇︎
拡大しても綺麗なドット絵を作るには？
Photoshopを使ったドット絵の作り方をお伝えしましたが、基本的にドット絵はとても小さいので、そのまま拡大するとぼやけてしまう場合が多いです。それでは使用用途が限られてしまいますね。ここからは、加工・拡大変換しても綺麗なドット絵にする方法をまとめました。
ドット絵を綺麗に加工・拡大変換する方法①｜画像解像度を開く
今回作成した16✕16pxの猫のドット絵を100％表示にしてみましょう。この画像を加工・拡大変換してみます。⬇︎
フォトショップ画面ではとても小さくて確認すらできませんね。インターネットでアイコンなどには使用しやすいサイズですが、せっかく描いたドット絵はさまざまな用途で使用したいですよね。
まず、画像解像度を使えば画像サイズの変更ができますので［イメージ］-［画像解像度］を開きます。⬇︎
ここでは16✕16pxの画像を400px✕400pxにしてみましょう。⬇︎
このように画像サイズは簡単に大きくなりいますが、画像がぼやけてしまいましたね。これではとても使用できません。
ドット絵を綺麗に加工・拡大変換する方法②｜画像再サンプルの設定
綺麗にドット絵を加工・拡大変換するためには、先ほどの作業の続きで画像解像度にある再サンプルにチャックを入れてメニューから［ニアレストネイバー法（ハードな輪郭）］を選びましょう。この機能を使用すれば、簡単にドット絵を綺麗な状態で加工・拡大変換できます。⬇︎
ドット絵を綺麗に加工・拡大変換する方法③｜画像の確認
先ほど画像サイズを加工・拡大変換したドット絵を100%表示にしてみましょう。⬇︎
綺麗に画像が大きく仕上がりました。この方法を使用すれば小さいドット絵も自由に加工・拡大変換できますね。
Photoshopでドット絵制作を楽しもう！
Photoshopでドット絵を作成する方法を紹介いたしました。一見作成が難しそうに思えるドット絵ですが、思っているよりも簡単な作り方だと感じられたのではないでしょうか？
回数をこなせばどんどんレベルアップができますので、Photoshopのドット絵アートを楽しみましょう。