If you use pixels to draw something, it is inevitable that some banding will occur. Banding is when pixel clusters 'hug' each other to create visible resolution lowering. Since the pixel artist will be putting clusters of pixels close to each other in order to communicate certain shapes that are one way and not any other, it is inevitable that they will run against situations where they must create minor banding to convey succesfully what they're drawing. This is a risk that the artist should be willing to take. However there occurs a lot of banding by the inexperienced artist (or the experienced artist in a hurry) that has no artistic merit. Let's look at art by an experienced pixel artist that seemed to be a bit in a hurry that is to his benefit to go over and eradicate. This from the amazing videogame Spelunky
which I've been playing a lot as of late and as such I've had the time to look at its art a lot and I've spotted the bandings. The artist is Derek Yu
(note I do not use my own art to spot banding because I can no longer create STRONG banding by mistake, it sticks out like a sore thumb to me and if I draw it up on purpose it seems disingenuous. Also note that the following examination is in the interest of learning and not meant at all as a disrespect for the artist.)
Here is a play-screen of Spelunky. The art is pretty beautiful in my opinion, but it shows signs of 'working fast'. This makes sense as Spelunky is still in beta form, not finalized and Derek did what any smart artist would do, he created assets to put in the game and left time for fixing the little things at the end of the project. It is a very useful circumstance for us however because we can go in and look at it in it's intermmediate shape and examine the methodology that creates common errors such as banding. Let's zoom in and check the main sprite and the basic rock tile next to him.
In red I have blocked the places where (I submit) unintentional banding occurs. In purple I have outlined further cases of banding that are not fatal (because they are artistic compromises made by the artist in order for him to convey the shapes he intends to) but are best addressed also. As you can see the unifying characteristic of banding is that it conveys a lower resolution than intended
. The viewer spots fat pixels, or rows of fat pixels.
In the attempt to move around pixels in such a tight little place, until the banding is resolved, the design points of the character move around a lot, whereas the rocks next to him are very easily rid of the banding without many changes. Why does this occur? It occurs because the character has a higher semiotic value for the viewer, because he has a face, and arms, and a torso, and all these things must be communicated clearly, whereas a bunch of rocks are just a bunch of rocks and there's not much problem just moving around a few pixels here and there. But the whole demeanor of the character sprite can change by a single pixel's worth of alteration. I posit this argument:
1. the more semiotically charged what the artist is trying to rid of banding is, the more costly in terms of characterization single pixel changes are.
2. the smaller (in pixels) the size of the item the artist is trying to rid of banding is, the more costly in terms of characterization the single pixel changes are
3. The smallest the character sprite is in resolution, the more difficult it is to remove banding while retaining it's intended characteristics.
Proof of concept: Go change a single pixel on the pacman open mouth frame. Or a single pixel from a NES final fantasy battle sprite. Just a single one. See how much the idea of the character changes. But change a single pixel in a 64x64 sprite. Not much difference. Furthermore, change a single pixel in an 64x64 ground tile. Almost no emotional impact to the change.
Consider here the informative qualities of a single pixel in the different contexts. If a pixel is supposed to inform the viewer of a character's eye, it is extremely important. If a single pixel is supposed to convey that this is a bit of shading on a rock, not so important. This ties with the Information versus Detail qualities of pixels, something to write about more later on.
Anyway, here I deal with the banding on that sprite:
I urge the viewer to open the animation in their animation program and inspect every change closely. Smaller changes around the banding that seemingly make no sense will start to once the viewer starts to see how every change impacts the areas around it holistically. How removal of banding also triggers the impulse to alter and fix manual anti-alias. This
process, is what refining ones pixel art
entails. This, in my opinion is, what it means to take something composed of pixels, and make it pixel art. This is the zen stage of pixel art, where antialias, dithering, banding-removal and other minute handlings of pixels bestows on the piece the blessings and limitations of pixel art. Not everything made of pixels is pixel art. Not even all art made of pixels is pixel art. The full immersion in that state of definition and refinement outlined briefly above usually and optimally, creates results that are very much great pixel art. It's not a binary switch "PIXEL ART / NOT PIXEL ART", it's a gradual slope. The more time the artist spends in that zen state of minutely switching around placements of pixel clusters, the more his end result will be graced by the benefits of great pixel art.
Let's also look at a bigger piece, again from Spelunky. This is part of the intro splash screen:
Nice and big so banding can be spotted. Here's a challenge. Go over it in your pixel art program and spot the banding just on the Indy character in the middle. Then check below for my take.
Here's most, but not all, important banding errors in this part of the image (extra challenge! spot the additional minor banding errors! I can see at least 3 more). They show a few different types of banding. Let's go over them:A, H
: Just basic 'Fat Pixel' banding. An illusionary effect of where 4 real pixels convey a shape that seems like a double-res pixel. It is very important to note that the Fat Pixel, when used intentionally and intuitively creates specific effects that are very controlled and worthwhile.
It does remain a lowering of the resolution but sometimes that's exactly what the pixel artist needs.B
: Row of Fat Pixels. This is the worst, especially when there's a row followed by a row just a pixel displaced lower or higher. I mean this:
Or even worse, stuff like this:
This is BANDING THE ULTIMATE
(or more handily I dub it 'staircase banding') and it makes my heart bleed. Obviously these are not spotted in the Spelunky art because wherea Derek Yu might or might not be very theoretically aware of the banding effect as discussed in this text, like any good pixel artist, he certailny must find gross errors like the above aesthetically insulting even on an artistic-instinctual level.C
: Skipping-One Banding. When an additional cluster is banding with a section that isn't directly touching it. This isn't a big problem, but once the eye is trained to spot these alignments, they cannot be unseen.D, E
: This is an amazing bit of banding. Check how It's two Fat Pixels, Skipping-One row to create a Row of Fat Pixels. I show this to explain to the reader that they should train their eyes to not only notice banding on immediate pixel rows, but even 'higher level' banding. Essentially, the viewer must learn to project horisontal, vertical, and 45 degree lines from every piece of banding cluster in their art and see how it effects the pixels in these directions all the way to the edges of their piece. This sort of training makes the artist holistically aware of how their piece is structured also, and this is a great artistic skill to have regardless of pixels. (Should I write a Banding 202 article here for this or is it beyond the scope of this tutorial?
: This is the most common type of banding. It's when a full outline of a shape is hugged by close shading. There's much worse examples than this in most amateur pixel art (like the awful staircases I showed above) but Derek is not an amateur by any chance so it's not a very pronounced example. Check below for how when fixing it this takes a lot of extensive reworking and aa of the shape.G
: This is banding as well. 45 degree lines band pretty horribly in fact.
Here's some suggestions for fixes:
Again, I suggest the reader takes this in their animation program and checks the choices made to remove banding.
I stress that some degree of banding is inescapable in pixel art. Don't obsess over erasing every little bit of banding all the time, but keep in mind that the most glaring errors effectively destroy the illusion of increased perspective on your art and most importantly (since a lot of symbolist pixel artists simply don't care about hiding the actual resolution/ increasing the effective resolution) banding betrays sloppiness. Why? Because when someone draws in a non-digital medium, where there is no grid,they can go from general shape to specific detail without creating visual effects such as banding. But on the computer screen, when the artist places a general, rough shape, and then later on puts another cluster of pixels somewhere closeby, it is very probable that exactly because of the small resolution, some edges of these clusters will have lined up, creating banding. When this ends up in finalized pixel art, it tells the discerning viewer that the artist didn't spend the time to optimally place every pixel cluster in his image. And that is a big part of what makes pixel art a potent artistic medium.