Design pixel art as a small, precise asset

Turn a pixel-style image into a usable sprite.

Suggested reading time: about 8 minutes. This is an editorial production guide. Generation, performance and pricing comparison experiments have not been run.

Read first: Turn visual direction into words and specifications

What you will learn

• Distinguish a pixel-style image from a usable pixel asset.
• Choose the resolution and palette first.
• Check shape and position across frames.

Use resolution limits as a design constraint

Pixel art is more than making a small image look coarse. It uses limited pixels and colors to communicate shape, direction and movement. A generated image may look like pixel art while having an uneven grid, too many colors or blurred contours. For a game or UI, bring it to the chosen logical dimensions and refine it manually, pixel by pixel.

Decide what stays fixed first

For example, choose 32 × 32 as a practice size, then define the palette size and outline thickness. This number is an exercise setting in this course, rather than an industry standard or the only correct choice. Use integer scaling and nearest-neighbor sampling as a starting point when enlarging the image so you can inspect its actual pixels. CSS and texture filtering in the implementation also change the appearance, so do not judge completion only in the art software.

Read movement through balance and ground contact

For walking, align foot contact positions and the body’s vertical motion first. Add hair and cape movement later. Generating every frame independently can change the shape or clothing, so treating AI proposals as sketches and editing from a reference frame makes inspection easier. A sprite sheet is an image containing several arranged frames; the implementation also needs each frame’s rectangle and display duration.

Deliver pixels with timing and coordinates

1. 1Logical size and palette
2. 2Reference frame on the grid
3. 3Align each frame
4. 4Frame rectangles and durations
5. 5Inspect integer-scale playback

This original delivery diagram separates the image from the data that makes it animate. The runtime needs both; a visually attractive sheet alone does not define frame positions or timing.

Work and responsibilities

• Pixel artist: organizes contours and areas of color.
• Animator: handles balance and timing.
• Game or UI developer: controls frame display.

From input to output

Input	Workflow	Output
The logical dimensions, palette and facing direction.; The character’s reference shape.; The required animations and frame counts.	1. Select a generated concept or hand-drawn sketch.; 2. Redraw the contours at the logical dimensions.; 3. Simplify the palette and align the levels of shading.; 4. Create variants with a fixed reference position.; 5. Attach frame durations and rectangles, then check the implementation.	A transparent PNG.; A sprite sheet and frame definitions.; An editable original file, if needed.

Quality checks

• The grid stays aligned at integer display scales.
• There is no unwanted semitransparent bleeding at the background boundary.
• Ground contact and the center of mass do not drift unintentionally.
• Filtering in the implementation does not blur the asset.

Diagnose failures

Symptom	Possible cause	Correction
It looks retro but does not fit the usable dimensions.	The generated image only imitates the appearance of pixel art.	Redesign at low resolution and reduce detail.
The animation jitters.	Frame positions and silhouettes are inconsistent.	Overlay neighboring frames using onion skinning or a similar tool and correct the differences.

Exercise: A four-frame idle animation

Status: not run (not-run). This is a plan with completion criteria. No artifacts, duration, cost, performance or success rate have been recorded.

Plan a four-frame idle animation at a practice size of 32 × 32. Start with a breathing movement of about one pixel vertically.

Deliverable: A sprite and a frame-duration table.

Completion criterion: The loop holds its position, and contour errors and bleeding have been checked.

When you run it, separate predictions from results and record conditions and evidence using the experiment worksheet.

Open the experiment notebook

Related Catalog candidates

• Full-body retro RPG pixel character (Catalog candidate: pixel-rpg-standing)
• Small pixel-art avatar (Catalog candidate: pixel-app-avatar)
• Walk-cycle concept sheet (Catalog candidate: pixel-walk-concept)

Technical references and evidence scope

Technical references were checked on 2026-10-03. They support the technical concepts. The exercises, workflows and evaluation criteria are editorial proposals, rather than experiments performed by the source authors. Recheck changing APIs, prices and publication rules when using them.

• Aseprite Animation — Creating frames, timelines and animation.
• Three.js Texture — Texture, filtering and color-space settings.

Source scope checked on 2026-10-04

Aseprite’s animation documentation separates frames, timelines and frame duration. Three.js Texture exposes filtering separately; check the consuming application as well as the art file.