Stephen Whitmore

Pixel Art Notes

2015-07-19 16:23:37

Pared down notes for my own use, derived from this Pixel Joint thread.

Palette

Start with as few colours as possible; expand both shades and hues only as is necessary:

palette growth

Create the piece in shades of grey, then add color later. This is possible because relative value is a greater concern than hue, because hue can be more easily altered later on, after value relationships have been established.

Use a limited palette- If you can’t make a good sprite in 4 colors, using 40 colors isn’t going to help. Using a small palette is especially good for beginners because it forces you to focus on pixel placement and the relationships between groups of pixels.

The original, 4-color GameBoy palette is a good choice for beginners, as you’ll only have to worry about value, and not hue or saturation.

Dithering

An entire spectrum of dithering is possible, ranging from opaque to clear:

dithering

Stylized dithering, interlaced dithering, and random dithering can create a sense of texture:

stylized dithering interlaced dithering random dithering

Dithering works best when it doesn’t try to bridge a gap between contrasts that are too great:

dithering contrast

Single Pixels

Individual pixels usually are ignored by our eyes, but are helpful in cases like specular highlights, salient features, and particles like stars or bubbles.

specular and saliency particles

Colour Count

A low colour count remains valuable even for modern pixel art:

Cohesion

When you’re using less colors, the same colors will reappear throughout the piece more frequently. Since the different areas of the work share the same colors, the palette ties the piece together, unifying the work.

Control

The smaller the palette, the easier it is to manage. With a smaller palette, the effect of changing a single color is more substantial, and there are less micro-relationships to worry about.

Hue

The perceived hue of a colour depends on what’s around it.

trees

The trees are actually gray here, but the strong purple of the background (the complementary colour of green) tricks your brain into interpreting the foreground as green.

Saturation

Don’t go crazy with saturation. Please.

saturation

Luminescence

Much like in photography, a full brightness range yields higher contrast across the entire piece, and best results:

before dog after dog

Colour Ramps

Colour ramps are a grouping of colours, arranged by luminosity.

colour ramp