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

ドット絵をベクターで書き起こす方法

これから行う操作は、ラスター画像で作成したドット絵をベクター画像で書き起こす方法です。小さなドット絵の作成から、シェイプで色を塗り分けて、画質が劣化しない拡大・縮小が行えるほか、一括した色変えを可能にする便利さも兼ね備えています。ドット絵の手法をデザインに取り入れるなら、この方法が最適ですね。

環境設定で作業の準備を行う

作業を始める前に、ピクセルグリットにパスをぴったり合わせる設定を行います。[Photoshop CC (編集)] メニューから、[環境設定] → [ツール] を選択します。※バージョン CS 6 以前では、[環境設定] → [一般] を選択します。

[環境設定] ダイアログで、[オプション] セクションの [ベクトルツールと変形をピクセルグリッドにスナップ] にチェックマークを入れます。

[ 環境設定 ] を設定

続いて、方眼紙のようなマス目を設定します。

[環境設定] ダイアログで、メニューから [ガイド・グリッド・スライス] をクリックします。

[グリッド] セクションの [グリッド線] に「16」pixel、[分割数] に「16」を入力して、[OK] をクリックします。

[ グリッド線 ] と [ 分割数 ] を入力

ドット絵に適したグリッド線を設定！

[グリッド線] は「実線」で表示され、[分割数] は [グリッド線] の範囲を設定値で分割した「破線」で表示されます。作例では [グリッド線] をドット絵の有効領域にして、[分割数] の1マスが「1 pixel」になるように設定しました。

このレッスンの動画を配信中！

サムネールをクリックすると、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 ] を入力

グリッドに合わせて、ドット絵の下書きを描きます。

水平ラインを素早く描画！

ドット絵はひとつずつのマス目で構成されているものですが、書き始めはキャラクター全体のシルエットを整えましょう。水平ラインでマス目を数えながら描画していくと、正確なシンメトリーも簡単です。素早く描画するには、開始点をクリックして、終了点を [shift] + クリックすると、その間の直線のピクセルが塗りつぶせます。

[スウォッチ] パネルで、[25% グレー] をクリックします。

[ 25% グレー ] をクリック

塗り分けする境界を描きます。

塗り分けする境界を描く

２色めの塗り分けを描いて完成させます。

２色めの塗り分けを描画

[スウォッチ] パネルで、[75% グレー] をクリックします。

[ 75% グレー ] をクリック

３色めの塗り分けを描いて完成させます。

３色めの塗り分けを描画

明度の違いで見やすい塗り分け！

下書きでの色の塗り分けは、グレーの濃淡で行い、色がなくても見やすい明度の参考にします。ドットのマス目が限られているので、ピクセルの配置は1マス違っても大きく影響します。ときどき、表示サイズを小さくして確認するようにしましょう。

不要なピクセルを消去する

[ツール] パネルで、[消しゴムツール] を選択します。

[ 消しゴムツール ] を選択

オプションバーで、[消去モード] に [ブロック] を選択します。

[ 消去モード ] に [ ブロック ] を選択

不要なピクセルをクリックして消去します。

消しゴムは塗って消す？

[消しゴムツール] は、[背景] に使用する場合、現在設定されている背景色で「塗りつぶす」構造を持っています。背景色が白に設定されているか確認してください。

基本がわかる！描画色と背景色

背景色を白に設定

シェイプで色を塗り分ける

[レイヤー] パネルで、[新規グループを作成] をクリックして、[グループ 1] を作成します。

[ グループ 1 ] を作成

塗り分けをひとつにまとめる！

グループの作成は、後の手順で作成するシェイプレイヤーを格納するためのものです。複数のレイヤーをひとつにまとめて移動したり、変形するときに便利です。

[ツール] パネルで、[ペンツール] を選択します。

[ ペンツール ] を選択

オプションバーで、[ツールモードを選択] に [シェイプ] を選択します。

[シェイプの塗りを設定] をクリックし、[カラーピッカー] をクリックして、[カラーピッカー] ダイアログを表示します。

[ シェイプ ] を選択して [ カラーピッカー ] をクリック

[カラーピッカー] ダイアログで、塗り分ける色を設定して、[OK] をクリックします。

カラーピッカーの使い方

[ シェイプ ] を選択して [ カラーピッカー ] をクリック

塗り分けの境界線 (グリッド) をクリックして、色を囲む「閉じたパス」を作成します。

