ドット絵アイコンを作る - グリッド・パレット・レイヤー・書き出し
なまずドット工房で32×48ピクセルのドット絵アイコンやアバターを作る手順を解説。パーツ、自由描画、レイヤー、編集用JSON、透過PNGの使い分けまで扱います。
32×48の小さなキャンバスでは、細部より先に輪郭と色数を決めます。パレット、パーツ、自由描画、レイヤー、修正を順に使い、最後に透過PNGと編集用JSONを目的別に残します。拡大表示は編集用で、作品の実ピクセル数とは別です。
完成サイズとグリッドを決める
キャンバスは32×48ピクセル固定です。SNS等で大きく表示する場合も、元データはこの格子で作り、拡大時は最近傍補間を使って輪郭をぼかしません。最初に頭、胴、足の占める行数を決め、左右端へ最低1ピクセルの余白を残します。
パレットを絞る
背景透過を除き、最初は輪郭色、主色、影、ハイライトの4〜6色から始めます。似た明るさの色を増やすと小さい表示で差が消えるため、グレースケール相当の明度差も確認します。色を追加するのは、既存色で役割を代替できない場合だけにします。
シルエットを作る
顔の中身を描く前に、1色で頭、髪、胴、手足の外形を作ります。編集倍率を下げたプレビューで、人物またはキャラクターとして読めるか確認します。左右対称を使う部分と、髪や小物で崩す部分を分けます。
顔と小物を足す
目や口は1〜2ピクセルの位置差でも表情が変わるため、連続して描き込まずプレビューで確認します。眼鏡、帽子、武器等の小物は輪郭から外へ出る部分を少数に絞ります。小物を追加した後も顔と身体のシルエットが読めるか確認します。
レイヤーと修正
パーツ配置と自由描画を分け、前後関係が必要な要素はレイヤー順を使います。Undo／Redo、選択、移動、消去を使い、完成へ近づくほど一度に広い範囲を塗り直しません。編集状態を再利用する場合はJSONを保存し、PNGだけを正本にしません。
透過PNGへ書き出す
PNG保存で32×48の1xまたは画面にある対応倍率を選び、透過部分が保持されることを確認します。書き出したPNGを別ビューアで開き、背景、端の欠け、意図しない半透明、サイズを確認します。SNS側で自動拡大・圧縮される場合があるため、元PNGを残します。
要点
色数とシルエットを先に決め、細部は実寸プレビューで判断します。PNGは公開用、JSONは再編集用です。