Pixel Art for Games Lesson 4 of 6

Shading and light

One light source, avoid banding, and dither on purpose.

Pick a single light direction (top-left is a safe default) and commit to it for the whole sprite. Surfaces facing the light get your lighter values; surfaces facing away get your darker values. Consistency of light is what makes a flat grid of pixels read as a 3D form.

Avoid banding

Banding happens when two shades run parallel along the same stair-step, creating an ugly stripe that flattens the form. Break banding by staggering where your value transitions happen instead of stacking them on the same diagonal.

Two shaded pixel grids. On the left the light-to-dark value boundary runs as one long parallel diagonal stripe (banding) that flattens the form; on the right the boundary is staggered so the form reads as a volume.
Banding (left): the value seam stacks into one stripe. Staggered (right) reads as form.

Dithering

Your turn

Shade this ball with one light source (top-left).

Light color where the light hits (top-left), shadow color opposite it, mid color between. The faint guide shows the target — match it to pass.

Match 85% to pass · now at 0%

Colors

Dithering is alternating two colors in a checker or scatter pattern to fake a third shade or a gradient without adding a new color. Use it sparingly and intentionally — for texture, gradients, or old-console vibes. Over-dithering looks noisy.

Quick check

What is "banding" in pixel shading?

▶ Shade a simple ball Light from the top-left, three values, no banding. A ball is the classic exercise.
← Previous Next lesson →