technique
Shading and lighting
Choose 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.
Before this
This page assumes you are comfortable with:
- prerequisiteLight and formThe zones of light on a sphere and a cube, why shadows are never black, and how a 9 by 9 sphere in four values shows form while the same sphere pillow-shaded does not.
- techniquePalettes and rampsBuild each material's colors as a short dark-to-light ramp that shifts hue and saturation as it climbs, share the darkest steps across ramps, and keep the whole palette small enough to swap.
- 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.
Why you need this
A flat-colored silhouette tells the player what an object is. Shading tells them what shape it is, which way is up, and where it sits in the world. In pixel art you do this with two to four tones per material and no gradients, so every tone has to land on the right pixels. This page is the core of stage 2 of the pipeline, "draw the still": how to place the steps of a ramp on a form, what the two classic failures look like, and how outlines and cast shadows finish a sprite.
The idea
Decide where the light comes from once, for the whole game, and never change it per sprite. This cluster uses the upper left: highlights sit up and to the left of a form's center, shadows pool down and to the right, and cast shadows fall down-right on the ground. A sprite lit from the upper right placed next to one lit from the upper left looks wrong even to a player who cannot say why.
The vocabulary from Light and form: the highlight is the part of a surface facing the light, the midtone is the surface's local color under ordinary light, the shadow (core shadow) is the part turned away, and a cast shadow is the dark patch the object throws onto whatever is beneath it. Each of these is one step of the material's ramp from Palettes and ramps.
How many tones a sprite needs depends on its size:
| Tones | Steps used | Enough for |
|---|---|---|
| 2-tone | midtone, shadow | 8-pixel sprites, distant tiles, icons, anything the player never looks at closely |
| 3-tone | shadow, midtone, highlight | most 16-pixel sprites and tiles; the default for this cluster |
| 4-tone | shadow, midtone, highlight, plus a dark midtone or a small hot spot | 32-pixel sprites, metal, hero characters, anything the camera lingers on |
A 16-pixel sprite has about 150 to 200 visible pixels. Three tones give each tone room to form a cluster the eye can read. Four tones on that few pixels usually means one of them is a stripe two pixels wide, which is noise.
Worked example
Three forms, each 3-tone, each lit from the upper left. . transparent, 1 shadow, 2 midtone, 3 highlight.
Sphere. The highlight is a round cluster up-left of center, the shadow is a crescent hugging the down-right edge, and the midtone is everything between. The shadow's inner edge is a different curve from the outline:
. . . 2 2 2 . . .
. . 2 3 3 2 2 . .
. 2 3 3 3 2 2 1 .
2 3 3 3 2 2 2 1 1
2 3 3 2 2 2 2 1 1
2 2 2 2 2 2 1 1 1
. 2 2 2 2 1 1 1 .
. . 2 2 1 1 1 . .
. . . 1 1 1 . . .
Cube in the three-quarter view. Three flat faces, one tone each. The top faces up and toward the light: highlight. The left face is turned toward the light: midtone. The right face is turned away: shadow. Nothing inside a face changes tone.
. . . 3 3 3 . . .
. 3 3 3 3 3 3 3 .
3 3 3 3 3 3 3 3 3
2 2 3 3 3 3 3 1 1
2 2 2 2 3 1 1 1 1
2 2 2 2 2 1 1 1 1
2 2 2 2 2 1 1 1 1
. 2 2 2 2 1 1 1 .
. . . 2 2 1 . . .
Cylinder standing upright, side view. The top is a flat lit disc. The side is a sphere's shading stretched vertically: a highlight stripe left of center, a shadow stripe along the right edge, midtone between. Every row of the side is identical, which is what makes it read as a straight tube.
. 3 3 3 2 2 .
3 3 3 3 3 2 2
2 3 3 2 2 2 1
2 3 3 2 2 2 1
2 3 3 2 2 2 1
2 3 3 2 2 2 1
2 3 3 2 2 2 1
. 2 2 2 2 1 .
Almost every sprite is one of these three or a bent version of one. A head is a sphere, a torso is a cylinder, a crate is a cube, a tree trunk is a cylinder with a sphere on top.
Banding
Symptom: the tones form stripes of equal width that run parallel to the outline, so the sprite looks like an outline with more outlines inside it. The form flattens into a target. Cause: shading by tracing inward from the edge, one tone per ring. Fix: place tones by where the light hits, let the shadow's edge cross the outline at an angle, and give each tone a cluster with its own shape. Here is a rock, banded and then fixed:
. . 1 1 1 1 1 . . . . 1 1 1 1 1 . .
. 1 2 2 2 2 2 1 . . 1 3 3 3 2 2 1 .
1 2 3 3 3 3 3 2 1 1 3 3 3 2 2 2 2 1
1 2 3 3 3 3 3 2 1 1 3 3 2 2 2 2 1 1
1 2 2 2 2 2 2 2 1 1 2 2 2 2 1 1 1 1
. 1 1 1 1 1 1 1 . . 1 1 1 1 1 1 1 .
1 shadow, 2 midtone, 3 highlight. Left: each tone is the outline shifted inward by one pixel. Right: the highlight is up-left, the shadow is down-right, and the boundaries between tones cut across the rock instead of following its edge.
Pillow shading
Symptom: bright in the middle, dark all round the rim, the same on every side, so the form looks inflated like a cushion and appears to glow from inside. There is no light direction. Cause: the same inward tracing as banding, applied to a whole blob, often with a black outline that the shading fades into. Fix: pick the light side and put the highlight against that edge, not in the center; put the shadow against the opposite edge; let the midtone touch the outline on the lit side.
. 1 1 1 1 1 . . 3 3 3 2 2 .
1 2 2 2 2 2 1 3 3 3 3 2 2 1
1 2 3 3 3 2 1 3 3 3 2 2 2 1
1 2 3 3 3 2 1 3 3 2 2 2 1 1
1 2 3 3 3 2 1 2 2 2 2 1 1 1
1 2 2 2 2 2 1 2 2 2 1 1 1 1
. 1 1 1 1 1 . . 1 1 1 1 1 .
Left: pillow shaded, no light direction. Right: the same blob lit from the upper left. The highlight reaches the top-left edge and the shadow reaches the bottom-right edge, so the object now sits under a light instead of containing one.
Materials
Metal has high contrast: the shadow is close to the palette's darkest color, the highlight is a small sharp cluster near white, and the jump between tones is abrupt. Polished metal also reflects the ground, so its lower edge often has a thin band of a lighter tone under the shadow.
Cloth is soft: low contrast between its three tones, wide midtone areas, and shadows that gather in folds rather than along the silhouette. Its highlight is rarely brighter than the midtone plus one step.
Skin is a soft sphere-and-cylinder material with a slightly warm midtone and a shadow that goes toward purple or red. A face at 16 pixels is usually midtone with a single one-pixel shadow under the brow and jaw.
Wood is a cylinder material (trunks, planks, handles) with the shading stripes running along the grain. Its highlight is dull; wood does not shine unless it is varnished.
Stone is a cube-and-sphere material with medium contrast and chipped edges. Its tones form large flat clusters, and a single dark pixel at a corner reads as a chip.
Outlines
An outline is a line of a single color around the sprite's silhouette. Four choices:
| Style | What it is | Where it works |
|---|---|---|
| No outline | The sprite's own tones meet the background directly | Backgrounds, tiles, high-resolution sprites, styles that rely on value contrast |
| Black outline | One dark color, usually the palette's darkest, around everything | Sprites that must pop against busy or unknown backgrounds; classic console look |
| Colored outline | A darker step of each material's own ramp, so the outline changes color as it goes | Softer look, keeps materials distinct, needs a ramp with a step dark enough to separate from any background |
| Selective outline (sel-out) | Dark on the shadow side, lighter or absent on the lit side | Gives the outline itself a light direction; the most common modern pixel art choice for characters |
The same ball with a black outline and with sel-out. k is black, 1 shadow, 2 midtone, 3 highlight.
. . k k k . . . . 2 2 1 . .
. k 3 3 2 k . . 2 3 3 2 1 .
k 3 3 2 2 2 k 2 3 3 2 2 2 k
k 3 2 2 2 1 k 2 3 2 2 2 1 k
k 2 2 2 1 1 k 1 2 2 2 1 1 k
. k 2 1 1 k . . 1 2 1 1 k .
. . k k k . . . . k k k . .
Left: the black outline is the same weight all round and the ball sits inside it like a coin in a ring. Right: the outline is midtone at the upper left, darkens to the shadow tone along the sides, and is black only where the shadow is. The ball reads as lit and slightly larger. The trade is that the sel-out ball needs a background darker than midtone on its upper-left edge or that edge dissolves.
Cast shadows
A sprite standing on the ground needs a shadow under it or it floats. A flat ellipse of one dark color, offset down and to the right, is almost always enough at 16 pixels. s is the cast shadow, drawn at half transparency or as the ground's shadow tone.
. . 1 1 1 . . .
. 1 2 2 2 1 . .
. 1 2 2 2 1 . .
. . 1 1 1 . . .
. . s s s s s .
. . . s s s . .
The ellipse is wider than the sprite's foot and sits one or two pixels below it. If the sprite jumps, the shadow stays on the ground and shrinks, which is the cheapest way to show height.
In a game's art pipeline
Light direction and tone count are stage 1 decisions, recorded with the palette. Stage 2 applies them to every still: sprite, tile, prop, and background layer, so that the player never sees two objects lit from different sides. Character design for sprites chooses which forms make up a character before this page shades them. Tileable textures and tilesets shades tiles with the same light so a wall's lit edge is on the same side in every room. Dithering and Anti-aliasing in pixel art soften the boundaries between the tones this page places. In stage 5, Adapting purchased packs checks each pack's light direction first, because a pack lit from the upper right cannot be fixed by recoloring.
Common mistakes
- Light from different sides on different sprites. Symptom: a character lit from the left standing on a tile lit from the right; the scene feels wrong before the player can say why.
- Banding. Symptom: concentric stripes following the outline; forms look like archery targets.
- Pillow shading. Symptom: everything glows from the center and looks inflated; no object has a light side.
- Too many tones on a small sprite. Symptom: four tones on a 16-pixel sprite become one-pixel stripes and the sprite reads as noisy at 1x.
- Shading inside a flat face. Symptom: a crate's front face has a gradient, so it looks like a curved surface; keep each face of a cube one tone.
- Sprite without a cast shadow. Symptom: characters float a pixel above the ground and look pasted on.
Cost
Each additional tone adds pixels to place per sprite and one color to the palette per material. Going from 2-tone to 3-tone roughly doubles shading time, because the artist now decides a boundary between highlight and midtone as well as between midtone and shadow, on every frame of every animation. Going to 4-tone adds less time but more risk, since the fourth tone on a small sprite tends to become noise. Outlines cost little to draw and a lot to change: switching a finished sprite set from black outlines to sel-out means revisiting every edge pixel. Cast shadows are nearly free as a separate ellipse sprite the engine draws under everything. Where it hurts is animation: every tone boundary has to move consistently across frames, so a 4-tone hero with an 8-frame walk cycle is 32 shading decisions per material per pose. Keep enemies and props at 3-tone and spend the fourth tone on the character the camera follows.
Going further
- Dithering, for gradients on large surfaces that three tones cannot cover.
- Anti-aliasing in pixel art, for softening the stair steps where two tones meet.
- Character design for sprites, for reducing a character to spheres, cylinders, and cubes before shading.
- Tileable textures and tilesets, for lighting tiles so they repeat without a visible light seam.
Leads to
- techniqueCharacter design for spritesHow 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.
- techniqueTileable textures and tilesetsHow to draw tiles whose edges continue into their neighbors, hide the repeat, and build a full transition set from one base tile without rework.