Photoshop ドット絵｜設定と基本操作の始め方

Photoshopでドット絵を描くなら、最初に触るべきなのは作画センスより設定です。
1pxグリッド、1pxの鉛筆ツール、拡大縮小時のNearest Neighborを先に整えるだけで、標準状態で起きがちなぼけやにじみはほぼ防げます。
この記事は、すでにPhotoshopを使っていて、専用ソフトに移る前に最短でドット絵向けの環境を作りたい人に向けた実践ガイドです。
16x16や32x32の小さなキャンバスで色数を絞り、完成からPNGやGIFの書き出しまで、再現できる手順に絞って整理します。
32x32の顔アイコンを作る場面では、ブラシで引いた輪郭と鉛筆で置いた1pxの輪郭が別物に見えることがよくありますし、200%と400%の整数倍表示では1pxの影の読み取り方も変わります。
そうした見え方の差まで含めて、ドット絵として破綻しないワークフローを一本につなげます。

Photoshopはドット絵制作に使える？ 向いている点と注意点

Photoshopの強みと限界

Photoshopでもドット絵制作はできます。
実ピクセルを1つずつ置いていく作業そのものは問題なく行えますし、レイヤー構成、色調補正、選択範囲、変形といった総合画像編集の強さは、専用ソフトにはない持ち味です。
とくに既存のAdobeワークフローの中で素材を扱う場面では、この強みがそのまま制作効率につながります。

たとえばゲーム用UIやスプライトを既存プロジェクトに組み込む際、ベースのドット絵を残したままレイヤースタイルで縁取りを追加したり、調整レイヤーで色相を変えたりすると、短時間で色違いのバリエーションを作れます。
個別に描き直すより、元データを生かした運用が効率的です。

一方で、初期状態のPhotoshopはドット絵向けに整っていません。
ブラシ系ツールはアンチエイリアスや半透明が入りやすく、そのまま1px線を引くと輪郭がにじみます。
拡大縮小やリサイズでも補間方式が適切でないと、せっかく置いた角の立ったピクセルが崩れます。
つまりPhotoshopは「描けるソフト」ではあっても、「最初からドット絵前提のソフト」ではありません。
きれいな実ピクセル編集をするには、道具と補間の考え方を最初に合わせる必要があります。

2026年3月時点のデスクトップ版Photoshopは現行が27.0、長期安定運用向けのPhotoshop 2025 LTSが26.11.1です。
現行の更新状況はAdobe Photoshop デスクトップ版リリースノートで追えます。
バージョンが新しくても、ドット絵で押さえるべき核心は変わらず、1pxをにじませない設定と整数倍前提の表示・変形が土台になります。

専用ソフトとの比較

ツール選びは、描き味そのものより「何をどこまでやるか」で決まります。
Photoshopは画像編集全般の主力で、ドット絵もその中の一用途としてこなせるタイプです。
Asepriteは逆に、ドット絵とアニメーションを中心に設計された専用環境で、パレット管理やフレーム編集の流れが最初から噛み合っています。
Illustratorはピクセルグリッドを使った表現こそ可能ですが、本質はベクター制作なので、実ピクセルを打つ感覚とは別物です。

Photoshopが向くのは、すでにAdobe Creative Cloudの中で作業していて、PSDベースで素材を受け渡す人です。
UIパーツ、広告バナー、ゲーム用モック、既存デザインへの差し込みなら、ドット絵を描いたあとにそのまま合成や色調整へ移れる利点が大きいです。

Asepriteが強いのは、純粋にドット絵を量産するときです。
アニメーション、タイル、パレット前提の設計がまとまっているので、描く・動かす・管理するまでの導線が短くなります。
キャラクタースプライトや歩行アニメを中心に作るなら、作業の芯はこちらにあります。

Illustratorはロゴ、図形、拡大縮小前提のアイコン設計では有力ですが、1pxのドットを積んでいく制作とは考え方が異なります。
見た目をドット調に寄せることはできても、ピクセル単位で崩れ方まで制御する道具ではありません。

1px配置が“正しく”できる条件

ドット絵でいう「正しく置ける」とは、1pxの色が隣接ピクセルににじまず、1マスぶんの正方形として置かれるということです。
ここで差が出るのがブラシツールと鉛筆ツールです。

たとえば32x32pxのキャンバスを作り、左上の1マスに黒を1ドット置く場面を考えます。
ブラシツールのままクリックすると、境界に半透明のピクセルが混ざって見えることがあります。
見た目は黒い点でも、実際には周囲に薄い色が乗っていて、拡大したときに輪郭が甘くなります。
これではドット絵の1pxとしては不正確です。
鉛筆ツールを1pxで使えば、その位置に#000000の正方形1pxがそのまま入ります。
周囲にぼかしが出ず、1マスだけが塗られます。
ドット絵ではこの差がそのまま線の締まりになります。

