Visual Hierarchy for Game Developers: A Practical Guide to Making Important Stuff Seem Important
Video games, as the most dynamic and interactive form of creative media, have more variables than a person can wholly comprehend and account for. Assets may be reused or may move about, so you often cannot predict every position each object will be in during a playthrough. Inconsistencies and visual anomalies can be avoided by approaching the graphics as if each screen were a singular piece of artwork (this is more reasonable in something like a point-and-click adventure game), but most developers don’t have this luxury. To ease the burden of myriad variables and increase your chances of ending up with a product that looks good, you have to limit your options and make sure that the choices you do make are smart ones.
Art is hard. Make things a little easier for yourself and get a little color palette. This way, there’s no fretting about what color the umbrella should be—your options are very limited, and often the decision will be made for you depending on what colors you're already using for the rest of your assets. It’s great (and perhaps necessary) to have at least a little knowledge of color theory, but I understand that not everyone has the time or energy to invest in studying it. If you're one of those people, there are plenty of services online that will generate a palette for you.
Once you have selected a palette, it can be useful to make color strings (or color ramps) from each swatch, creating a gamut of values for each individual color. This isn’t as simple as making the color “more black” or “more white”, so if you're unfamiliar with color theory and this seems overwhelming you may want to skip this step for the time being. If you do feel confident enough to create these color strings, you won’t have to fiddle around with the color selector as you work—all of the swatches you'll need are right there in the palette.
It’s helpful to create your assets with the big picture in mind, even if you're working in the vacuous space that is a blank Photoshop file. However, your job can be greatly simplified by organizing your assets into levels of importance in terms of gameplay—with the main character (or object) on top, followed by other interactive objects, surfaces and enemies, followed by anything else. In most cases these levels will form a pyramid, with the most significant elements taking up the least physical amount of screen space. You're going to want to render these assets and distribute colors accordingly. In terms of the 1990’s food pyramid, the fats, sugars, and oils of your palette—the tasty colors—should be reserved for your character only. To prevent your product from turning into a game of Where’s Waldo?, you want your character to stand out, and the best way to achieve this is with contrast.
Contrast is sort of a vague term, so let’s elaborate. There are three aspects of color—hue (chroma), saturation, and value. All three of these can be used to create contrast individually; however, they can never occur in isolation. You must consider the effects of all three facets when picking a swatch for your art. Keep in mind that every part of your game does not need high contrast. You can and should balance the contrast in order to achieve particular atmospheres and effects and to guide the player’s eye towards the most important elements of the game.
I find that indie game developers tend to oversaturate all of the colors in their games. This can be harsh on the eye, and it makes it difficult for the player to distinguish and separate elements. Oftentimes, a lot of visual problems can be solved by simply turning down the saturation on the background artwork. This is the most common scheme—dark, saturated character on light, desaturated background—although any combination of the variables is possible. Keep in mind that not all colors are created equal; a swatch of one color with the same value and saturation as another color may not command the same amount of attention. Personal preference can also have a say in which colors ascend in the hierarchy, so it’s best not to rely heavily on subjective observations when making sure something is read as more important.
Keep in mind that the terms “dark” or “saturated” are relative; they are only meaningful when compared to something that is lighter or less saturated. Your character may be dark against your lightest background, but in another scene it may appear to be light. The same rule goes for hue and saturation. You may want to alter the character’s colors depending on the context if you're trying to create a certain mood or depict a particular lighting setup. This can create some consistency, but it can be tricky to get it right in 2D when you don’t have any real lighting. Just to be safe, make sure your character stands out against any background colors you intend to use. It is often helpful to place them against light grey, dark grey, warm, and cool backgrounds, alternating as you work. If you don’t change up the context, it can be difficult to tell if your artwork is lacking in contrast or if it looks over-exposed. Some newbie artists are timid, and refrain from using colors at the ends of the value scale, while others are heavy-handed and make overzealous jumps in value. It is not necessary to use every value in an object or piece of artwork. For further reading on value contrast, have a look at this article on James Gurney’s windmill principle.
A great way to guide the player’s eye is to simulate visual phenomena that occur in real life with variation in focus and detail. The human eye is only capable of focusing one object (or a portion of one object) at a time, and this area will be clearer and sharper than everything else in the line of sight. Objects in the distance naturally have less detail (because of atmospheric perspective and the capabilities of our eyes); you can replicate this effect in game in order to achieve a greater sense of depth. Also, without factoring in the eye’s focal point, levels of detail and texture are not equally visible on every area of an object. Detail will often get lost in areas of great light or shadow. The area in between the two (the midtone or halftone, right before the terminator that divides the light from shadow) will appear to have the most amount of detail. You can consider this while creating your assets, but the most important lesson to take away is that not everything has to be detailed. Your eye will be drawn to areas of detail and focus, so make sure those areas are the right ones.
Another technique related to the ideas of focus and distance is outlining. As an object recedes or curves away from the viewer, outlines should decrease in width—this simulates foreshortening and other limitations of human vision. Comic-style artists utilize this sort of linework to create the illusion of form without having to render the rest of the image in full color. You can use this idea in your game by only outlining the objects that are the most immediately significant to gameplay (top tier), or by giving these objects a thicker outline.
In reality, color and contrast are topics that are more expansive and complex than I am portraying in this article. Although using formulaic shortcuts can often be enough to give you an acceptable end result, remember that the relationships between your choices are multifaceted and will fluctuate depending on the circumstances, and that there are many ways to achieve goodness.