Egoboo Community Forum

The Legend of Egoboo Sporks of Yore
It is currently Sun Mar 18, 2018 3:45 am

All times are UTC

Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: Shading Tutorial
PostPosted: Mon Jul 28, 2008 10:47 pm 
{]-[0{0|307 (Developer)
{]-[0{0|307 (Developer)

Joined: Wed Jul 23, 2008 4:22 am
Posts: 1864
Location: Minnesota, USA
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


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
which gives you the following image when you multiply with the simple color

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

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


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.

Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC

Who is online

Users browsing this forum: No registered users and 1 guest

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group
Get Egoboo at Fast, secure and Free Open Source software downloads