Hands-on workshopBeginner5 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×.

Want to make your first character together?

This is the quick overview. The complete course takes you through a 16 × 16 slime in six lessons, with a practice canvas, examples and saved progress at every step.

Start the complete course

01What you will learn

Choose a manageable canvas size.
Block a readable shape before adding detail.
Export a transparent PNG at native size and an integer scale.

Start with: An idea for one simple character or object. For a guided drawing project with practice files, start the six-lesson first asset course.

02See the technique

What gets in the way

A large canvas full of tiny details can hide an unreadable silhouette. A white background is still part of the image.

The useful change

Start at 32 × 32, check the whole shape when zoomed out, and erase outside the sprite so PNG export keeps true transparency.

03Follow the steps

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

04Practice in Pikanim

Open a tool, follow the steps with your own asset, and come back when your result is ready.

Pixel Art Editor

05Check your result

Compare your own work with these checkpoints. Check each one when your result is ready.

My sprite fits a 32 × 32 canvas and reads when zoomed out.The background is transparent rather than painted white.I downloaded the native PNG and a crisp 4× preview.

0 of 3 checked

Progress saves in this browser. No account needed.

06Continue learning

Next workshop

Clean edges, alpha and palettes

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

Your saved projects

Pick up the asset you made and keep building.

03Follow the steps

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

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.

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.

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