The Art Barn: Hue Variation and Reflected Light
We all know that coloring is fun. I, for one, have been coloring non-stop since my Grandpa sat me down on the front step, put earmuffs on me, threw some crayons in my lap and told me to just color and color. No matter what I might hear, even when Nana asks me to call the police and that there’s a string cheese in it for me, no matter what, just keep coloring…keep coloring. My grandpa was very supportive. I really owe it all to him.
Anyway, this article is about color, but more importantly, light. Because without light, we wouldn’t see color, and hey-HO, sonny Jim, no reading what color crayon you got! GIRAFFES AREN’T DRACONIAN SCARLET dumb butt so try again!
We will be discussing how to observe color. Again, this column is mostly geared towards programmers who can’t afford to hire artists. Like in my previous article, The Cool Rules of Spriting, these tips are meant to be very quick, easy ways to make your art look more effective and convincing without all that boring-ass drawring school.
Before we get into the examples, let’s get our terms straight. Careful, here’s where it gets a bit fancy, ok?
*Chroma and Saturation are effectively the same thing. When something has a high chroma, it has a lot of saturation.
That’s how to say it fancy.
The first thing I’ll say is that we need to unlearn the way we see color. It’s one of the first things they probably teach you in drawring school. I wouldn’t know because apparently they tend frown on applications that, under “Last name,” read “PORTFOLIO THIS!” But there’s bureaucracy for you.
Anyway, we’re pattern-seeking mammals. It’s a mechanism of survival to take objects we see and break them down into their most abstract, fundamental elements. One of the first things to go and stay gone are the variations in Hue, or “what’s is the COLOR is it.” We see a tree, and we draw “brown line, green blob.”
If we don’t take the time to unlearn this habit, we will always see trees as simply “green.”
This is probably obvious to most of you, but I have altered this image in Photoshop. I’ve turned it into one color, one HUE. If it looks uncanny and false to you, that’s because it is. This is not how light behaves. We must observe colors for what they actually are, rather than what our minds have abstracted them to be. Below is the actual photograph. Now that you’re looking for it, what colors do you see?
There are many reasons why we look at a leaf that reads as “green” and see yellow. We see yellow because of the semi-opaque leaves capturing light and that light then scatters inside them. And…well, what color is the sun’s light? I want you to look up right now at the sun and take a good, long stare and then tell me what color it is.
Light has a color. That light illuminates objects and influences the final color value we perceive. Light also reflects off of illuminated surfaces and in turn influences more objects around them.
Nearly everything we see is influenced by colored light. Let’s look once more at how we simplify and abstract color, and what it does to a photograph. Drawing people is tricky in a lot of ways, but you can help yourself a lot just by using hue variation and reflected light. When we see a face in our mind’s eye and attempt to color it, this is normally what we see:
SKIN color, YELLOW hair and BLUE eyes. If we’re not careful, that’s what we’ll draw.
If this man looks like Mr. Data mixed with Glenn Beck, it’s because there’s no hue variation, and Glenn Beck f***s robots.
Now we can observe what’s actually involved in flesh. There is the color of the light source, which in this case is mostly white. In the skin there are pinks, reds, oranges, mauves, and even violets and blues! The blue light is a combination of hair follicles and the color of a blue/gray floor bouncing light up towards him. The reds are for things like blood vessels under the skin, and light passing through ears and lips.
The point of all of this is that if we don’t unlearn these reductions and abstractions for our illustrations, they will indeed look just as artificial as these altered photographs.
Let’s put all this crap to good use, eh? Below will be examples of video game art, both indy and professional (Grandpa calls that “Japanese”). I’ve highlighted games that have art that is mostly decent, but do nothing with hue variation.
What I’ve done is taken these examples and altered them ONLY BY CHANGING COLORS. I hope to demonstrate that, just through observing light more carefully, the same art can be made to be much more convincing to the eye.
(The examples were chosen only for a lack of hue variation. I mean no offense or condescension towards the artists who made them. I myself am a self-taught illustrator. Take what I say with the appropriate grain of salt.)
Notice the complete lack of hue variation. The skin is FLESH TONE, the tie is RED, etc. Using what I observed from the previous photograph, I only added hue variation. Let’s see the results.
The skin tones are varied with reds, pinks and violets, the silk tie and blue silk shirt will both reflect light. Look at the red reflections on the scary man’s lapels and on the sleeve of the other scary man. Look at the blue light on the bottom of the scary man’s arm. Does this add a certain believability to the piece? Well, I’ll put it how my Grandpa put it when I asked if there was going to be a christmas this year: “You tell me.”
As an aside, though there may be other problems with this illustration in terms of form, anatomy, drapery, etc., check out how hue variation alone can do a lot!
Here’s what I think is a rampant problem in low budget fantasy games. That problem is GRAY. Stone walls, caves, dungeons, swords, armor – you name it. Many artists default to gray, gray, gray.
Here’s a selection from another iOS game, Endless Depths. This repeating gray on gray on gray is an eyesore. The reason why is not because the bricks aren’t well-rendered. They look just fine. However, the overall look is uncanny; the eye doesn’t buy it because in reality that’s not how a large majority of stone nor light actually look.
Now, keeping this in mind, I simply altered this screenshot from Endless Depths by adding subtle variations in hue.
Let’s talk about atmospheric perspective and its effects on hue for a minute. Using color alone, depth and scale can be added to a piece. Take a look outside on a clear day sometime and look off into the distance. What color are the mountains? Are they “GRAY?” Are they “GREEN?” or… are they blueish?
“BLUE MOUNTAINS YOU DUMB IDIOT!?!” – you
WHOA! just calm down! What I mean is, the sky has a big influence on stuff when it’s far away.
In this awesome painting by James Gurney, observe that the values you might ascribe to a snowy mountain, like GRAY and WHITE, are not the values in reality. Light enters our atmosphere, and through some boring science thing, scatters blue light all over the damn place. We see into this thick atmosphere and, the farther away things are, the more the sky influences their value. Even the grass in the distance is taking on blue qualities. Blue color paints both the snow and the rock.
In this mobile game, check out the colors.
Though the art is pleasant, charming and inviting, it lacks a certain believability. The mountains and clouds are GRAY, and the grass is GREEN. Notice that the most convincing part is the sky. Why? Because the lightest value is slightly more cyan in hue than the darker, more true upper blue. Using the same principles at work in the Gurney painting, let’s see the result.
I’ve made the grass a little yellow/green in the highlights, the mountains now take a color more similar to the sky to suggest distance, and the clouds also capture and scatter the blue light of the sky. I also added chroma to the pure gray of the cloak, both to reflect light from the sky and to simply avoid pure grays. It still reads as “neutral” compared to the other colors, but has a bit more vibrance to it.
No you might say “Grandpa? That’s not fair Grandpa. Those are simple, 8-bit style graphics Grandpa. You can’t use fancy colors and details Grandpa!” Well son, I’ll say what my grandpa always said when I asked him that. “Take a look at the Jappos!”. “Jappo” is a term of great respect and reverence for Japanese people. That’s what my Grandpa told me.
This is from Kirby’s adventure for NES. These artists were able to RE-abstract these principles of color after unlearning the habit to see colors incorrectly. This simple, colorful vista of a “blue” mountain is supposed to create the impression of atmospheric perspective. Further, notice the yellow-green/regalah’-ass green combo, again, in simplified, re-abstracted terms.
In Mega Man, the artist did a TON with only a few colors. Our brain still registers “silver” for the foreground, though we see light blue, white and a deep neutral gray. However, if you look closely, the gray looks almost orange/yellowish in hue because of the colors it’s NEXT to: fuchsia and blue. But that’s a whole different topic!
The fuchsia sky suggests an evening atmospheric effect. We know the castle in the background wasn’t made with purple bricks, and in fact we’d probably record it as gray, despite it being a very vibrant fuchsia.
Too Much Hue!
Sometimes there is too MUCH hue variation. Hue period, let alone Hue variation occurs when we observe light behaving in space. When there is no light, our eyeballs won’t perceive color. When your eyes are in very low-light conditions, things around you become much more monochromatic.
There is no light source. The dungeon really SHOULD be pitch black. But then you couldn’t play your computer, so a little bit of abstraction is required. But that vibrant chocolate brown on the floor would simply not be able to catch enough illumination to be that vibrant.
In an attempt to simulate what we would see in low-light conditions, the floor has almost no chroma and the monster has been greatly desaturated. Not only is this more believable, but I believe a scarier mood has been achieved.
Eventually, if you maintain these observations, you can be just like Japanese people one day(but not as good.) Use your new eyes and take a quick color log of art you see and like!
If your brain reads this as “BLUE,” look at it and again see if you pick up: BLACK, PERIWINKLE, INDIGO, DEEP MAROON, CRIMSON!
ORANGE, LIGHT YELLOW, TEEL, DEEP BLUE-GRAY, all reading as “light brown” or even “white.”
Almost done now!
Well, that about does it for this Art Barn. We’re all on a journey to be better drawers, but a lot can be achieved just by observing and recording how color and light behave! Like Grandpa said to me right before the end, “I never seen a gal can-can in a slushie costume quite like that, Eleanore!” I was confused at the time, but now I get it, I think.
I’ll be a sport and close with a serious choke job of my own from one of my very first attempts at pixel art. This should never have seen the light of day…
In a futile attempt to improve this nightmare, All I did was bear in mind that blue skylight is reflected in shadows, and that an object as far away as the “castle” would be subject to atmospheric perspective.
If you like this article, and you like Dinofarm Games, please support us in our Kickstarter campaign for our upcoming title, Auro: The Golden Prince. We promise we’ll work really hard and won’t spend most of it on Mini Kit-Kat bars.