Skip to content

Instantly share code, notes, and snippets.

@hackergrrl
Created July 19, 2015 23:21
Show Gist options
  • Save hackergrrl/0fb7950e81ac23d5813f to your computer and use it in GitHub Desktop.
Save hackergrrl/0fb7950e81ac23d5813f to your computer and use it in GitHub Desktop.
Pixel Art Notes

Pixel Art Notes

Pared down notes for my own use, derived from http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299

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

Unclear: how do you determine what colours "belong together"?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment