Pixel Art for Beginners

Every pixel is a decision

The defining feature of pixel art is not that it is small or blocky. It is that every pixel is placed on purpose. In a normal digital painting a brushstroke lays down thousands of pixels whose individual values nobody chose. In pixel art, if a pixel is a particular colour it is because someone decided it should be.

That changes how you work. You cannot sketch loosely and refine, because at 16×16 there is no room to refine — a single misplaced pixel is a visible flaw, and a two-pixel change can alter a character's whole expression. The craft is closer to mosaic than to painting.

It also explains why beginners find small canvases so hard and reach for bigger ones. That instinct is worth resisting. A larger canvas does not make the art easier, it just lets you avoid the decisions that make pixel art look like pixel art. Start at 16×16 in the editor and stay there until it stops feeling cramped.

Choosing a canvas size

The historical sizes are not arbitrary. Early consoles worked in 8×8 tiles because of how their graphics hardware fetched memory, and sprites were assembled from those tiles — which is why so much classic pixel art is 16×16 or 32×32. Working at those sizes is not nostalgia; it inherits constraints that were genuinely well-tuned for legibility at a distance.

One practical rule: decide the size before you start and do not grow it to solve a problem. "This would work if I had more pixels" is nearly always really "I have not simplified this shape enough yet".

The silhouette test

Before any colour or detail, a sprite has to be readable as a shape. Fill it entirely black and ask whether you can still tell what it is. Professional character designers do this constantly, and at pixel-art sizes it is not optional — a sprite that fails the silhouette test cannot be rescued by detail, because there is no room for detail to do the rescuing.

This is why classic game characters have such exaggerated proportions. Oversized heads, distinctive hats, and outlines that bulge in one specific direction are all silhouette work. At 16 pixels tall you have perhaps four pixels for a head, and the only way a character reads as a character is if its outline is unmistakable.

A useful practical order: block the silhouette in a single flat colour, squint at it, adjust until it reads, and only then start adding interior detail. Working the other way round — detail first, shape later — is how you end up with a sprite that looks fine at 8× and turns to mush at 1×.

Why a limited palette helps

Beginners assume the old palette limits were a pure handicap. They were a constraint, certainly — the NES could show a handful of colours per sprite — but they also produced a great deal of the coherence that makes that era's art look so unified.

A limited palette forces every colour to earn its place, and it makes a piece hang together automatically because everything shares the same set of hues. Give yourself unlimited colours and you get subtle inconsistencies everywhere: fifteen nearly identical greys that read as noise rather than as shading.

A workable starting rule is three to five colours per material: a base, one shadow, one highlight, and possibly a darker outline. A character with skin, hair, a shirt and trousers might use sixteen colours total and look richer than one using sixty.

The refinement that makes shading look professional is hue shifting. Do not make a shadow by simply darkening the base colour — shift its hue toward blue or purple as well, and shift highlights toward yellow or orange. Real light behaves this way, ambient light in shadow being cooler, and flat darkening is the single most recognisable mark of an amateur palette.

Shading without mush

Shading in pixel art means placing bands of colour deliberately, and the failure mode has a name: pillow shading. That is shading uniformly inward from every edge, as though the light source were directly in front of the object, which makes everything look like a soft cushion and nothing look solid.

The fix is to pick a light direction and commit to it. Top-left is the near-universal convention, largely because it matches how most people expect light to fall. Once chosen, every surface facing up-left gets a highlight, every surface facing down-right gets a shadow, and the sprite immediately acquires a sense of form.

The second common failure is banding: shading bands that run parallel to each other in a way that produces an unintended stripe. It happens when a diagonal line of shadow sits directly alongside a diagonal line of base colour, and the eye reads the pair as a band rather than as a gradient. Breaking the parallel by a pixel or two removes it.

The third is doubles — jagged lines built from irregular runs, like three pixels then one then two. A clean pixel line uses a consistent rhythm: all twos, or all threes, decreasing smoothly. Inconsistent runs read as noise even when nobody can articulate why the line looks wrong.

Dithering, and why it is mostly a trap

Dithering alternates two colours in a checker or scattered pattern to suggest a third tone that is not in your palette. It was essential when hardware could display only a handful of colours, and it is one of the most visually distinctive techniques of the era.

It is also where beginners most often go wrong, because it looks technical and therefore feels advanced. Applied across large areas it produces a busy, noisy texture that fights the clean shapes pixel art depends on — and since modern displays have no colour limit, the original justification is gone.

