technique

Character design for sprites

How to proportion, color, and silhouette a character so it reads at 1x on a phone, how many facing directions each view demands, and what a cast of characters costs in frames.

Before this

This page assumes you are comfortable with:

techniquePixel art fundamentalsPick one canvas resolution and one pixel size for the whole game, then place every pixel on purpose so lines, curves, and clusters read cleanly at 1x.
techniqueShading and lightingChoose the light direction once, then place highlight, midtone, and shadow on every form so the pixels describe volume instead of tracing the outline or glowing from the center.

Why you need this

A character sprite is the one piece of art the player looks at for the whole game, and it is also the piece that gets multiplied the most: every facing direction times every animation times every frame. Decisions made on the first still, about proportions, color count, and outline style, are copied into every one of those frames. This page is stage 2 of the pipeline, "draw the still", applied to the character, with one eye on the stage 3 multiplication that follows.

The idea

A character sprite has one job: the player must know who it is and which way it faces in a glance, at 1x, on a small screen, against busy ground tiles. Everything else (costume detail, expression, texture) is spent only after those two are secure.

Proportions by size

Real people are about 7.5 heads tall. Sprites are not, and the smaller the sprite, the bigger the head. Heads tall means the height of the whole figure divided by the height of its head.

Sprite height	Heads tall	Head	Eyes	What survives
16 px	about 2	7 to 8 px, more than a third of the figure	1-px dots, or a 1-px dark line	Facing, hair shape, one costume color
32 px	3 to 4	9 to 11 px	2 px, can show a pupil	Expression, hands, a weapon shape
64 px	5 to 6	11 to 13 px	3 to 4 px	Fingers, facial features, cloth folds

Why the head grows as the sprite shrinks: the face is where the player reads identity and facing direction. At 16 pixels a head drawn in proportion would be 2 pixels tall, with no room for an eye, so nobody could tell front from back. A 7-pixel head fits an eye, a hair line, and a nose bump, and those three pixels carry the whole facing signal. The body pays for it by becoming a short block, and the player never minds.

The silhouette test

Fill the sprite solid black on a white background. Two questions: can you tell which character this is, and which way it faces? If the answer to either is no, no amount of color or shading will fix it, because the eye reads shape before it reads anything else. Fix the silhouette first: a hat, a ponytail, a shoulder pad, a sword, a tail, or a distinctive stance.

For facing direction in side view, one asymmetric feature is enough: a nose bump, a hair tail on the back of the head, or feet that point one way.

Readability at 1x on a phone

On a phone at 3x display scale a 16-pixel sprite is 48 device pixels tall, about a fingertip. Rules that hold up there:

3 to 4 hues per character. Hair, skin, one costume color, one dark for boots and eyes. Each hue may have a two-step ramp (base and shadow), so the total color count lands around 6 to 8. Hues are what the eye counts; shades are not.
One accent color. The costume hue is saturated and unlike anything in the ground tiles. It is the color the player tracks in a crowd.
High value contrast against the ground. Value is how light or dark a color is, ignoring hue. A mid-value character on mid-value grass vanishes. Push the character lighter or darker than the tiles it walks on, or add an outline.

Distinguishing a roster

When a game has a party, an enemy roster, or a set of player skins, vary in this order:

Silhouette first. Different height, different head shape, one different accessory. This works even in the black-fill test.
Color second. Each character owns an accent hue nobody else uses.
Detail last. Belt buckles and trim are invisible at 1x and only help in the portrait.

A roster that differs only by palette swap is fine for enemy tiers (green slime, blue slime, red slime) and wrong for a party the player must tell apart mid-fight.

Worked example

A 16 by 16 side-view character facing right, built in four stages. Light is from the upper left.

Stage 1, silhouette. Head 7 rows, a ponytail on the back, a nose bump on the front, feet pointing right.

. . . . . S S S S S S . . . . .
. . . . S S S S S S S S . . . .
. . . S S S S S S S S S S . . .
. . S S S S S S S S S S S S . .
. . S S S S S S S S S S S S . .
. . S S S S S S S S S S S . . .
. . . S S S S S S S S S . . . .
. . . . . . S S S S . . . . . .
. . . . . S S S S S S S . . . .
. . . . S S S S S S S S . . . .
. . . . S S S S S S S S . . . .
. . . . S S S S S S S S . . . .
. . . . . S S S S S S . . . . .
. . . . . . S S . S S . . . . .
. . . . . . S S . S S . . . . .
. . . . . . S S . S S S . . . .

. transparent, S filled.

Black-fill test: the ponytail on the left and the nose and toe on the right say "facing right" without a single interior pixel.

Stage 2, flat colors. Four hues: hair #7a3b2e, skin #f2c9a0, tunic #3e7cb1 (the accent), dark #2b2233 for eye and legs.

. . . . . h h h h h h . . . . .
. . . . h h h h h h h h . . . .
. . . h h h h h h h h h h . . .
. . h h h h s s s s s s s s . .
. . h h h h s s s s d s s s . .
. . h h h s s s s s s s s . . .
. . . h h s s s s s s s . . . .
. . . . . . s s s s . . . . . .
. . . . . t t t t t t t . . . .
. . . . t t t t t t t t . . . .
. . . . t t t t t t t t . . . .
. . . . t t t t t t t t . . . .
. . . . . s t t t t t . . . . .
. . . . . . d d . d d . . . . .
. . . . . . d d . d d . . . . .
. . . . . . d d . d d d . . . .

