以前Illustratorで簡単にできるドット絵の作成方法を紹介しましたが、今回はPhotoshopを使ったドット絵の作成方法も解説したいと思います。
今回題材にするのは、クリスマスということでこのキャラクター↓
決してみなさんの知ってる配管工のオジサンじゃないですよー。
ただのサンタの仮装をしているユニークなオジサンです。
それでは、早速作成方法を解説します！
誰でも簡単に作成できるように分かりやすく解説していきますので、ぜひ一緒にチャレンジしてみてください。
目次
スポンサーリンク
作業前の初期設定
まず、ドット絵を描く前に必要な初期設定を行います。
Photoshopを起動させたら、メニューから『Photoshop→環境設定→ツール』という順にクリックして進み、「環境設定」のウィンドウを表示します。
（PhotoshopのバージョンがCS6以前は、『環境設定→ツール』という順にクリック）
『Photoshop→環境設定→ツール』という順にクリック
『ベクトルツールと変形をピクセルグリッドにスナップ』にチェックを入れます。
『ベクトルツールと変形をピクセルグリッドにスナップ』にチェックを入れる
「環境設定」ウィンドウ左側のメニューにある『ガイド・グリッド・スライス』をクリックします。
『ガイド・グリッド・スライス』をクリック
画面が切り替わりますので、[グリッド]の項目のグリッド線を「16 pixel」、分割数を「16」に設定し、『OK』ボタンをクリックします。
グリッド線を「16 pixel」、分割数を「16」に設定
『OK』ボタンをクリック
ここで設定したグリッド線は「実線」で表示され、分割数はグリッド線の範囲を設定値で分割した「破線」で表示されます。
グリッド線は「実線」、分割数は「破線」で表示される
これで、作業前の初期設定は完了です。
ドット絵の作成方法
必要な初期設定が完了したら、ドット絵の作成に移りたいと思います。
1. 新規ドキュメントを作成する
メニューから『ファイル→新規』という順にクリックして進み、「新規」のウィンドウを表示します。
『ファイル→新規』という順にクリック
幅と高さを「16 pixel」、解像度を「72 pixel/inch」に設定します。
幅と高さを「16 pixel」、解像度を「72 pixel/inch」に設定
カンパスカラーは基本的に白で大丈夫なのですが、今回の絵では白色のピクセルが分かりにくくなってしまうので、青っぽい色で設定をしています。
設定したら『作成』ボタンをクリックしましょう。
『作成』ボタンをクリック
16×16 pixelの小さいドキュメントが作成されるので、メニューから『表示→画面サイズに合わせる』という順にクリックするか、
command（Ctrl）＋0キーを押して、作業しやすい大きさに拡大します。
作業しやすい大きさに拡大する
メニューから『表示→表示・非表示→グリッド』という順にクリックするか、
command（Ctrl）＋@キーを押して、ドキュメントにグリッドを表示します。
ドキュメントにグリッドを表示する
メニューから『表示→スナップ』という順にクリックするか、
shift＋command（Ctrl）＋:キーを押して、スナップを無効にします。
スナップを無効にする
2. 下書きをする
ツールパネルから『鉛筆ツール』を選択し、オプションバーの『（クリックでブラシプリセットピッカーを開く）』をクリックし、直径を「1 px」に設定します。
『』をクリックし、直径を「1 px」に設定
グリッドに合わせて下書きを描いていきます。
開始点をクリックして、shiftキーを押しながら終了点をクリックすると、その間の直線ピクセルが塗りつぶせるので便利です。
開始点をクリックして、shiftキーを押しながら終了点をクリック
こんな感じで下書きができました。
ドット絵の下書き
このままでは何が何だか分からないので、色の塗り分けを行いましょう。
あとから色をつけるとき分かりやすいように、グレーの濃淡で塗り分けていきます。
ツールパネルの『描画色を設定』をクリックしましょう。
『描画色を設定』をクリック
カラーピッカーが開きますので、ここで「鉛筆ツール」の色を変更しましょう。
カラーピッカー
まず、2色目。
ドット絵の下書きの色を塗り分け
そして、3色目。
ドット絵の下書きの色を塗り分け
3. 不要なピクセルを消去する
色の塗り分けが完了したら、いらないピクセルを消去していきましょう。
ツールパネルから『消しゴムツール』を選択し、オプションバーのモードで『ブロック』を選択します。
モードで『ブロック』を選択
いらないピクセルをクリックして消去しましょう。
いらないピクセルをクリックして消去
今回のように、新規ドキュメント作成時に白以外でカンパスカラーを設定した場合は、必ず背景色にカンパスカラーで設定した色と同じ色を設定しましょう。
背景色はカンパスカラーで設定した色と同じ色に設定
これで下書きは完成です。
あとは色をつけていくだけですね。
4. シェイプで色を塗り分ける
まず、レイヤーパネルで、『新規グループを作成』をクリックし、「グループ1」を作成します。
『新規グループを作成』をクリック
グループにシェイプを格納しておけば、あとからひとつにまとめて移動したり、変形するときに便利です。
ツールパネルから『ペンツール』を選択し、オプションバーで『シェイプ』を選択。
「塗り」の色のついた部分をクリックし、さらに表示された『カラーピッカー』をクリックします。
『ペンツール』を選択しオプションバーで『シェイプ』を選択。さらに表示された『カラーピッカー』をクリック
「カラーピッカー」のウィンドウが表示されます。
塗り分ける色を選択して『OK』ボタンをクリックします。
色を選択して『OK』ボタンをクリック
グリッドの交差する点の付近をクリックすると、自動的に正確な位置にアンカーポイントが作成されます。
これで塗り分けしたい部分を囲み、「閉じたパス」を作成します。
塗り分けしたい部分を囲み、「閉じたパス」を作成する
「閉じたパス」を作成したら、オプションバーの『パスの操作』をクリックし、さらに表示された『シェイプを結合』をクリックします。
『シェイプを結合』をクリック
先ほどと同じ色にしたい部分をアンカーポイントで囲み、「シェイプ1」に2つめの「閉じたパス」を作成します。
「シェイプ1」に2つめの「閉じたパス」を作成
レイヤーパネルで、2つめの「閉じたパス」が「シェイプ1」に作成されているか確認しましょう。
「閉じたパス」が「シェイプ1」に作成されているか確認
この作業を繰り返して、同じ色にしたい部分全てに「閉じたパス」を作成します。
同じ色にしたい部分全てに「閉じたパス」を作成
1色目のシェイプができたら、2色目の塗り分け作業に入りましょう。
レイヤーパネルで『新規レイヤーを作成』をクリックし、「レイヤー1」を作成します。
『新規レイヤーを作成』をクリック
1色目と同じ作業を繰り返して、2色目のシェイプを作成します。
2色目のシェイプを作成
2色目のシェイプができたら、また新規レイヤーを作成し3色目のシェイプを作成します。
3色目のシェイプを作成
同様に4色目のシェイプも。
4色目のシェイプを作成
5. 別のドキュメントにドラッグ&ドロップする
全てのシェイプを作成したら、レイヤーパネルで「グループ1」を折りたたみましょう。
レイヤーパネルで「グループ1」を折りたたむ
次に、任意のサイズで新規ドキュメントを作成します。
任意のサイズで新規ドキュメントを作成
ここに、「グループ1」をドラッグ&ドロップしましょう。
「グループ1」をドラッグ&ドロップ
作成した「グループ1」のドキュメントは、そのままだと16×16 pixelしかないので非常に小さいです。
そこで、ドキュメントを任意のサイズに拡大しましょう。
メニューから『編集→自由変形』という順にクリックするか、
command（Ctrl）＋Tキーを押して、変形のバウンディングボックスを表示します。
変形のバウンディングボックスを表示
オプションバーで、『縦横比を固定』をクリックし、「W（水平比率を設定）」に任意の数値を入力します。
拡大する大きさが決まったらenterキーを押しましょう。
『縦横比を固定』をクリックし、「W（水平比率を設定）」に任意の数値を入力
すると、以下のようにドキュメントが拡大されます。
ドキュメントが拡大される
これで、ドット絵の作成は完了です。
スポンサーリンク
まとめ
今回は、Photoshopでできる簡単なドット絵の作成方法を解説しました。
今回解説したのは本当に基本的な描き方ですが、これさえ分かればあなたオリジナルのドット絵も簡単に描けるようになります。
また、この方法で描いたドット絵は拡大しても形が崩れず綺麗に表示されますので、ドット絵をサイトのデザインなどに取り入れたいという方は、ぜひ試しに描いてみてください。
