Teaching the ways of Pixel Art [Lesson 2: Shading]

A place for graphics

Moderator: DarkAuron

DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

Teaching the ways of Pixel Art [Lesson 2: Shading]

Post by DarkAuron »

the_unknown_one: The legs may look weird but if you hadn't noticed, all my FFX chibi characters are based off the same exact style. Each artist has his own style, so.. it depends. And not everyone's sprite has to look like mine :) I'll explain this in greater detail next lesson.. because I'm bored right now and have nothing I feel like doing except the shading lesson!

First off, why do we do shading? Just because it looks cool? How do we do it? What you need to think of is if the sprite is real, in full blown-3d, sitting in front of you. Can you do that? Might be hard for some people, easy for others.. but bear with me.

Now think of the sun hovering above the sprite, shining in its glory (no you don't have to make it):

Image

When it comes to shading, every sprite has a light source. It could be from the left, the right, in front of, behind, below, or above. Usually it's either directly above or above at an angle.

Well since the sun is above, it can't pierce its light straight through the person and light him up completely the same on every part of him.. there will be SHADOWS (ooo, scary! *echo* :twisted:)

The light source shines down its light, like so:

Image

Now since the sun can't light him up everywhere, we must consider the shadows on him. Where would they be? Well, if the sun is behind you, your shadow is in front of you. If the sun is in front of you, your shadow lurks from behind.. and if the sun is directly above you, you've got a shadow below you that you walk upon. Listed are spots where there should be shadows, in no particular order:

Image

1. The neck - Since a person's head is usually round, some of the face is going to stick out in front of the neck, which the sun can't quite reach. So generally this part would have some darkness to it.

2. The arms - Our arms ARE solid, and thus light cannot completely surround them at the same level. Generally the underside of your arm as you look at it will be darker colored than the rest of your arm. Why? Because light is usually above you, whether it be a ceiling light or the outdoor sun. (Also because light reflects off your body and onto it but I don't want to get technical)

3. The legs - You might not realize this, but your knees can actually create a shadow since they stick out. Also since the lower leg is lower than the rest of the body, it can recieve less light, although this isn't always the case. Generally in sprites however, the lower the part, the darker it will be.

4. The feet - Probably the darkest part of the entire body that you can see would be the underside of the foot/shoe. It's the lowest part of the body and very little light is able to reach the underside. Thus there would be shading on the bottom.

5. The head - The top part of the head gets shading too, depending on what's there. If it's a head covering like a hat then the same rule applies to the neck, but if it's hair then it gets a lot trickier.

6. The cap lip - This is just an extra detail but this would require shading as well, but only a pixel or two.. maybe three.

7. The stomach - Or waist. The torso usually has a stomach that may or may not stick out, but generally the shirt might stick out above or sink in at the bottom. For the most part it's lower at the waist, so it'll probably be darker.

All that being said, let's start on the shading! We'll start with the simple, obvious things first, such as the arms. A little bit more visualization will have to be done since I'm removing the sun from the pixel world for now.. hehehe (darkness shall reign! kidding :lol:)

How can we do shading with those ugly colors down there? AHHH!

Image

What we'll do first is use the Dropper tool and grab the skin color (the peachish one). If you didn't know how to Edit Colors before so you can get your own custom colors, go to Colors, then Edit Colors. Now theres a window full of the same colors.. cute. Click on Define Custom Colors >> and you'll get a very colorful picture to the right, with a box of number boxes and a sliding bar.

Image

How is it possible to get a decent shadow color? Drag the sliding bar that's on the right, down to a darker color.

Ohmigod it's orange, that's not a shadowy color! Not brown either! What do I doooooooo?! Well, first calm down. Second, look at the crosshair-thing in the upper-left part of the colorful area. Drag it downward, and you get more pale colors. Generally shadows have a lack of brightness and life to them, they're more pale. Keep that in mind. If you want the technical term, it's call Saturation, as abbreviated in the appropriate value box. You can change the values in the box for the same effect if you don't want to drag the crosshair.

Okay, now we've got funky, pastel-like colors that still don't seem like shadows. Well, if you've ever watched some sci-fi shows or movies, you might have heard an alien call humans 'pink-skinned', or just might have heard that somewhere. Pink is just a lighter color of red, and we're in the orange range. Now, unless a person eats nothing but carrots, they probably won't be orange. Try dragging the crosshair a bit closer to the red, and you might get a better color. Finding the right shade is an experimental process, something I often build different palettes of until I find what I like.

Now that we've got the right shade (or maybe we don't, but that's what experimentation is for), let's try it out! Color in the pixels at the bottom of the arms that are closest to the body, like so:

Image Image

His arms now look like they're sticking out, 3-dimensionally. They look out of place, but only because the rest of the sprite isn't shaded like that. They're the easiest of the sprite to color in, because their shape is very simple and easy to use detail with. Now on to the next part of the sprite: the neck, face, and cap.

Generally you must think of the head as ROUND. Using the same shadow color you created for the arms, try drawing in the lower part of the head (aka the neck, if you can visualize it like that). You might end up making something like this:

Image

Well that's nice.. except it doesn't look that great. What's wrong? Well, the shadow isn't rounded like the head is! What if we threw some extra pixels on the sides and made some kind of curve, like so?:

Image

Now he looks like he almost has a beard.. weird. </rhyme> You could leave it like that, or you can do a shading trick that involves creating a curved shadow on only one side.

Image

It's totally a judgement call, you decide what you want best. Every artist has a style they go with, usually by instinct. Compare different styles that you end up creating and decide which is best just from looking at them.

Before I go on, I think I might add some hair to this guy. I'll let him keep the cap, and, thinking about the realism of how a cap looks like on a person with hair, I realize that hair kinda just stick out from the cap's bottom edge. So I'll just throw some lines down from the cap's lower outline, and get something like so:

Image

That's a very basic, experimental drawout of the hair. It might stay that way or it might be changed later, but for now it's got a decent shape.

As for the cap, let's try using the same idea as was done for the lower head. Find a darker, shadow color to shade with by getting the red color and editing it. Draw in pixels in a curved fashion like before, and the result is..

Image

Now theres a rectangle of light at the top.. and it looks weird. How can we fix that? Theres another little thing to think about.. still thinking how how the person is 3d like we are, the cap would curve to the back along with the head, so theres probably darker shades in the back. Light tends to focus on a specific part of an object, making it shine there and then shadow outward to the edges and bottom. Playing around with the pixels in the top (the 'back' of the cap) and trying to make a nice focused light area in the middle could result in this:

Image

I don't know how to explain how I did that, I just messed around with it for a bit until it looked good. That's mostly what pixel art is all about, experimentation and teaching yourself what looks good. If you're a perfectionist and think everything is imperfect, you might strive infinitely on that, but hopefully things would be resolved and look great :)

Now to work on the lip of the cap. Using the same concept as the main part of the cap, start off by making a shadow curve on the bottom, then work your way around and make a centered light spot.

Image Image Image Image Image

From now on I won't have nearly as many steps and descriptions as I'm assuming you've learned some of the things I've showed so far :P Well now, he's looking pretty cool now.. his lower body is still pretty plain though. Let's work on the legs!

But before we do, let's get into another important aspect of pixel art. When you've got a lots of colors and shades coming in like this, you might want to organize them into a Palette. A palette is just a bunch of colors grouped together, organized and easy for access. Typically what I do is have the similar colors shade upward from dark to light, as seen here:

Image

Okay, now that's it's organize, I also realize something: the lighter colors in the palette are kinda hard to see with a white background. So what I'll do is change the background color to a dark, yet somewhat calm color like a blue-green/teal color.

Image

Often I do this so I don't bust my eyes trying to tell if a pixel is the wrong color or not.. and so I'm more comfortable with my workspace.

Now to the legs. One of two things we can do: we can either make a new gray shade for the shadow cast on the legs, or we can reuse a color that we already have, from the shoes. To be on the safe side I'll just make a new color and use that.

Image

Okay, not too bad, but we need to consider the fact that the character has knees, which are round. And a technique called Dithering involves using a checkerboard type of shading with 2-3 colors, but since we have such a small space, that's not easy to do. A combination of both thoughts requires a simple removal of the middle pixel.

Image

Now his legs have a more natural feel to them, with very few colors. On to the feet! With feet, the light usually shines on the center of them, and with feet you may want to use 3 colors. It makes them nice and shiny, and with only 2 colors it doesn't have as good of an effect.

Since the light source is above the character and we only have space for 2 pixels high instead of 3, we can't put the lighter shade in the center, because there is none, so I'll put them on the upper part. I'll be reusing the colors from the pants for the shading.

Image

Okay, that's a start. Now circle the lighted spots with a darker shade, the pants's shadow color.

Image

To improve on that, think about the 3d existance of him again, think of how it gets darker as the shoe gets closer to the character, because most of the light is focused on the tip of the shoe. The result is a single pixel change to each.

Image

At this point he looks great, we could consider him finished now.. but theres a few things I'd like to work on, like the stomach/lower torso, maybe the hair, and more shading on the face.

Now first thing I noticed was that I passively forgot about that little 'light' detail I tried adding to his shirt, which doesn't really work in my opinion.. so I'm just now removing that.

Image

Next I'm going to make the shirt a lighter shade of black, just a very dark gray. The process of doing this involves coloring in the middle and leaving the black outline.

Image

Then one-sided curved shading is done to the stomach area, and we get something like this:

Image Image Image

Now for the heck of it I'm going to make the eyes bigger.. dunno why, just feel like it :)

Image

I didn't want him to have squinty eyes, did I? Nah. The next part involves 3d thinking again.. oh no :D The hair overlaps the head, as does the cap. Together they create enough of a shadow on the upper part of the head. So by drawing an underline shadow, then curving it downward, you get a completed head!

Image Image

Some people don't like to do this next part, as it isn't as retro. I do it sometimes to give it more breatheable life. There would still be a dark outline but it would be an outline of a darker shade. I won't go into detail on how to do this, but I'll say this: A lot of times you'll use the shadow color to outline, and if not, a bit of a darker shade of it. The result only adds two new colors:

Image

So I'd say this character is finally finished. Wow, let's compare the original with the new:

Image Image
Image Image

I would say this looks a LOT better.. almost completely different. And to be honest, going through the process of this lesson I ended up improving what he originally looked like after I had improved him.. hehe.

Well this was an extremely long lesson, but hey.. if you're learning that's great. Next lesson would involve lots of extra little tips, including some extra things about mspaint that you might not have thought about doing, or knew about. I'm tired, so I'm gonna play some FF9 and Tetrisphere :D Oh, and drink Dr. Pepper as well. And remember: comments suggestions, and questions are welcome at any time :)
Last edited by DarkAuron on Mon 26 Feb, 2007 11:18 pm, edited 5 times in total.
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
User avatar
Shadow Phoenix
Calc Guru
Posts: 835
Joined: Mon 03 Jan, 2005 7:54 pm
Location: out there. seriosly.

Post by Shadow Phoenix »

this is so awsome....
Life is getting better.
User avatar
dysfunction
Calc Master
Posts: 1454
Joined: Wed 22 Dec, 2004 3:07 am
Location: Through the Aura

Post by dysfunction »

Hey, I'm eve learning things I didn't know... thanks DA.
Image


"You're very clever, young man, but it's turtles all the way down!"
koolmansam375
Extreme Poster
Posts: 479
Joined: Fri 17 Dec, 2004 11:09 pm
Contact:

Post by koolmansam375 »

i have a lesson suggestion if its not to much:

Calc style b&w graphics. Like how to make all the shading effects, dealing with limited sprite sizes, etc
Image

Pongwars shall live!

blog is down atm. :-(
Andy_J
Calc Master
Posts: 1110
Joined: Mon 20 Dec, 2004 10:01 pm
Location: In the state of Roo Fearing
Contact:

Post by Andy_J »

Yeah, how to make a good 4-level grayscale sprite. :) *has an idea for a game, no clue if it'll work out*
ImageImage
Image
User avatar
Madskillz
Calc Wizard
Posts: 745
Joined: Fri 17 Dec, 2004 10:22 pm
Location: Wandering around in the Jungle...
Contact:

Post by Madskillz »

WOW awesome DA...I love seeing the transition of the crappier guy to the full fledged update...it truly looks awesome! I learned stuff too! :wink:
The Revolution is here...
User avatar
DJ_O
Calc King
Posts: 2323
Joined: Mon 20 Dec, 2004 6:47 pm
Location: Quebec (Canada)
Contact:

Post by DJ_O »

Wow it look really great. It might be useful for making PC games or something. Now we need a similar tutorial to make calculator grayscale sprites, in 3 level and 4 level of gray at least. :)
ImageImageImageImage
necro
Calc King
Posts: 1619
Joined: Sat 26 Mar, 2005 2:45 am
Location: your shadow