グリッド表示も前提になります。
1 pixelごと、subdivision 1の設定にしておくと、どのマスに置いたかを追いやすくなります。
ただしグリッドはズーム倍率によって見え方が変わるので、常に全ピクセルが同じ見え方で表示されるわけではありません。
200%や400%のような整数倍で見ると、1px単位の判断が安定します。

1pxグリッドの表示と設定

最初に整えるのは、1マスを1pxとして見える状態です。
メニューの表示 > グリッドをオンにし、続いて環境設定 > ガイド・グリッド・スライスを開きます。
ここでGridline Every 1 pixel、Subdivisions 1に設定すると、グリッド1マスがそのまま1px単位になります。
日本語UIでは「グリッド線: 1 pixel」「分割数: 1」です。

この設定を入れる理由は単純で、どのマスに打ったかを目で追えるようにするためです。
ドット絵では、線を引くというより座標に置く感覚が強く、1pxずれただけで輪郭や表情が変わります。
32x32の顔アイコンでも、目の位置が1マス違うだけで印象が崩れます。
グリッドが1px単位になっていると、そのズレを作業中に拾えます。

表示倍率もここで揃えておくと作業が安定します。
拡大表示は200%・400%・800%のような整数倍が基準です。
これは画像の実寸を変えているのではなく、見え方だけを拡大している状態です。
キャンバスを400%で見ていても、画像自体が4倍にリサイズされたわけではありません。
実寸変更と表示倍率を混同すると、設定は合っているのに「なんだか崩れて見える」と感じやすくなります。

グリッド設定が正しく入ったかは、小さな配置テストですぐ確認できます。
たとえば任意のレイヤーで、x=4、6、8 / y=10の位置に1pxずつ3ドット置いてみると、等間隔に並んだ3点になります。
グリッド交点に合わせて置けていて、周囲ににじみや半透明が見えなければ、作業環境の土台はできています。

鉛筆ツール1px/100%の基本

次に触るのはツールです。
Photoshopでドット絵を描くときは、ブラシではなく鉛筆ツールを使います。
ツールバーでブラシツールを長押しし、鉛筆ツールを選択します。
設定はサイズ1px、硬さ100%、不透明度100%が基本です。
ここが1つでも崩れると、置いたはずの1ドットが半透明になったり、周囲にぼかしが出たりします。

ブラシとの差は、実際に1マス打つとすぐわかります。
ブラシは絵を塗るには便利ですが、ドット絵では輪郭の外側に中間色を作りやすく、ピクセルの境界が曖昧になります。
鉛筆ツールを1pxで使えば、そのマスだけがきっぱり塗られます。
線の角が立ち、あとで拡大しても輪郭が崩れません。

消しゴムも同じ発想で揃えておくと流れが途切れません。
ドットを削るときにぼけた消し方になると、描くときだけ鋭くても修正で輪郭が崩れます。
消しゴムを使う場面でも、ペンシル寄りの硬い設定で1px単位に合わせておくと、足したドットと消したドットの質感が揃います。

Nearest Neighborの設定箇所

ぼけの原因として見落とされやすいのが補間です。
Photoshopでは、拡大縮小や変形の初期設定がドット絵向きではないことがあります。
そこで環境設定 > 一般 > 画像補間を開き、既定の補間方法をNearest Neighbor系に変更します。
表記はバージョンで多少異なりますが、硬いエッジを保つニアレストネイバー系を選ぶのが基準です。

この設定は、キャンバスを眺める倍率の話ではなく、画像そのものを変形・リサイズするときの処理に関わります。
たとえば画像解像度や画像サイズで拡大するとき、あるいは自由変形を使うときに、補間が双三次のままだとピクセルの角が丸まり、境界に中間色が混ざります。
ドット絵ではその1回の処理だけで線の締まりが失われます。

設定を触っていない環境で作業を再開した際、自由変形の補間が既定のままになっていることがあり、32x32のスプライトを少し拡大しただけで輪郭がにじむ場合があります。
描画中は鉛筆ツールで問題なく進められていても、変形の段階で別の補間が入ると見た目のアウトラインが崩れるため、変形時には補間方式を確認する運用を推奨します。

スポイト/選択/スナップの補助設定

描く道具が整ったら、補助ツールもドット絵向けに寄せます。
スポイトはサンプル範囲をPoint Sampleにし、選択系はアンチエイリアスをOFFにしておくと、意図しない中間色や半透明の混入を防げます。
スナップやガイドは用途に応じてON/OFFを切り替え、挙動に不安がある場合は作業前に動作確認をしてください。

選択系ツールもアンチエイリアスを切っておくほうが整います。
とくにマジックワンドはアンチエイリアスOFF、許容値0〜10を目安にすると、境界をぼかさずに同色領域を取りやすくなります。
許容値を上げすぎると、近い色までまとめて拾ってしまい、せっかく分けた影色や縁色が一緒に選ばれます。
ドット絵ではその誤差が見た目に直結するので、低めから入るほうが扱いやすいのが利点です。