h hair, s skin, t tunic, d dark.

One eye pixel at $(10, 4)$ is enough. The hand at $(5, 12)$ is one skin pixel.

Stage 3, shading. Each hue gets a shadow step, placed on the lower right, away from the upper-left light: hair shadow #4e2419, skin shadow #c98d6b, tunic shadow #27527a.

. . . . . h h h h h H . . . . .
. . . . h h h h h h h H . . . .
. . . h h h h h h h h H H . . .
. . h h h h s s s s s s S S . .
. . H h h h s s s s d s s S . .
. . H h H s s s s s s s S . . .
. . . H H S s s s s S S . . . .
. . . . . . S S S S . . . . . .
. . . . . t t t t t t T . . . .
. . . . t t t t t t t T . . . .
. . . . t t t t t t T T . . . .
. . . . t T t t t t T T . . . .
. . . . . S T T T T T . . . . .
. . . . . . d d . d d . . . . .
. . . . . . d d . d d . . . . .
. . . . . . d d . d d d . . . .

h hair, H hair shadow, s skin, S skin shadow, t tunic, T tunic shadow, d dark.

The neck (row 7) is entirely shadow because the chin blocks the light. The hem (row 12) is shadow because the body curves away. Seven colors total.

Stage 4, the outline decision. A full 1-pixel outline around a 16-pixel sprite costs 2 pixels of width and height that the figure no longer has, and it makes every sprite look like a sticker. A selective outline puts a dark line only on the shadow side, where the sprite meets the ground and where it most needs separation from tiles:

. . . . . h h h h h o . . . . .
. . . . h h h h h h h o . . . .
. . . h h h h h h h h H o . . .
. . h h h h s s s s s s S o . .
. . H h h h s s s s d s s o . .
. . H h H s s s s s s s o . . .
. . . H H S s s s s S o . . . .
. . . . . . S S S o . . . . . .
. . . . . t t t t t t o . . . .
. . . . t t t t t t t o . . . .
. . . . t t t t t t T o . . . .
. . . . t T t t t t T o . . . .
. . . . . S T T T T o . . . . .
. . . . . . d d . d o . . . . .
. . . . . . d d . d o . . . . .
. . . . . . o o . o o o . . . .

o outline #1a1420; other letters as above.

Three choices: no outline (best on dark or plain grounds), selective outline (the usual pick at 16 px), full outline (best when the sprite must sit on any tile in the game, and common in 32-px games). Choose once per game.

Facing directions per view

View	Directions to draw	Mirrored for free	Notes
Side view	1	1	Left is right mirrored; the sword hand swaps
Three-quarter top-down (the usual RPG angle)	3: down, up, one side	The other side	4 directions shown
Isometric	4 or 8	Sometimes 2 of them	8 if the character moves diagonally
Pure top-down	1	Rotated by the engine	Only works if the sprite has no lighting bias

Mirroring costs nothing at run time but is wrong for asymmetric characters: a shield on the left arm jumps to the right arm when the sprite turns around. Either design symmetric characters or accept the swap.

Consistency across a cast

Every character in a game shares: the same light direction, the same outline choice, the same eye style (dot, line, or two-pixel), the same pixel size, and the same number of shading steps per hue. A cast where one character was drawn with upper-left light and another with top light looks like it came from two packs, which is exactly the failure that Adapting purchased packs exists to repair.

In a game's art pipeline

Stage 2, draw the still. The proportions, hue count, and outline choice here are constrained by the resolution and palette written down in stage 1 (Pixel art fundamentals, Palettes and ramps). The finished still is what Sprite animation multiplies into cycles, and the facing-direction count from this page sets the size of that multiplication. The shading vocabulary (base, shadow, where the light lands) is from Shading and lighting.

Common mistakes

Real proportions at 16 px. A 2-pixel head with no eye. The character reads as a fence post and the player cannot tell which way it faces.
Too many hues. Six costume colors at 16 px turns the character into noise. In the black-fill test it was fine; in color it dissolves.
Character and ground at the same value. The sprite is invisible on grass and only visible on the road. Fix the value contrast, not the hue.
Roster differs only by detail. Two knights with different belt buckles are the same knight in a fight. Change the silhouette.
Mixed light directions across the cast. One character lit from the upper left and one from above look pasted in from different games.
Mirroring an asymmetric character without deciding to. The sword changes hands every time the player turns, and someone will report it as a bug.

Cost

The still itself is cheap: a 16-pixel character is an hour or two, a 32-pixel character an afternoon. The multiplication is the cost. A three-quarter top-down character with 4 directions, 4 animations (idle, walk, attack, hit), and 6 frames each is $4 \times 4 \times 6 = 96$ frames. With one side direction mirrored, 72 are drawn and 24 are free. Move to 8 directions for isometric and the same character is 192 frames. Add a run and a death and a 4-direction character reaches $4 \times 6 \times 6 = 144$ . File size is never the problem; 144 frames of 16 by 16 is a 192 by 192 sheet, well under 50 kilobytes. Artist time is, and it hurts the first time a costume change has to be redrawn on all 144 frames. Finish the still, run the silhouette test, and get the design approved before frame two exists.

Going further

Sprite animation, for the frame counts that fill in the multiplication above.
Shading and lighting, for placing the shadow step on a curved form.
Palettes and ramps, for choosing the accent hue so it is unlike every ground tile.
Projections and views, for what each view shows and hides of a figure.
Adapting purchased packs, for the case where the cast came from two sources with different rules.

Back to Pixel art for games