Where it still earns its place is in transitions and texture: a narrow band of dithering between two shading tones softens the step between them without needing a third colour, and a scattered pattern reads convincingly as roughness on stone or bark. Both uses are local and deliberate. If a dithered area is large enough that you notice the pattern before you notice the shape, it has become decoration rather than shading.

Outlines and when to break them

Outlines separate a sprite from whatever is behind it, which matters enormously in a game where the background is unpredictable. There are three broad approaches.

A solid black outline is the strongest and reads at any size, but it can look heavy and flatten the form. Coloured outlines — a darker version of whatever the adjacent colour is — keep the separation while feeling more integrated, and are the usual choice for detailed work. Selective outlining puts an outline only where the sprite needs to separate from a background, leaving interior boundaries unoutlined, which keeps the silhouette strong without making the inside look like a colouring book.

Whichever you choose, consistency matters more than the choice itself. A sprite with a black outline on one arm and a coloured one on the other looks broken even to someone who cannot say why.

Anti-aliasing: by hand, or not at all

Anti-aliasing softens a jagged edge by placing intermediate-tone pixels along it, and in pixel art it must be done manually and sparingly. A single mid-tone pixel at the corner of a diagonal can take a harsh stair-step and make it read as a smooth curve.

Automatic anti-aliasing — the kind applied by a filter or by scaling software — is the opposite and should be avoided entirely. It softens every edge indiscriminately, which is precisely the crispness that defines the style. If your art looks blurry, this is nearly always what happened.

The rule of thumb is to anti-alias interior detail and leave the outer silhouette hard. Softening the outer edge means the sprite blends into a background you cannot predict, and half-transparent fringe pixels around a character are worse than a few visible stair-steps.

Exporting so it survives

More finished pixel art is ruined at export than at any other stage. The issue is scaling: enlarging a 32-pixel sprite for display requires nearest-neighbour sampling, which duplicates each pixel into a solid block. Bilinear or bicubic interpolation, which every general-purpose image tool uses by default, blends neighbouring pixels and destroys the art.

Always scale by a whole-number multiple. Going from 32 to 128 pixels is 4× and every original pixel becomes an exact 4×4 block. Going from 32 to 100 is 3.125×, which means some pixels become three blocks and some four, and the sprite acquires a subtle uneven wobble that is very hard to unsee.

Use PNG, never JPG. PNG is lossless and supports transparency; JPG is lossy, has no alpha channel, and its compression is specifically bad at the hard edges pixel art is made of. A JPG of a sprite will have coloured fringing around every edge. The pixel art editor exports nearest-neighbour PNG at 1× through 32× for exactly this reason, and keeps unpainted pixels transparent.

Animation, and why less is more

Pixel art animation runs on far fewer frames than people expect. A convincing walk cycle can be four frames; a classic idle animation is often two. The reason is that at these sizes the eye fills in an enormous amount, and additional frames add work without adding perceived smoothness.

The technique that carries most of the weight is exaggeration. A character bobbing up and down by a single pixel per frame reads as a whole walk cycle, because a pixel at this scale is a large proportion of the character. Subtlety does not survive: motion either registers or it does not, and a half-pixel of intent registers as nothing.

A related trick is the squash and stretch borrowed from traditional animation. Compressing a character by one pixel vertically as it lands, then stretching it by one as it jumps, adds a startling amount of life for two edited frames. The same applies to secondary motion — a cape or a ponytail lagging a frame behind the body sells movement more effectively than animating the body more finely.

This is where the shift tool earns its place. Moving a whole sprite by one pixel and saving that as a second frame is the cheapest possible animation, and for idle bobs and hovering objects it is genuinely all you need.

A first sprite, start to finish

If you want a concrete exercise, make a 16×16 item icon — a potion bottle, a key, a sword. Items are far more forgiving than characters because they have no anatomy to get wrong, and they teach every fundamental.

Block the silhouette in one flat colour and check it reads. Add the base colours for each material. Pick top-left lighting and add one shadow tone and one highlight tone per material, hue-shifted rather than merely darkened. Add an outline. Then step back, view it at 1×, and remove anything that is not doing work.

That last step is the one most people skip and the one that improves a sprite most. At these sizes, detail competes with legibility, and the sprite that reads instantly at actual size beats the one that looks intricate at 8× every time.

Open the pixel art editor and try it — the flip tools make symmetric objects quick, and the used-colours list will tell you honestly how disciplined your palette really is. If you want to design a colour scheme first, the colour studio handles the hue shifting, and the spirograph is a different kind of geometric drawing if you want a change of pace.