Post by necro »

How I make complicated poses is to draw out a wire figure, draw it in somewhat (in multiple colors) and then shade/fill the figure. (these were kind of quickly drawn, but they give the general idea)
Image
Image
DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

Post by DarkAuron »

Okay, the 3rd lesson will be covering do's, dont's, and extra tips. 4th will probably be calc spriting and dealing with limitations. 5th might be about making tiles, although I can't say I'm that good at making them.

Reason why I'm holding off the calc spriting is because certain foundations have to be learned before you can work in such a small space. Colorful, larger examples work better to explain the basics, then we can work our way down to the nitty-gritty stuff. Hope you understand :) And by the way, my 2nd lesson was the longest post I've ever made on a forum :pirate:
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
User avatar
DJ_O
Calc King
Posts: 2323
Joined: Mon 20 Dec, 2004 6:47 pm
Location: Quebec (Canada)
Contact:

Post by DJ_O »

DarkAuron wrote:And by the way, my 2nd lesson was the longest post I've ever made on a forum :pirate:
This is nothing compared to this: http://s3.invisionfree.com/calchaven/in ... try5228637 (note that the section of the forum where I posted this is dedicated to spam)

and wait 'til I'll post reuben code on EPS, I'll probably have to split my post into 2 or 3 different posts


*waiting lesson 3 so I can see if I did some mistakes in my last RPG*
ImageImageImageImage
DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