基本がわかる！パスの作成と使い方

塗り分けの境界線に「閉じたパス」を作成

クリックだけでパスを作成！

パスの作成はクリックするだけです。ピクセルドットにスナップされるので、グリッドの交差する点の付近をクリックすると、自動的に正確な位置にアンカーポイントが作成されます。

オプションバーで、[パスの操作] に [シェイプを結合] を選択します。

[ シェイプを結合 ] を選択

同じ色にする境界線をクリックして、シェイプに２つめの「閉じたパス」を作成し、同じ要領で、３つめの「閉じたパス」を作成します。

２つめの「閉じたパス」を作成

３つめの「閉じたパス」を作成

一括したカラー編集が可能！

塗り分けるパスの数は、いくつでもかまいません。同じ色の領域内なら、パス同士が重なり合っても問題ありません。[シェイプを結合]で作成した複数の「閉じたパス」は、ひとつのシェイプレイヤーにまとめられます。ひとつのシェイプレイヤーにまとめれば、一括したカラー編集が行えます。

別の色を設定して塗り分ける

[レイヤー] パネルで、[新規レイヤーを作成] をクリックして、[レイヤー 1] を作成します。

[ レイヤー 1 ] を作成

新規シェイプ作成の裏技！

[レイヤー 1] の作成は、[シェイプ 1] の選択を解除し、オプションバーで、新しい [シェイプの塗りを設定] を行うためのものです。[レイヤー 1] にシェイプを作成すると、新規レイヤーに限り、シェイプレイヤーへの変換が自動的に行われます。

STEP 5 と同様にして、色を塗り分ける２色めのシェイプを作成します。

２色めのシェイプを作成

[ カラーピッカー ] を設定

色を塗り分ける３色めのシェイプを作成します。

３色めのシェイプを作成

[ カラーピッカー ] を設定

ドットが細かく色数の多い場合は？

このレッスンは、ドット絵の手法をデザインに取り入れることを目的としています。マス目が細かいものや色数が多いものにも対応できますが、「拡大してもキレイ」ということを除けば、通常の描画 (ラスター画像) による作成方法が手っ取り早いです。その場合でも、[ニアレストネイバー法] という補間方法を用いれば、2倍、4倍、8倍、16倍…といった倍数のみ、「拡大してもキレイ」なアップサンプリングが可能です。

大きなドキュメントで拡大する

[ファイル] メニューから、[新規] を選択します。[新規ドキュメント] ダイアログで、[幅] に「300」pixel、[高さ] に「300」pixel、[解像度] に「72」pixel/inchを設定して、[作成] をクリックします。

基本がわかる！新規ドキュメントの作成

[ 新規ドキュメント ] を設定

大きなドキュメントを作成

[ウィンドウ] メニューから、[アレンジ] → [2 アップ - 縦] を選択します。

ドット絵のドキュメントをクリックして選択します。

拡大作業と全体確認を２画面で行う方法

ドット絵のドキュメントをクリック

[レイヤー] パネルで、[グループ 1] を折りたたみます。

[グループ 1] フォルダを、大きなドキュメントにドラッグ＆ドロップします。

[ グループ 1 ] をドラッグ＆ドロップ

ドット絵を大きなドキュメントにドラッグ＆ドロップできたら、[編集] メニューから、[自由変形] を選択、または [command (Ctrl)] + [T] キーを押して、変形のバウンディングボックスを表示します。

変形のバウンディングボックスを表示

オプションバーで、[縦横比を固定] をクリックします。

[水平比率を設定] に「1600%」を入力します。

ドット絵の拡大率を入力

ドット絵を自由な大きさに拡大

拡大 (変形) する大きさが決まったら、オプションバーで [変形を確定] をクリック、または [enter] キーを押して変形を確定します。

拡大してもキレイなドット絵を作成することができた

ドット絵の技法をデザインに応用する！

わずか 16 x 16 pixel で作成されたドット絵は、パソコン上で表示するために作られたものですが、その無駄のない整理整頓されたフォルムは、その他の分野から見ても、インパクトが強く魅力的なデザインが多いです。

ドット絵の「技法」をグラフィックで応用するために、効率的にベクター化する方法こそ、このレッスンで習得しておきたいテクニックです。優れたデザインを参考にして、オリジナルのドット絵を作成しましょう。