Let's look at this sprite from a NES game from 1992, Little Samson:
In the loop I show the clusters that make up his face, headband and hair.
A cluster of pixels of the same color here, exactly because the NES could allow only 3 colors (plus one for transparency) for the sprite, becomes extremely important. The headband is just one, the hair is just one, the shape of the face is one. The eye is one, and the other eye is another. This is a very pure example.
If we change a single pixel of these important clusters, what they signify changes, along with their relationship with the clusters around them.
Here's what happens when we move a single pixel around on each frame in various places. Note how the balances and relationships between elements change
NES art is a very useful step in learning to do pixel art because it forces the beginner pixel artist to realize the power of pixel clusters and finding ideal shapes for them to work in unison to convey the intended characterization, without getting bogged down in dozens of colors and a huge resolution.
Let's look at something a bit more complicated:
This is a piece by the lovely Kenneth Fejer. You can see his work here
Let's look at a detail of the piece up close:
The cluster of pixels outlined in red is where we aim our attention. Around it there is another color tone that is halfway between the bright green and the dark green. Single pixels smooth out the pixel cluster we're looking at. That is called buffering
or manual anti-aliasing
. I will not go into detail as to what antialiasing is here, more capable artists/german-aa-machines are working on texts to fulfill this purpose. Let's for now assume you are well aware of how anti-aliasing works. The reason I am showing you this piece in particular is because if you look at the buffer shade there between the two main colors, you'd think 'well... these pixels aren't a pixel cluster, are they'. They do not touch, they are - mostly - single pixels, so what are they exactly?
They are part of the meta-cluster that they are buffering towards, or from. For reasons of simplicity, it is best to think of them as always belonging to the smaller cluster that is touching the bigger cluster, but this doesn't really matter in applicative terms.
Once the artist realizes that the anti-aliasing around a cluster is nothing more than part of that cluster and its main purpose is to define that shape better, they stand to expel a lot of the anxiety and confusion that usually occurs to the beginner when they're faced with the near-infinite options of pixel placement that are available when they start a new piece. The artist can stop concerning themselves with just placing single pixels willy-nilly and replacing them and rearranging them by trial and error "until something looks right" and can instead apply a functional, progressive way in which to build their art. Pixel clusters
are the tool that the pixel artist uses to convey 99% of the render of their object, not pixels themselves
. The beginning artist should start a piece with a single pixel cluster shaped as the silluette of what they're trying to convey. Let's say, for example that I want to draw a face.
This is what I start with. Then the silhouette should be segmented to temporary planes. The experienced artist, once comfortable with visualizing his model might not have to do this stage and go directly to the next one, but for the purposes of this tutorial I'll go ahead and do it:
This is more or less a simplified 3d wireframe, with the planes of the face. This isn't lit yet, it just shows me a selection of shapes from which on the very next step I shall pick to make my pixel clusters. Naturally the smaller the piece the more difficult to actually pixel this stage, but it's not difficult to imagine it, and the artist should always imagine the factual planes of what they're attempting to render.
This is really the most important level in establishing ones pixel clusters. I have chosen a light-source and lit some of the planes. They have created pixel clusters of different colors that are competing in the small space for definition and information. Please note that I have not anti-aliased consciously, nor have I removed much of the apparent banding yet. If your pixel art doesn't look solid in this stage, no amount of pixel polish and tricks later on will save it
. This is where your traditional skills come into play. Note also that the palette I'm using isn't very contrasted yet, this doesn't matter. If you light the planes correctly, you can then adjust the contrast as much as you want the the piece will still stand.
Here for example is a drastic contrast adjustment via fast remapping:"The horror... The horror."
Look at the planes in this stage before we move on. Isn't it easy to tell where buffering should be applied? It's a matter of common sense. The sharper the edge, the less anti-alias needed. The smoother the transition, the more anti-aliasing will be needed. The buffer pixels should never overpower the cluster they belong to.
Here I have refined and antialiased the clusters into metaclusters. Keep in mind that Anti-aliasing can create banding! Look below:
If the buffering pixels line up with an edge below they will band. This is an extremely common error with anti-alias-happy artists and they can spot that something looks 'off' but can't put their finger on what it is exactly. Well, now you know. This is where a pixel artist expert in anti-aliasing shows their true skill. This is the thick of the fray, as it were. Adjusting single buffer pixels until they don't band, but yet represent the intended shapes.
Here I do more and introduce dithering. Not a lot of it is needed in most pieces of pixel art. Dithering isn't a mystery of any sort, think of it as the tapered, fading edge of a brush stroke... the dither belongs to a parent cluster. The places where one needs to dither following this methodology are self-evident, it's where I didn't have enough colors to make a transition smoother. Again this creates banding (dither-aa-clash
) and it renegotiates some unclaimed space from the flat pixel clusters. Solving these problems elegantly is what pixel artistry is about.
Though color is beyond the scope of this tutorial, here's the final piece with a palette. It's very easy to colorize a solid grayscale construction. Then bits of banding around the outline were removed and a final refinement and it's done.
Still a lot to write, a lot to flesh out, but let's discuss this part before moving on.