Post by DarkAuron »

For fun I felt like modifying Reuben, and this is the result:

Image

left is original, right is 3 color grayscale, bottom is 4 color grayscale
Last edited by DarkAuron on Mon 26 Feb, 2007 11:21 pm, edited 2 times in total.
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
User avatar
Shadow Phoenix
Calc Guru
Posts: 835
Joined: Mon 03 Jan, 2005 7:54 pm
Location: out there. seriosly.

Post by Shadow Phoenix »

DarkAuron wrote:For fun I felt like modifying Reuben, and this is the result:

Image

left is original, right is 3 color grayscale, bottom is 4 color grayscale
HOLY %%%%
omg my pictares look horrible :/
Life is getting better.
User avatar
DJ_O
Calc King
Posts: 2323
Joined: Mon 20 Dec, 2004 6:47 pm
Location: Quebec (Canada)
Contact:

Post by DJ_O »

WOW, it rocks! I like the way you did sprite shading even in the 3-level grayscale one!


*digging up Reuben sprite sheet*
ImageImageImageImage
User avatar
tr1p1ea
Maxcoderz Staff
Posts: 4141
Joined: Thu 16 Dec, 2004 10:06 pm
Location: I cant seem to get out of this cryogenic chamber!
Contact:

Post by tr1p1ea »

It really is sweet when you see the difference between the old char and the new one at the end of the second tutorial. Good work Dark :).
"My world is Black & White. But if I blink fast enough, I see it in Grayscale."
Image
Image
necro
Calc King
Posts: 1619
Joined: Sat 26 Mar, 2005 2:45 am
Location: your shadow

Post by necro »

Image
the animated cyan knite with magics
Post Reply