Photoshop養成ギプス

拡大してもキレイなドット絵を作成する

-
psgips
拡大してもキレイなドット絵を作成する
【Photoshop講座】「ドット絵」とは、パソコン上で使われるゲームキャラクターやアイコンなどを表す絵です。ドットの集合体で構成されているのが特徴で、小さいものでは、16 × 16 ピクセルという限られたマス目だけで表現されています。優れたドット絵の手法をデザインに取り入れたいと思うことも多く、そのときに困ることは、特定の倍率以外で拡大すると形が崩れてしまうことです。あの懐かしい「スーパーマリオブラザーズ」を題材に、どんなサイズに拡大しても劣化しないドット絵を作成しましょう。
ピクセルグリッドにスナップさせてパスを描く!
Photoshop で扱う画像の最小値は「1」pixel、つまり、ドット絵を構成する点の「1 ドット」です。[環境設定] ダイアログの [ベクトルツールと変形をピクセルグリッドにスナップ] にチェックマークを入れておくと、作成するパスはピクセルグリッドのマス目に正確に配置されます。この機能を活用すれば、ドット絵の境界線にすばやくパスを作成することができます。
ドット絵をベクターで書き起こす方法
これから行う操作は、ラスター画像で作成したドット絵をベクター画像で書き起こす方法です。小さなドット絵の作成から、シェイプで色を塗り分けて、画質が劣化しない拡大・縮小が行えるほか、一括した色変えを可能にする便利さも兼ね備えています。ドット絵の手法をデザインに取り入れるなら、この方法が最適ですね。
ドット絵のピクセル等倍画像 → ドット絵を自由な大きさに拡大
環境設定で作業の準備を行う
作業を始める前に、ピクセルグリットにパスをぴったり合わせる設定を行います。[Photoshop CC (編集)] メニューから、[環境設定] → [ツール] を選択します。※バージョン CS 6 以前では、[環境設定] → [一般] を選択します。
[環境設定] ダイアログで、[オプション] セクションの [ベクトルツールと変形をピクセルグリッドにスナップ] にチェックマークを入れます。
[環境設定] ダイアログを設定
[環境設定] ダイアログを設定
続いて、方眼紙のようなマス目を設定します。
[環境設定] ダイアログで、メニューから [ガイド・グリッド・スライス] をクリックします。
[グリッド] セクションの [グリッド線] に「16」pixel、[分割数] に「16」を入力して、[OK] をクリックします。
[グリッド線] と [分割数] を入力
[グリッド線] と [分割数] を入力
ドット絵に適したグリッド線を設定!
[グリッド線] は「実線」で表示され、[分割数] は [グリッド線] の範囲を設定値で分割した「破線」で表示されます。作例では [グリッド線] をドット絵の有効領域にして、[分割数] の1マスが「1 pixel」になるように設定しました。
このレッスンの動画を配信中!
【Photoshop講座】拡大してもキレイなドット絵を作成する
サムネールをクリックすると、YouTube 動画にリンクします。
新規画像を作成する
[ファイル] メニューから、[新規] を選択します。[新規ドキュメント] ダイアログで、[幅] に「16」pixel、[高さ] に「16」pixel、[解像度] に「72」pixel/inchを設定して、[作成] をクリックします。
[新規ドキュメント] ダイアログを設定
[新規ドキュメント] ダイアログを設定
[表示] メニューから、[画面サイズに合わせる] を選択、または [command (Ctrl)] + [0] キーを押して、ドキュメントをズームインします。
[表示] メニューから、[表示・非表示] → [グリッド] を選択、または [command (Ctrl)] + [@] キーを押して、ドキュメントにグリッドを表示します。
ドキュメントの表示を作業しやすい大きさに拡大
ドキュメントの表示を作業しやすい大きさに拡大
作業しやすい環境を設定しよう!
作成したドキュメントが 16 x 16 pixel と非常に小さいので、3200% 程度ズームインして、作業しやすい大きさで表示します。初期設定では、ピクセルへの描画 (ドット) がグリッドやドキュメントの端にスナップされ、正確に描けないこともあるので、[表示] メニューから、[スナップ] を選択、または [shift] + [command (Ctrl)] + [:] キーを押して、スナップを無効にします。
ドット絵の下書きを描く
[ツール] パネルから、[鉛筆ツール] を選択します。
[鉛筆ツール] を選択
[鉛筆ツール] を選択
オプションバーで、[クリックでブラシプリセットピッカーを開く] をクリックし、[直径] に「1 px」を入力します。
[直径] に「1 px」を入力
[直径] に「1 px」を入力
グリッドに合わせて、ドット絵の下書きを描きます。
グリッドに合わせて描画を開始 → 1色めの塗り分けを描画
水平ラインを素早く描画!
ドット絵はひとつずつのマス目で構成されているものですが、書き始めはキャラクター全体のシルエットを整えましょう。水平ラインでマス目を数えながら描画していくと、正確なシンメトリーも簡単です。素早く描画するには、開始点をクリックして、終了点を [shift] + クリックすると、その間の直線のピクセルが塗りつぶせます。
開始点をクリック → 終了点を [shift] + クリック
[スウォッチ] パネルで、[25% グレー] をクリックします。
[25% グレー] をクリック
[25% グレー] をクリック
塗り分けする境界を描きます。
塗り分けする境界を描く
塗り分けする境界を描く
2色めの塗り分けを描いて完成させます。
2色めの塗り分けを描画
2色めの塗り分けを描画
[スウォッチ] パネルで、[75% グレー] をクリックします。
[75% グレー] をクリック
[75% グレー] をクリック
3色めの塗り分けを描いて完成させます。
3色めの塗り分けを描画
3色めの塗り分けを描画
明度の違いで見やすい塗り分け!
下書きでの色の塗り分けは、グレーの濃淡で行い、色がなくても見やすい明度の参考にします。ドットのマス目が限られているので、ピクセルの配置は1マス違っても大きく影響します。ときどき、表示サイズを小さくして確認するようにしましょう。
不要なピクセルを消去する
[ツール] パネルから、[消しゴムツール] を選択します。
[消しゴムツール] を選択
[消しゴムツール] を選択
オプションバーで、[消去モード] に [ブロック] を選択します。
[消去モード] に [ブロック] を選択
[消去モード] に [ブロック] を選択
不要なピクセルをクリックして消去します。
不要なピクセルをクリックして消去 → モノクロの下書きが完成
消しゴムは塗って消す?
[消しゴムツール] は、[背景] に使用する場合、現在設定されている背景色で「塗りつぶす」構造を持っています。背景色が白に設定されているか確認してください。
背景色を白に設定
背景色を白に設定
シェイプで色を塗り分ける
[レイヤー] パネルで、[新規グループを作成] をクリックして、[グループ 1] を作成します。
[グループ 1] を作成
[グループ 1] を作成
塗り分けをひとつにまとめる!
グループの作成は、後の手順で作成するシェイプレイヤーを格納するためのものです。複数のレイヤーをひとつにまとめて移動したり、変形するときに便利です。
[ツール] パネルから、[ペンツール] を選択します。
[ペンツール] を選択
[ペンツール] を選択
オプションバーで、[ツールモードを選択] に [シェイプ] を選択します。
[シェイプの塗りを設定] をクリックし、[カラーピッカー] をクリックして、[カラーピッカー] ダイアログを表示します。
[シェイプ] を選択して [カラーピッカー] をクリック
[シェイプ] を選択して [カラーピッカー] をクリック
[カラーピッカー] ダイアログで、塗り分ける色を設定して、[OK] をクリックします。
[シェイプ] を選択して [カラーピッカー] をクリック
[シェイプ] を選択して [カラーピッカー] をクリック
塗り分けの境界線 (グリッド) をクリックして、色を囲む「閉じたパス」を作成します。
塗り分けの境界線に「閉じたパス」を作成
塗り分けの境界線に「閉じたパス」を作成
クリックだけでパスを作成!
パスの作成はクリックするだけです。ピクセルドットにスナップされるので、グリッドの交差する点の付近をクリックすると、自動的に正確な位置にアンカーポイントが作成されます。
オプションバーで、[パスの操作] に [シェイプを結合] を選択します。
[シェイプを結合] を選択
[シェイプを結合] を選択
同じ色にする境界線をクリックして、シェイプに2つめの「閉じたパス」を作成し、同じ要領で、3つめの「閉じたパス」を作成します。
2つめの「閉じたパス」を作成
2つめの「閉じたパス」を作成
3つめの「閉じたパス」を作成
3つめの「閉じたパス」を作成
一括したカラー編集が可能!
塗り分けるパスの数は、いくつでもかまいません。同じ色の領域内なら、パス同士が重なり合っても問題ありません。[シェイプを結合]で作成した複数の「閉じたパス」は、ひとつのシェイプレイヤーにまとめられます。ひとつのシェイプレイヤーにまとめれば、一括したカラー編集が行えます。
別の色を設定して塗り分ける
[レイヤー] パネルで、[新規レイヤーを作成] をクリックして、[レイヤー 1] を作成します。
[レイヤー 1] を作成
[レイヤー 1] を作成
新規シェイプ作成の裏技!
[レイヤー 1] の作成は、[シェイプ 1] の選択を解除し、オプションバーで、新しい [シェイプの塗りを設定] を行うためのものです。[レイヤー 1] にシェイプを作成すると、新規レイヤーに限り、シェイプレイヤーへの変換が自動的に行われます。
STEP 5 と同様にして、色を塗り分ける2色めのシェイプを作成します。
2色めのシェイプを作成
2色めのシェイプを作成
[カラーピッカー] ダイアログを設定
[カラーピッカー] ダイアログを設定
色を塗り分ける3色めのシェイプを作成します。
3色めのシェイプを作成
3色めのシェイプを作成
[カラーピッカー] ダイアログを設定
[カラーピッカー] ダイアログを設定
ドットが細かく色数の多い場合は?
このレッスンは、ドット絵の手法をデザインに取り入れることを目的としています。マス目が細かいものや色数が多いものにも対応できますが、「拡大してもキレイ」ということを除けば、通常の描画 (ラスター画像) による作成方法が手っ取り早いです。その場合でも、[ニアレストネイバー法] という補間方法を用いれば、2倍、4倍、8倍、16倍…といった倍数のみ、「拡大してもキレイ」なアップサンプリングが可能です。
大きなドキュメントで拡大する
[ファイル] メニューから、[新規] を選択します。[新規ドキュメント] ダイアログで、[幅] に「300」pixel、[高さ] に「300」pixel、[解像度] に「72」pixel/inchを設定して、[作成] をクリックします。
[新規ドキュメント] ダイアログを設定
[新規ドキュメント] ダイアログを設定
大きなドキュメントを作成
大きなドキュメントを作成
[ウィンドウ] メニューから、[アレンジ] → [2 アップ - 縦] を選択します。
ドット絵のドキュメントをクリックして選択します。
ドット絵のドキュメントをクリック
ドット絵のドキュメントをクリック
[レイヤー] パネルで、[グループ 1] を折りたたみます。
[グループ 1] を折りたたむ → 塗り分けしたシェイプレイヤーを格納
[グループ 1] フォルダを、大きなドキュメントにドラッグ&ドロップします。
[グループ 1] をドラッグ&ドロップ
[グループ 1] をドラッグ&ドロップ
ドット絵を大きなドキュメントにドラッグ&ドロップできたら、[編集] メニューから、[自由変形] を選択、または [command (Ctrl)] + [T] キーを押して、変形のバウンディングボックスを表示します。
変形のバウンディングボックスを表示
変形のバウンディングボックスを表示
オプションバーで、[縦横比を固定] をクリックします。
[水平比率を設定] に「1600%」を入力します。
ドット絵の拡大率を入力
ドット絵の拡大率を入力
ドット絵を自由な大きさに拡大
ドット絵を自由な大きさに拡大
拡大 (変形) する大きさが決まったら、オプションバーで [変形を確定] をクリック、または [enter] キーを押して変形を確定します。
拡大してもキレイなドット絵を作成することができた
拡大してもキレイなドット絵を作成することができた
ドット絵の技法をデザインに応用する!
わずか 16 x 16 pixel で作成されたドット絵は、パソコン上で表示するために作られたものですが、その無駄のない整理整頓されたフォルムは、その他の分野から見ても、インパクトが強く魅力的なデザインが多いです。
ドット絵の「技法」をグラフィックで応用するために、効率的にベクター化する方法こそ、このレッスンで習得しておきたいテクニックです。優れたデザインを参考にして、オリジナルのドット絵を作成しましょう。
関連記事
psgips
Posted bypsgips