スナップは表示 > スナップと表示 > スナップ先 > グリッドで切り替えられます。
グリッドへきっちり揃えたい場面、UIパーツや複数要素の整列では便利です。
一方で、1ドット単位で手打ちしながら形を探る場面では、吸い付きが邪魔になることがあります。
ガイド合わせや整列ではオン、細かな打ち込みではオフという切り替えにしておくと、作業の流れが止まりません。

この4つ、つまり1pxグリッド、鉛筆ツール1px、Nearest Neighbor、補助ツールの素直な設定まで揃うと、Photoshopでも「ぼけない作業環境」が再現できます。
ここから先の工程は描き方の話になりますが、土台がこの状態なら、にじみの原因を設定側に疑わず作業へ入れます。

キャンバスサイズとパレットの決め方

推奨キャンバスサイズの使い分け

ドット絵を始めた直後に迷いやすいのが、どのサイズで描き始めるかです。
最初から大きなキャンバスを選ぶと、描ける量が増えるぶん判断項目も増えます。
初心者の段階では、情報量を意図的に絞ったほうが形と色の関係をつかみやすくなります。

基準にしやすいのは 16x16、32x32、64x64 の3段階です。
まず触れておきたいのは、最初の作業は透明背景・RGBで始める流れです。
背景色が最初から入っていると輪郭の抜けや余白の判断が鈍りますし、いきなり色数制限まで固定すると、形を探る前に運用の話で詰まりやすくなります。
作業中は自由度の高いPhotoshopのRGBで置き、仕上げ段階で必要なら整理するほうが進めやすい構成です。

16x16は、超小型のアイコンや記号的なモチーフに向きます。
ここでは「何を描いたか」より「何に見えるか」の比重が大きく、輪郭の1pxが意味そのものになります。
たとえばハート形なら、中心列に赤を縦4px置き、その左右に1pxずつずらして3px、2px、1pxと減らしていくと、たった数ドットでも形が読める配置になります。
16x16は描き込むサイズではなく、最小配置で認識が成立するかを学ぶサイズです。
32x32は、初心者から標準的な練習まで一番扱いやすいサイズです。
顔アイコンや小さなキャラクター、簡単なアイテムで情報の取捨選択を学べます。
目・髪・輪郭を2〜4色で置くだけでも顔として成立し、影色を1色足すだけで鼻筋や頬の向きが読み取りやすくなります。
64x64は、細密化の入口というより、余白を使った練習に向きます。
大きくなったぶん描き込みたくなりますが、このサイズの利点はディテールを詰め込むことより、シルエット、内側のパーツ配置、余白の取り方を落ち着いて試せることにあります。
32x32だと窮屈だった髪の跳ねや服の切り替えも、64x64なら無理なく検証できます。
輪郭を整えながら内部情報を足す練習台として優秀です。

透明背景とレイヤー設計

背景は最初から塗りつぶさず、透明背景で始めるのが基本です。
ドット絵では外周1pxの処理が見た目を決めます。
透明の上で描けば、輪郭が欠けているのか、単に背景色に埋もれているのかを切り分けやすくなります。
あとから別の背景色に載せ替えたときも、境界の粗さや不要なドットが見つけやすくなります。
透明背景で進めると、書き出し形式の判断や境界のチェックがしやすくなります。
輪郭が硬く、半透明を使っていない小さなアイコンならインデックス化して色数を抑えられますが、境界に半透明を使っている場合はアルファを保持できる形式での確認が必要です。
作業段階で透明部分を保持したまま確認できると、書き出し時の破綻を減らせます。

少数色パレットの作り方

初心者が情報量を制御するうえで、キャンバスサイズと同じくらい効くのが少数色パレットです。
最初から色を増やすと、描いているのか迷っているのか分からなくなります。
まずは 2〜4色で形を決め、その後に必要なら影色やハイライトを追加する進め方が安定します。

基本は、線色または最暗色、ベース色、明るい差分色の3系統を軸に考えるということです。
たとえば32x32の顔アイコンなら、肌、髪、輪郭の最低限で成立するかを見ます。
その時点で目や口まで無理に増色せず、顔の向きや髪型が読めるかを優先します。
そこへ影色を1色追加すると、顎の下、前髪の内側、首元に深さが生まれ、平面だったパーツに上下関係が出ます。
色を足したというより、配置できる情報の種類が増える感覚に近いです。

追加する色数の目安は、最大でも6〜8色までに留めると整理しやすくなります。
この範囲なら、どの色が輪郭用で、どの色が面の切り替え用かを頭の中で追えます。
逆に色数が多いのに形が弱い絵は、拡大すると賑やかでも、縮小すると何を描いたのか伝わりません。
ドット絵では、情報量は色数より配置で作るものです。
1pxの位置、隣り合う色の関係、空ける余白の幅のほうが、見た目への影響は大きく出ます。

パレットを組むときは、同系色をだらだら並べるより、役割で分けると扱いやすくなります。
ベース色、影色、ハイライト、アクセント色というように用途を先に決めると、どの色を増やすべきか判断しやすくなります。
色が足りないのか、単に置き方が曖昧なのかも見分けやすくなります。

インデックスカラー vs RGBの使い分け

