Escape from Pixelvomit - Episode 1: The Importance of Good Color Choice

Posted by Sondrian on 03/12/17 2:52 PM

The Importance of Good Color Choice

When in the course of game development, we often come to an inevitable reality...we need some sort of art to put into our game, those of us that are serious about this craft anyway. Some may decide to simply commission the assets that they need from an artistic type person, also known as an asset creator or "artist" if you will. Others may purchase a library of premade artwork to use for their games. Yet others may convince an artist to work with them (absurd I know). Some others may simply make the art themselves. But, no matter what you do, I'm here to help you make your pixel vomit look better. FEAR NOT! (okay, fear a little...yes, that's it.)


Let us begin.

When it comes to pixel art, color probably the single most important aspect. You don't have enough resolution for any real detail so you have to create the illusion of detail. The way that pixelart achieves this is through causing the human brain-meat to hallucinate. Using the power of optical illusionary color relationships, we can make certain parts of a flat 2d grid of dots look like it is close up, far away, or between the distance of others things. We can create the illusion that there is light or shadow, We can even arrange our dots in such a way as to cause us to see colors that just aren't there. This sorcery is called color choice, and it is one of the most powerful tools in your arsenal.

Let's make a rock!

1. Getting Started

    Or a piece of poop, either way, we tried. Pixelart does this strange thing where it looks terrible and plain until suddenly it looks good. So we     started with a base coat of brown, let's move on to some lighter color to help define the shape of the thing.

    At this stage, the colors don't matter terribly as we can still change them fairly easily, so don't fuss too much about whether or not the     colors are "just right" or not. Basically, focus on value (how dark or how light the colors you are using are) and saturation (the intensity of     the color). Basically, at least for starting out, follow this rule:

    The darker the shadow the darker the value and the less the saturation relative to the rest of the shading on the object. The     lighter the highlights, the more saturation and the lighter the value relative to the rest of the shading.

2. Adding Mid-tones

    After we add our base color, we can begin to define the shape by using a mid-tone color. I like to think of the mid-tone as the more natural     color for the object as it is basically the color that is reacting the least to the highlights and shadows. Using our mid-tone, we will define     what is not going to be in shadow. This a great time to get a general feel for the shape of your object, which in our case is a rock.

3. Add some mid-tone highlights

    Now that I have defined the mid-tones, I am going to further define the shape by creating the brighter spots on the mid-tone regions where     highlights are likely to fall. We are going to use a color slightly brighter and slightly more saturated for this. It helps define the shape better.

    Notice that we have finally added a third color and the shape begins to have a somewhat complete-like feel. Depending on the style of art     you are going for, you could stop at 3 colors and it would be okay, but more colors will hadd more "pop" and pizazz to the image.

4. Add highlights

    Now I add the highlights. I made the highlights more yellow instead of just brighter orange in order to really distinguish the highlighted     regions. Subtle shifting of colors like this is a great way to add more depth and life to your pixelart. The general rule is go warmer for     highlights and cooler for shadows. In our case that means we should go closer to yellow for our highlights and closer to purple for our     shadows. Nothing too extreme though. A little goes a long way.

5. Define deep shadow

    I'm going to shift my colors to cool, dark, and less saturation in order to define the deep shadows on the rock. This shows were the     light doesn't really reach at all. Be subtle here and don't over do it, we don't need a lot of dark to get the job done

6. Put it all in context

    Be sure that you are putting your art into its proper context. Its not enough for our rock to look good by itself, it must look good in the     context of its environment. So be sure to at least do a test background to get the rock looking right. Either match the art to the setting or     the setting to the art. 

    Now in this example, I changed the colors afterwards to get them where I wanted them. This is not difficult as you should have the colors     generally where you want them to be. It is a simple matter of tweeking the existing colors a little bit here and there.

7. Finishing Touches


In this final example, I added a little bit more to the background, and added the edge highlights that are derived from the light source.     These highlights are extremely bright and help to bring the rock into the background by interacting with the light source.

Color choice is extremely important. If we gave absolutely no regard for the colors that we were using for our rock, it could look something like this:

I hope this tutorial has helped you out. If you have any questions about this tutorial, ie if there was anything you didn't understand, please don't hesitate to post in the comments below. I you know how to talk about this subject better that I did here, feel free to post a tutorial on our site to help others out. Thank you for reading and happy creating!

Arthorse out!

Back to tutorials
There aren't any comments yet. Log in to post one.