Step 1 · Start from an idea, or nothing at allStart here5 min

Your first pixel asset

Start on an empty grid and finish with a transparent PNG — the shortest path through the whole pipeline.

You finish with

A 32×32 sprite exported as a transparent PNG at 1× and 4×.

1
Open a canvas sized for your game
Pick a grid that matches how the asset is used — 16×16 for icons and coins, 32×32 for characters and props, 64×64 when you need detail. Starting too large is the usual mistake: detail you can only see zoomed in is wasted.
New canvas
2
Block the silhouette before any shading
Fill a flat shape first, then add one darker tone for shadow and one lighter for highlights. If the sprite reads at 1× zoom, the rest is polish. Zoom with the view controls and keep drawing at 100% sometimes — that is what players see.
Undo (Ctrl+Z) has no step limit here, and Ctrl+S saves immediately.
3
Delete the background instead of painting it white
Use the eraser for the area around the sprite so those pixels are truly transparent, not white. Transparent pixels cost nothing in your engine and never show a halo over moving backgrounds.
4
Export as PNG, then check it outside the editor
Export at 1× for the asset itself and at 4× for documentation or store pages. Scaling is nearest-neighbour, so edges stay crisp — any blur you see came from the viewer, not the file.
Open the editor

The editor habits that separate an asset from a drawing: hard edges, honest alpha, and a palette you control.

Tools in this guide

Step 1 · Start from an idea, or nothing at allStart here5 min

Start on an empty grid and finish with a transparent PNG — the shortest path through the whole pipeline.

You finish with

A 32×32 sprite exported as a transparent PNG at 1× and 4×.

1
Open a canvas sized for your game
Pick a grid that matches how the asset is used — 16×16 for icons and coins, 32×32 for characters and props, 64×64 when you need detail. Starting too large is the usual mistake: detail you can only see zoomed in is wasted.
New canvas
2
Block the silhouette before any shading
Fill a flat shape first, then add one darker tone for shadow and one lighter for highlights. If the sprite reads at 1× zoom, the rest is polish. Zoom with the view controls and keep drawing at 100% sometimes — that is what players see.
Undo (Ctrl+Z) has no step limit here, and Ctrl+S saves immediately.
3
Delete the background instead of painting it white
Use the eraser for the area around the sprite so those pixels are truly transparent, not white. Transparent pixels cost nothing in your engine and never show a halo over moving backgrounds.
4
Export as PNG, then check it outside the editor
Export at 1× for the asset itself and at 4× for documentation or store pages. Scaling is nearest-neighbour, so edges stay crisp — any blur you see came from the viewer, not the file.
Open the editor

The editor habits that separate an asset from a drawing: hard edges, honest alpha, and a palette you control.

Tools in this guide

Open a canvas sized for your game