作業の基本はRGBで問題ありません。
Photoshopの通常作業ではRGBの自由度が高く、色を試しながら形を探れます。
初心者の段階で最初からインデックスカラーに固定すると、色の差し替えや微調整の自由が狭くなり、描く練習より管理の練習になりがちです。

インデックスカラーには役割があります。
色数制限を意識した仕上げ、配布用データの整理、パレット固定の確認には向いています。
Photoshopのインデックスカラーは最大256色まで管理できるので、完成後に「実際には何色使っているか」を把握したいときに有効です。
少数色でまとめたつもりでも、RGB作業中に微妙な差分色が紛れ込むことがあります。
仕上げ段階でインデックス化すると、その色の散らばりが見えます。

カラーテーブルの考え方を使うと、必要に応じて色の順序や固定色を管理でき、減色時にどの色を残したいか判断しやすくなります。
ゲーム用のスプライトや配布素材のように、色の一貫性が求められる場面では、この管理が効きます。
複数の絵で同じ赤や同じ影色を使いたいなら、作業の最後にパレットを整理するだけでなく、使う色をテーブルとして固定しておくと差分管理がしやすくなります。

書き出しまで視野に入れるなら、インデックス系のPNGは色数を抑えた素材に向きます。
ただし半透明を含む境界には向きません。
輪郭が明確でアンチエイリアスのないドット絵なら相性がよく、透明部分も単純に扱えます。
反対に、半透明の縁や繊細なアルファを残したい絵はRGBベースの透過PNGで持ったほうが破綻しません。
作業中はRGB、仕上げ確認でインデックス化という順番にしておくと、描く自由と配布時の整理を両立できます。

Photoshopでドット絵を描く基本手順

アウトライン

制作は、輪郭を決めてから面を置き、影と光で情報を足し、仕上げでノイズを削る順番にすると崩れません。
Photoshopでもこの流れに固定すると、後から色を変えても形の芯が残ります。
先に陰影から入ると、その時点では立体に見えても、輪郭を直した瞬間に影の位置も総崩れになります。
ドット絵は1pxの移動で印象が変わるので、最初の輪郭固定がその後の手戻りを減らします。

アウトラインでは、鉛筆ツールを1pxにして輪郭を先に閉じます。
丸みのある部分を描くときは、曲線を感覚で置くより、2px→1px→2pxの“2-1-2”で階段を作るほうが整います。
小さなキャラの頬やスライムの頭頂部をこの並びで置いておくと、完成後に「ここだけガタついて見える」という修正が減ります。
実際、最初の段階で2-1-2を崩して曖昧な曲線にすると、ベース色を流し込んだあと、影を置いたあと、縮小確認したあとと、同じ場所を何度も触ることになりがちです。
逆に輪郭段階で階段のリズムを整えておくと、後工程では色だけ見ればよくなります。

ここでアンチエイリアスを自動に任せないのも理由があります。
自動補間に頼ると、輪郭の外側や内側に中間色や半透明が混ざり、どこが意図した1pxでどこが補間で生まれたピクセルなのか判別しづらくなります。
ドット絵ではその曖昧さがそのまま濁りになります。
輪郭の角を丸めるか、あえて尖らせるかは作者が1px単位で決めるべきで、そこを自動処理に渡すと、情報量の少ない絵ほど輪郭が弱く見えます。

ベース塗り

輪郭が閉じたら、主要面をベース色で埋めます。
塗りつぶしツールを使う場合は、隣接ピクセルにチェックを入れた状態で内側だけを流し込むと、外側まで同色が飛びません。
この段階で塗り漏れが出るときは、色の問題より先に輪郭のどこかが1px空いていることが多いです。
とくに斜め線のつなぎ目や、2-1-2の切り替わり部分に1pxの隙間が残りやすいので、バケツを使う前に輪郭が閉じているかを見ます。

たとえば32x32のスライムを作るなら、まず外周を濃い輪郭色で囲い、内側をベースの青で一気に塗ります。
そのとき右下の裾に1pxでも穴があると、塗りつぶしが背景側まで抜けます。
こういう漏れは許容値でごまかすより、輪郭の隙間を1pxで閉じたほうが後の管理が楽です。
ドット絵では、塗れない理由の多くが設定より線の開放にあります。

ベース塗りの段階では、細部まで色分けしすぎないほうがまとまります。
顔なら肌、髪、服、スライムなら本体色と口の中程度までに留め、まだ立体は作り込みません。
ここで必要なのは「何の形か読めるか」です。
情報を増やす前に、シルエットと大きな色面が成立しているかを見ると、後の影入れで迷いません。

影とハイライト

陰影を入れる前に、光源をひとつ決めます。
基本形なら左上から光が当たる前提にすると整理しやすく、右下に影、左上に明るさを寄せるだけで立体が読めます。
光源を途中で動かすと、同じ丸みに対して影が下にも横にも出てしまい、ドット数は少ないのに情報がぶつかります。
小さいサイズほど、光のルールは固定したほうが形が締まります。

