- Contents
- About
- Submissions
- Feedback
- Archives

volume 1, issue 29

Today in loonygames:

New!! The Archives have been cleaned up, fead links fixed, and printable versions restored! Also, don't miss the new comments on the front page!

Livin' With The Sims: theAntiELVIS explores the wild and wacky world that is Will Wright's The Sims, asking the inevitable quesiton, "is The Sims the first step toward a virtual life where everyone is Swedish?"

Pixel Obscura: Josh Vasquez on Omikron: The Nomad Soul.

Real Life: Check out our newest comic strip, Real Life! Updated daily!

User Friendly: Updated daily!

Related Links:

DRAW Partner!: Chris Buecheler's article on games and 2D art.

Two Programs, Two Dimensions: Rick Grossenbacher's tutorial on using Photoshop and Illustrator to create original 2D images.

The Texture Studio: Chris' texture home page, with tons of textures for you to download.

Two Programs, Two Dimensions: Get a preview of the next installment of Painting on Polygons with this feature article by Rick Grossenbacher.


You've got an opinion...voice it! Drop a line to our Feedback column...you could end up with a free T-Shirt!

Random Feature :

Put a Little Love in Your Pocket!: Trying to understand Pokemon? Our loony editor got to the bottom of the GameBoy phenomenon.

Search the Archives!

Painting on Polygons:
Hunting for Selective Colors

By Rick "Flatness" Grossenbacher


Now we have to ask ourselves a couple of questions. Weíve just matched the skin tones, but do we like them? Also, are we going for a completely realistic look or a comic book type of coloring? Personally, like it somewhere in between because if Iím going for a pure photographic quality, then why did I bother drawing the face in the first place! I could have just scanned in the real face of someone and manipulated it.

Personally, Face 2 is a bit too much on the orange side for my tastes, and there are a few facial-feature issues that are bothering me so Iím going to do some changes. For starters, this guy is screaming for a better nose. Oh, and lower eyelids. Iím going to do all this by going in and further manipulating small groups of pixels in specific places. It needs a few higher refined details and some slight color variations to break up the never-ending quality of orange that it seems to have.

I decided that I should show you what I did with this head in order to improve it instead of just giving a before and after picture. The reason is: details are the key to good pixel art, and when I say details, I mean actually manipulating one pixel at a time in some cases. Sometimes I even use the Rectangular Marquee to select a single pixel or two so I can slide a few sliders (Brightness, Hue, etc.) just to see the difference it will make. Mainly this type of craziness is for the eyes or nose where detail is absolutely essential, and a single pixel can make a difference.

I wasnít quite sure how I was going to show this process, so I decided to save as many of the steps that I took along the way. The graphic below displays the change in the head numbered at every step. At first glance they may all look alike to you for the most part. They do to me even, and Iím the one who made Ďem! But, then if you look at step number 1 and then to step 16, youíll see a fairly substantial change (and improvement, I hope).

I didnít have a terribly logical reason for the order of the steps that I took. I basically just went to whatever part my eye lead me to fix next. To really follow along with the changes, youíll probably want to bring this graphic into Photoshop and zoom in. Or, another way is to copy one of the faces and paste it on a separate layer exactly over top of another face (a face right next to it, of course). Then, you can click the layer on and off to see what pixels have been changed (sort of like a flip-book). I did this quite a bit while making the corrections to the face to help me see if my highlights and shadows made enough of an improvement. Itís a pretty nice technique.

Here is a brief summary of each change that took place.

1. I took down the saturation on the entire head to around -11.
2. The Burn tool was used on the bridge of the nose.
3. The Dodge tool was used on parts of the nose.
4. At the corners of the eyes, the Burn tool was used to darkened them up.
5. I started constructing a lower eyelid.
6. More altering of the lower eyelid.
7. The Burn and Dodge tools were used just above the upper lip (and to the side) to even out the contrast a bit.
8. I started cleaning up around the nose.
9. The nostrils needed Fixing.
10. More general nose fixing.
11. Yet more nose fixing.
12. I evened out the shading on the cheeks.
13. The face has been extended out to the sides.
14. I darkened the outer edges of the eyeballs a slight bit (getting the eyes correct is critical).
15. Ok, I probably crammed a lot of steps into this one. The chin and upper lip have been given highlights using the Burn and Dodge tools. The forehead has been shaped a bit better (on the sides). The chin was altered slightly.
16. A highlight was placed on the top of the eyebrows, and both the Saturation and Lightness was taken down on the lips to get rid of some of that orange. Done!

Letís look at a before and after picture.

Ahhhhhh, much better. Now letís do a before and after with the original face.

Huge difference!

Then, for the beans of it, I quickly slapped a mustache on him (on a separate layer) to see what it would do to the face. It seemed to age him a bit.

Here are a few other things that could still be fixed if you are real nit-picky (which I am, but I wanted to get this thing done so this tutorial would be out before the turn of the century).

-- Real human faces arenít exact on both sides. I did all my alterations to the left side of the face, then copied and flipped it over to form the right. But notice that I kept a one pixel width strip the runs vertically down the entire center of the face, and is neither part of the left or right side. Differences on both sides of the face would add considerable realism and interest to it. A few nuances here and there can go a long way.

-- The nose posed the greatest challenge for me. I feel it could still be better. I may have made it too "pretty" or bulbous for this type of character.

-- As it sits, there are too many wild lines on the forehead. I didnít really deal with those too much for this example though.

-- The cheeks may be puffed out too much, and could stand to be flattened a little, but Iím such a fan of shadows on faces that I couldnít resist making them like that.

Even though the creation of the head might not be terribly practical for use in whatever game graphics you might be making (since itís not really an example of constructing a head for skinning -- those are mashed out a bit more, and are proportionally different), itís still a good example of some basic pixel art manipulation techniques that can be applied to any graphics you are making. What Iíve shown for adjusting color in your image is far from every way to do it. I just wanted to introduce the Replace Color menu for those of you who arenít familiar with it.

Here are a few more techniques that you could do to match up the colors from Face 2 to look like it had the same skin tone as Face 1:

-- You could redraw the entire face using a Color Indexed palette from Face 1, and youíd have all the colors you want. It would definitely be 100% correct then -- but I think thatís major overkill.

-- You could Color Index your original image, then save the palette, then Color Index your target image by importing the original imageís palette. This can work quite well, but you have no control over what areas get changed for the most part, and it can make your graphic a serious mess if the colors donít match up properly (you may need to do some manipulation ahead of time to account for this). This could potentially be the fastest way to do it except that youíll almost certainly lose some color gradients when you do the color indexing (because color indexing takes your graphic down to 256 colors from the original millions of colors). However, this is still a good technique.

Those arenít the only techniques that exist (especially since I didnít even bring up the Levels, Auto Levels, and Curves menus in this tutorial -- we can save them for some other time). Iím sure there a few other good ones out there.

Well, thatís it for today. I hope it was helpful. To tell you the truth, I leaned some interesting things about Photoshop while making this tutorial, so it was fun for me too! Good luck on your graphics, and e-mail me some ideas on what you want to appear in an upcoming tutorial. See you an a couple of weeks!

- Rick Grossenbacher is a professional 2D artist and graphic designer. Amongst other things, he has worked on the upcoming title Daikatana from Ion Storm, and done freelance work for RCA and Sony records.


Credits: Painting on Polygons is © 1999 Rick Grossenbacher. All other content is © 1999 loonyboi productions. Unauthorized reproduction is strictly prohibited, so don't do it, or we'll paint you white against a white background.