Shading Tutorial

Tutorials for game development.
Post Reply
bgbirdsey
{]-[0{0|307 (Developer)
{]-[0{0|307 (Developer)
Posts: 1864
Joined: Wed Jul 23, 2008 4:22 am
Location: Minnesota, USA

Shading Tutorial

Post by bgbirdsey »

There have been some questions about the lighting techniques I've been using in some of the art I've uploaded.

To use my method, you need an image editor that supports layers and some simple math operations between the layers, like multiply. I use GIMP, and I know that photoshop and paintshop have similar features.

Like some of the other tutorials, I've hosted the images on the informe wiki.

The thing to notice is that you can break complex images down into their intensity and their color. If you can believe it, you can create this image

Image

can be created by multiplying the two following images

Image and Image

Even though the color image looks a bit junky because of the speckled artifacts, it is really simple. There are just a few colors and it is basically colored like a coloring book with some extra colors at the borders between the zombi's face and the background, for instance.

This gives us some hope that we can take a simply colored image and make it pop!

Take the simple example of a sphere lit by a single light. This can be broken down the same way:

Image = Image x Image

But the black and white picture is TOO COMPLICATED to draw accurately! :(

The solution is to simplify the shading to something that looks like
Image
which gives you the following image when you multiply with the simple color
Image

To finish the shading, you can employ a blur function to blur the regions between the bands. If you do, you get this:
Image

Looks very similar to the original sphere, doesn't it?

The trick in shading a more complicated figure is to think about where the light is coming from and to break the shapes down into sphere-like shapes.

In the following image, the light is supposed to be coming from the upper left

Image

You can see that Indy's right hand is lighter on top and darker on the bottom. Also, you can see that his pants are lighter on the left side Indy's right leg compared to the right side of the picture. I also added a special shadow on the dark side of Indy's hat since it is in shadow.

There is one other technique that has nothing to do with this layer multiplication. A lot of cartoonists tend to use functions called dodge and burn to add highlights and shadows. Dodge not only makes something lighter, but it makes it more white. Burn not only makes something darker, it makes it more colorful.

You can see how I faked this effect on Indy's pants by making the right hand side more yellow and the left hand side more white. I think that is the only place that I used that dodge/burn thing on this image. However, Aaron used it much more, and most of the images by Booger (like the banner for this site and the splash screen for the game) don't really even do much shading, they just make the colors on the light side more whide, and the colors on the dark side more colorful.
Post Reply