影は、右下エッジに1pxで敷くのが基本です。
32x32のスライムなら、右下端の輪郭沿いに影色の #2a6b8a を1px列で追加すると、底面が沈み、丸い塊に見えてきます。
全部の外周を暗くするのではなく、光が届きにくい側だけに寄せるのが判断材料になります。
角の処理も同じで、L字の角なら外側まで影を回し込まず、内側だけに影を入れると折れ目が生まれます。
ここで角の外側まで塗ると、ただ輪郭が太っただけに見えます。

ハイライトは影より少なくて構いません。
左上端の外周に #b9ecff を1pxだけ置くと、光を受けた面が立ち上がります。
スライムの頭頂部や左肩側に1pxの縁取りを入れるだけで、面の向きが伝わります。
点のハイライトも同じで、2pxや3pxに広げなくても、1pxの白寄りの点で十分に“濡れた質感”や“光っている場所”が読めます。
ドット絵では、ハイライトを増やすことより、どこに置かないかのほうが見た目を左右します。

影とハイライトの両方で避けたいのが、自動アンチエイリアスが作る中間色です。
丸みを足したいからといって自動でぼかした縁を足すと、影色とベース色の間、ベース色とハイライト色の間に半端な色が入り、境界が鈍ります。
ドット絵の立体感はぼかしではなく、明暗の置き分けで作るものです。
1pxの影をどこまで伸ばすか、どの角で切るかを手で決めると、縮小しても情報が残ります。

仕上げ

仕上げでは、描き足すより整理が中心です。
まず余計な中間色を削ります。
ベース色と影色の間、ベース色とハイライト色の間に偶然できた色が混ざっていると、1px単位の意図がぼやけます。
基本は隣接する2色の関係だけで面を見せるほうが、縮小時にも輪郭が残ります。
色が多いのに立体が伝わらない状態は、情報が増えたのではなく判断が散った状態です。

次に、エッジの揺れを直します。
直線のつもりなのに1pxだけ飛び出している箇所、曲線のリズムから外れた1px、左右対称に見せたいのに片側だけ段差が違う箇所は、この段階で整えます。
とくに外周は、1pxの出っ張りがそのままノイズになります。
線をなぞる感覚ではなく、ピクセルの列として見て、必要なら直線化します。
2-1-2で作った曲線も、途中に1-1-1の不自然な並びが紛れると、そこだけ折れて見えます。

32x32のスライムなら、右下端に置いた #2a6b8a の影列が輪郭からはみ出していないか、左上外周の #b9ecff が必要以上に長く伸びていないかを見ると整いやすくなります。
影の列が1px多いだけで重心が右に寄り、ハイライトが1px多いだけで表面が平たく見えることがあります。
小さいサイズでは、描き込みより削り込みのほうが完成度を押し上げます。

この段階まで来ると、良いドット絵は「色が多い絵」ではなく、「1pxの理由が説明できる絵」になっています。
アウトラインで形を固定し、ベースで面を分け、光源を決めて影とハイライトを置き、仕上げで不要な色と揺れを消す。
この順番を守るだけで、Photoshopでも専用ツールに近い感覚でドット絵の密度をコントロールできます。

拡大・変形・選択で絵を崩さない操作のコツ

拡大表示と実寸変更の違い

ドット絵で崩れたと感じる場面の多くは、絵そのものが壊れたというより、表示の見え方と実寸変更を頭の中で混同したところから始まります。
キャンバスを200%や400%、800%で見ている状態は、あくまで拡大表示です。
ピクセルの実データを増やしているわけではないので、まずは整数倍表示を基準にして、1pxの角と列がどう並んでいるかを確認しながら進めるのが基本になります。

とくにPhotoshopは、ズーム表示やレイヤーの扱い方によって、見た目だけが少しなめらかに見えることがあります。
スマートオブジェクト化した素材も、非破壊で扱える反面、変形時の補間設定に引っぱられるので、見た目だけで「この斜線はきれい」と判断すると危険です。
ドット絵では、画面上でそれっぽく見えることより、実体ピクセルが1px単位でどう置かれているかのほうが優先されます。
整数倍で拡大した状態で輪郭を見て、必要なら等倍近くまで戻して全体の塊も確認する。
この往復で破綻を防げます。

制作中は400%前後で打って、細部確認では800%、全体のバランス確認では200%へ戻す、という流れにしておくと、線の揺れとシルエットの両方を見失いません。
表示倍率を上げることと、画像サイズを変えることは別の操作だと切り分けておくと、作業中の違和感の原因を見つけやすくなります。

Nearest Neighborでの変形/リサイズ

拡大縮小や自由変形で絵を壊さないための軸は、補間方式をNearest Neighborに寄せるということです。
Photoshopでは画像サイズの変更でも自由変形でも、補間の選び方ひとつで輪郭の硬さが変わります。
ドット絵のエッジを保ちたいなら、ハードエッジ保持の考え方で処理する必要があります。
実務では、整数倍の2xや4xで拡大する場面を優先し、それ以外の倍率変更はできるだけ減らしたほうが、列の乱れが出にくくなります。

