Pixel Art in Photoshop

Photoshop is a photo editor first, which means every default conspires against hard pixel edges. But with five settings changed, it becomes a capable pixel-art tool. Follow this workflow exactly and your pixels will stay razor-sharp.

Step 1: Set up a tiny canvas

Work at the final pixel resolution — not a big canvas you shrink later. For a game sprite, that's often 32 × 32, 64 × 64, or 128 × 128 px. Go to File > New, set dimensions in pixels, and set resolution to 72 PPI (irrelevant for the art itself, but it keeps file metadata sane). Zoom to 800–1600% with View > Show > Pixel Grid enabled so you can see individual pixels.

Step 2: Configure the Pencil tool

The Brush tool anti-aliases — the Pencil tool doesn't. Select the Pencil (nested under Brush, shortcut B then Shift+B to toggle), set size to 1 px, hardness 100%, opacity 100%, and in the options bar make sure Auto Erase is off. Every stroke now places solid, single-color pixels with zero soft edges. For fills, use the Paint Bucket with Tolerance 0, Anti-alias unchecked, and Contiguous as needed.

Step 3: Scale with Nearest Neighbor

This is where most Photoshop pixel art dies. To enlarge, use Image > Image Size, set the resample dropdown to Nearest Neighbor (hard edges) — never "Automatic" or "Bicubic." Scale by whole numbers: 32 × 32 at 800% becomes a crisp 256 × 256. Fractional scaling (like 350%) misaligns the grid and creates uneven pixels. The same principle — integer scaling — is what keeps converted pixel art sharp too.

Step 4: Limit colors with Indexed Color

Authentic retro art uses tiny palettes. Convert via Image > Mode > Indexed Color: set Palette to Local (Adaptive), Colors to 16 (or 8 for Game Boy vibes), Forced to None, and Dither to Diffusion at 75–90% for smooth gradients or None for flat posterized color. To use an exact retro palette instead, choose Palette: Custom and load a .ACT palette file (Lospec hosts thousands of authentic console palettes).

Step 5: Export without blur

Export with File > Export > Export As → PNG, and scale in the dialog using whole-number multipliers only. Double-check the preview at 100%: if edges look soft, something upstream used bilinear resampling — undo and redo with Nearest Neighbor. Save a PSD master at native resolution; never re-edit the scaled export.

Photoshop vs a dedicated converter

This workflow is powerful but manual: every photo needs hand-tuning. If your starting point is a photo rather than hand-drawn art, a dedicated tool is faster — PixelArtPro's converter applies downsampling, palette quantization, and Floyd–Steinberg dithering in one pass, and the Advanced Pixel Studio gives you palette editing and export controls without the Photoshop setup tax. Compare your options in our converter comparison, or see the SNES photo workflow for a concrete start-to-finish example.

Dithering in Photoshop: Diffusion vs Pattern

The Indexed Color dialog offers three dithering modes, and they produce visibly different retro textures:

• Diffusion (75–90%): error-diffusion dithering — organic, film-grain-like blending. Best for photos and smooth gradients. The Photoshop equivalent of Floyd–Steinberg.
• Pattern: ordered Bayer-style dithering — regular crosshatch dots. This is the authentic old-game look; real 16-bit artists placed these dots by hand.
• Noise: random dithering — rarely the right choice; it reads as static rather than texture.

Try this experiment: convert the same gradient with Diffusion 85% and Pattern, zoom to 400%, and compare. Diffusion melts; Pattern marches in formation. Neither is "better" — they're different eras of retro.

Building a custom retro palette (.ACT)

For authentic console colors instead of Photoshop's adaptive guess:

1. Download a palette from Lospec (e.g. PICO-8's 16 colors) as a .act or .pal file.
2. In the Indexed Color dialog, set Palette: Custom → Load your file.
3. Your image now uses exactly those 16 colors — the same constraint real hardware had.
4. To edit: open the Color Table (Image → Mode → Color Table) and double-click any swatch to tweak it; Save the table to reuse.

Building palettes by hand teaches you more about color than any tutorial: limit yourself to 8 colors for a week and watch your hue choices get dramatically smarter.

Pixel-art keyboard shortcuts that save hours

• B — brush/pencil; Shift+B toggles between them.
• X — swap foreground/background colors (invaluable for shading).
• Alt+click — eyedropper-pick a color without switching tools.
• [ and ] — shrink/grow the pencil tip.
• Ctrl+Alt+Z — step backward through history (set History States to 50+ in Preferences).
• Ctrl+0 — fit canvas to screen; Ctrl+1 — true 100% pixel view.

And one workflow habit: keep a reference layer of your sketch or photo at 20% opacity above the canvas while you place pixels, then hide it. Old-school animators did the same with onion skinning.

Key takeaways

• Work at native pixel resolution (32×32, 64×64...) — never draw big and shrink.
• The Pencil tool (not Brush), Nearest Neighbor interpolation, and disabled anti-aliasing are the holy trinity.
• Scale with Image Size → Nearest Neighbor and whole-number factors only.
• Indexed Color with 8–16 colors (or a loaded .ACT palette) gives authentic retro limits.
• Diffusion dithering for smooth gradients; Pattern for authentic old-game texture.
• For photo-to-pixel-art specifically, a dedicated converter does in seconds what takes 20 minutes manually.

Bonus: frame-by-frame animation basics

Photoshop's Timeline panel (Window → Timeline → Create Frame Animation) turns your pixel art into sprites that move. The workflow: duplicate your sprite layer per frame, nudge pixels 1–2 px between frames (small moves read as smooth at pixel scale), set frame delay to 0.1–0.2 sec, and export via File → Export → Save for Web as GIF with the exact color count. Two frames of a bouncing ball — squash on impact, stretch in flight — teaches more about game feel than any tutorial. Keep animations at native resolution; scale the GIF after export, never before.

Frequently asked questions

Keep learning