最近も、アイコン用の小さなパーツを少しだけ傾けて位置を合わせようとして、自由変形をそのままかけたら、斜辺が一気ににじんだことがありました。
見た目ではほんの少しの調整でも、補間がBicubicのままだと、境界に中間色が差し込まれて1pxの段差が崩れます。
このときは変形後に違和感を追うより、補間をNearest Neighborに戻してからやり直したほうが早く、輪郭もすぐ復帰しました。
ドット絵では、失敗した線を後から削るより、最初に補間を外さない運用のほうが安定します。

スマートオブジェクトを使っている場合も同じです。
非破壊で扱える利点は大きいのですが、変形時の補間を誤ると、元データは無事でも見た目の結果はドット絵向きではなくなります。
スマートオブジェクトの中身を開いてピクセルの実体を確認し、必要ならラスタライズ後に1px単位で整える、という切り分けが有効です。
「拡大したのに線が太った」「縮小したら角が丸くなった」と感じたら、まず補間方式を疑うと原因にたどり着けます。

選択・スポイトの設定

描く工程だけでなく、選択と色取りの設定でも劣化は起きます。
選択ツールやマジックワンドを使うときは、アンチエイリアスをOFFにして、境界を1px単位で切るのが前提です。
ここがONのままだと、見えないところで半透明の縁が混ざり、移動や塗り替えのたびに輪郭が鈍ります。
許容値も広げすぎず、0〜10の範囲で厳しめに扱うと、意図しない近似色までまとめて拾う事故を減らせます。

マジックワンドで肌色の面を選んだつもりが、隣接するハイライトまで一緒に拾ってしまうと、修正後に1pxの境界線が消えます。
なげなわでも同様で、アンチエイリアスが入っていると、囲った内側の縁に半端な透明ピクセルが残ります。
ドット絵ではその1pxがそのまま輪郭なので、選択操作も描画の一部として扱ったほうが整います。

スポイトも同じで、サンプル範囲が広いままだと、周辺色や半透明をまとめて拾ってしまいます。
色を正確に取りたいなら、Point Sampleの考え方で1点だけを読む設定が合っています。
いわゆるポイントサンプルにしておくと、そのピクセルの色をそのまま取れるので、影色を拾ったつもりがベース色との中間色になっていた、というズレを避けられます。
ドット絵で色数管理が崩れると、意図しない新色が少しずつ増えて、仕上げの整理が重くなります。

1pxの配置調整では、移動ツールの矢印キーも地味に効きます。
たとえば左上に置いたハイライトの1px列が少し内側すぎるとき、選択範囲でその列だけ拾って、矢印キーを1回押して右へ1pxずらすだけで、光の当たり方が自然になります。
2回押せば2px動くので、小さいサイズの顔やアイテムでは押しすぎもすぐ目立ちます。
こういう微調整はドラッグよりも、1回=1pxと決めて動かしたほうが輪郭を壊しません。

スナップON/OFFの判断基準

スナップは常時ONが正解ではありません。
ドット絵では、揃える場面では助けになり、崩して表情を作る場面では邪魔になります。
たとえばUI用のタイル、床パターン、外枠の整列、複数パーツの基準合わせではスナップをONにすると、1px単位の列がそろい、左右や上下のズレを防げます。
グリッドや整列基準に吸着してくれるので、同じサイズのパーツを並べる作業では速さより再現性が上がります。

目のハイライトを1pxだけ外側に逃がす、口角を片側だけ1px上げる、髪先の段差を1pxだけ崩して柔らかさを出す、といった場面ではスナップが入っていると手の感覚が阻害されます。
整列が正しい局面と、わざとズラす局面は別です。
ドット絵の表情は、きれいにそろった配置だけでは出ません。
規則正しいタイル配置ではON、手打ちでニュアンスを詰める段階ではOFF、という切り替えで運用すると、意図したズレと意図しないズレを分けて管理できます。

とくにパーツを複製して並べたあと、その一部だけ崩して個性を出す作業では、最初はスナップONで骨格を作り、表情づけに入ったらOFFへ切り替えると流れが途切れません。
全部を手で合わせると整列ミスが出ますし、全部を吸着させると無機質になります。
スナップの使い分けは、精度と手癖を両立させるための操作設計だと考えると整理しやすくなります。

書き出し方法：PNG/GIFと避けるべきJPG

PNG-8/PNG-24/GIFの向き不向き

ドット絵の書き出しは、作業中の設定と同じくらい仕上がりを左右します。
結論から言うと、静止画のドット絵はPNGまたはGIFが基本で、JPGは避けるのが安全です。
ドット絵は1pxの境界そのものが輪郭なので、保存形式の段階でその境界が崩れると、きれいに打った線でも別物になります。

使い分けの軸は、色数と透過の質です。
色数が少なく、透過も「抜けるか抜けないか」の単純な構造ならPNG-8が合います。
PNG-8はインデックスカラー方式で、アイコンや小さなUIパーツのように色を絞った絵と相性がいい形式です。
ファイルを軽く保ちつつ、ドットの輪郭も保ちやすく、背景色が固定の素材なら十分に実用になります。

キャラの外周に半透明を含む縁取りがある場合や、影の端を少しだけなじませたい場合は、フルカラー＋アルファを保持できるPNG（一般に24bitカラー＋8bitアルファと表現されることがあり、一部資料では「PNG-32」と呼ぶ場合もあります）が向いています。
アルファを保持できるため、背景に重ねたときのエッジが自然に見えます。
GIFは最大256色までで、透過も1ビットです。
アニメーション用途では今でも意味がありますが、静止画のドット絵を書き出す形式として見ると、半透明が使えない点が足を引っ張ります。
とくに透過縁の処理では、白っぽいフリンジが乗ることがあります。
これは元絵にあった半透明ピクセルを保持できず、透明か不透明かの二択に丸めるためです。
背景が濃色に変わると、制作中には見えなかった白い縁が急に浮くこともあります。

JPGの圧縮ノイズと回避策

JPGがドット絵に向かない理由は、圧縮時に輪郭の近くへ余計な色を作るからです。
写真では目立ちにくい処理でも、1px単位で線を読ませるドット絵では、そのにじみがそのまま崩れになります。
とくに背景と輪郭のコントラストが強いアイコンでは、境界にブロック状のノイズが出やすく、黒い線の脇に灰色や汚れた中間色が差し込まれます。

以前、SNSアイコン用に小さな顔グラを急いで書き出したとき、形式を深く考えずJPGで保存したことがあります。
白背景に濃い輪郭の構成だったので、一見すると問題なさそうに見えたのですが、投稿後に等倍で見ると、背景と輪郭の間に細かなブロックノイズが乗っていました。
とくに目元と髪の外周がひどく、1pxで整えたはずの境界がざらついて見えました。
同じデータをPNGで保存し直すと、その濁りが消えて、輪郭が素直に戻りました。
ドット絵ではこの差がそのまま完成度に出ます。
回避策は単純で、マスターはPNG（フルカラー＋アルファ）で保持することを推奨します。
ここで言うフルカラー＋アルファは一般に24bitカラー（RGB）に8bitアルファを合わせた構成と説明されることがあり、資料によってはPNG-32と表記される場合がある点に注意してください。

色数制限とカラーテーブル運用

PNG-8やGIFを使うときは、色数制限を前提にした整理が必要です。
インデックスカラーは最大256色なので、元画像にある色をそのまま全部は持ち込めません。
ここで自動減色に任せきりにすると、似た色が統合されたり、逆に不要な中間色が残ったりして、ドット絵らしい締まりが失われます。

実務では、減色したあとにカラーテーブルを見て、残す色を調整する運用が効きます。
輪郭色、ベース色、影色、ハイライト色のように役割がはっきりした色は、必要に応じて固定したほうが崩れません。
たとえば肌の中間色と輪郭の茶色が近い場合、自動処理だけだと片方が吸収されて、顔の外周が弱くなることがあります。
そういうときは、輪郭に使う色を残し、肌側の揺れを整理するだけで見た目が整います。

この作業は、減色後の見た目を拡大して確認すると差が分かります。
輪郭の1列が別色に置き換わっていないか、影の面がまだらになっていないか、ハイライトだけが浮いて見えないかを見ると、どの色を守るべきか判断できます。
ドット絵では色数を減らすこと自体が目的ではなく、限られた色で形を保つことが目的です。
インデックスカラー化したあとに1pxの線や面がどう変わったかを見ずに書き出すと、制作中に積んだ調整がそこで失われます。

GIFを選ぶ場合は、256色制限に加えて1ビット透過も同時に背負うことになります。
色数を絞るだけならまだ扱えますが、輪郭の外側にわずかな半透明がある絵では、減色と透過の丸めが重なって、縁のギザつきが出やすくなります。
同じ1pxの輪郭でも、PNG-24は背景になじむように見え、GIFは輪郭の外側が急に切れた印象になります。
静止画のキャラやアイコンで完成後の見た目を優先するなら、PNG-24を基準に考えたほうが手戻りが少なくなります。

よくある失敗と対策

補間がBicubicのまま

設定を整えたつもりでも、変形やサイズ変更の瞬間にだけドットがにじむことがあります。
その原因としてまず疑うべきなのが、補間方式がBicubicのまま残っている状態です。
輪郭を1pxできっちり置いていても、拡大縮小や自由変形で中間色が挟まると、角が丸まり、直線の列も濁って見えます。
とくにPhotoshopは初期状態のままだとピクセルアート向けではないので、ここを外すと作業中は整って見えていた絵が、変形後に別物になります。
ありがちな流れは、描画そのものは鉛筆ツールで進めているのに、途中で回転や拡大をかけた瞬間だけ輪郭がにじむケースです。
スマートオブジェクトを使っている場合も、変形時の補間設定次第で同様の問題が起きることがあるため、変形を行うたびに補間方式を確認する運用が有効です。
実務報告ではNearest Neighbor系に揃えると事故が減るとの声が多いため、作業前に該当環境で動作確認を行ってください。

1px配置の差は、角の処理でよく出ます。
たとえば輪郭の角に1pxだけ外へ張り出した“でっぱり”があると、拡大表示では些細でも、等倍ではその1点だけが引っかかって見えます。
そこを1px削って、縦列と横列の流れを揃えるだけで、エッジがまっすぐ通った印象に変わります。
ビフォーでは角だけがふくらんで見え、アフターでは輪郭の向きが素直に読める、という差です。
ドット絵の修正は大掛かりな描き直しより、この1px単位の整理で見え方が締まる場面が多いです。

半透明ピクセルが混じる

「色は合っているのに、書き出すと縁が汚れる」「同じ色のはずなのにバケツで一発で埋まらない」というときは、半透明ピクセルや近似色が混じっています。
原因として多いのは、スポイトのサンプル方法が複数点になっていること、あるいはアンチエイリアスが有効なまま選択や塗りをしているということです。
見た目では同じ赤に見えても、実際には少しずつ違う色が並び、さらに透明度まで揺れていると、ドット絵としての情報が散ります。

ここではスポイトをPoint Sampleにして、1ピクセルをそのまま拾う状態に寄せるのが基本です。
選択や塗りつぶしでもアンチエイリアスを切っておくと、境界の色を勝手に混ぜません。
ドット絵で欲しいのは“なめらかさ”ではなく、“どのマスに何色があるかが読める状態”です。
半透明が紛れると、あとからPNG-8やGIFに寄せたときに縁が欠けたり、白っぽいフリンジになったりします。
色数が増えすぎると、特に小さなアイコンでは影領域に近似色が多数発生して面の役割が曖昧になることがあります。
対策としては、ヒストグラムやスポイトで色の偏りを確認し、隣接する類似色を役割ごとに統合することが有効です。
自動でまとめる前に、影とハイライトを手作業で分けて整理すると、輪郭への悪影響を抑えやすくなります。

書き出し後にぼやける

編集画面では整っていたのに、保存後の画像だけぼやけて見えることがあります。
ここで切り分けたいのは、画像そのものが壊れたのか、表示のされ方でぼやけているのか、あるいは書き出し形式が輪郭を壊したのか、という3つです。
初心者がつまずきやすいのは、拡大画像をJPGで保存してしまうケースと、小数倍率で拡大表示して「ぼけた」と判断してしまうケースです。

JPGは輪郭の近くに余計な色を作るので、1pxで読ませる絵とは相性が合いません。
とくに拡大して見せる用途では、ドットの境界にノイズが乗り、せっかく揃えた色面が濁ります。
静止画のドット絵ならPNG、色数を抑えた軽量運用なら条件次第でGIFを使い分けるほうが、輪郭の切れ方が素直です。

一方、ファイル自体は正常でも、プレビュー側で小数倍率になっていると、ピクセルの境界が補間されてぼやけて見えます。
これは画像データが変質したのではなく、表示の都合で中間色が挟まって見える状態です。
作業後の見え方を確認するときは、整数倍に拡大したプレビューで輪郭を見ると、実際の並びを判断しやすくなります。
拡大画像を配布用に作る場面でも、リサイズの段階で補間を混ぜず、整数倍で出したものを確認すると、1pxの列が崩れていないか追えます。

ぼやけの正体が半透明にあることもあります。
輪郭の外側に薄いピクセルが残ったままGIFへ落とすと、透明か不透明かの二択に丸められて、背景色次第で縁が濁って見えます。
逆に、輪郭が明確でアンチエイリアスのないドット絵で作った場合は、PNGで保存した時点の印象を保ちやすいのが利点です。
書き出し後の確認では、白背景だけでなく暗い背景でも輪郭を見ておくと、半透明の混入や形式由来のにじみを見つけやすくなります。

次のステップ：練習課題と発展

小さく終わらせる課題を1つ持つだけで、学習のテンポは安定します。
最初からキャラ全身や背景つきの作品を狙うより、16x16や32x32の顔アイコンを1点仕上げるほうが、1pxの判断と配色の整理が手に残ります。
私自身、SNS用の小さなアイコンを先に完成させたときのほうが続きました。
投稿や差し替えまで一気に進められるので、「描いたものがすぐ使える」という実感が次の練習につながります。

次にやることは、同じモチーフを少ない変更でもう一段よく見せる練習です。
アウトラインだけの状態からベース色を置き、影を1色、ハイライトを1色だけ足していくと、どの1pxが立体感を作っているのかが読み取りやすくなります。
色を増やす前に役割を固定すると、Photoshopでもパレット管理の感覚が育ちます。

発展としては、色数を意図的に絞って表現の密度を上げる段階に入ると、専用ソフトに移る前でもドット絵らしい設計力が身につきます。
練習課題としては、同じモチーフで影色・ハイライトの数を変えた比較や、ディザリングを使った階調の作り方を試すと効果的です。