loonygames' Painting on Polygons

| - Contents - About - Submissions - Feedback - Archives

volume 1, issue 31

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.

Feedback:

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 :

From the Mouth of Madness: Our loony editor's take on all the latest news.

Search the Archives!

Painting on Polygons:
Anime and Illustrator

By Rick "Flatness" Grossenbacher

hanks to those of you who wrote in suggestions for what you wanted to see on an upcoming edition of Painting On Polygons. Keep your suggestions coming so I can get a good idea of what everybody is looking for.

In this installment of Painting on Polygons, I’m going to switch gears a little to introduce Adobe Streamline with Illustrator 7 (nope, I haven’t gotten around to purchasing 8 yet). It seems that there are quite a few people out there who really like working with Adobe Illustrator. I’m very glad to hear this because it’s a powerful tool, and one I personally can’t live without. Today I’d like to show the power of Streamline, because some of you may not be familiar with this helpful tool. Here’s how it works. Say you draw a figure on a piece of paper, then scan it into the computer and save it as a TIF file. Well, Streamline takes your scanned image and traces the darkest lines (they can be adjusted to a particular threshold), then converts them into editable paths to be used in a program such as Illustrator.

One thing to keep in mind is that Streamline is not a part of Illustrator; it is a completely separate program. I’m not sure how much it costs offhand, but my version came free when I purchased Illustrator. If I recall, it was only one floppy disk so it’s not exactly a huge program (although I may have gotten a watered down version.

For this tutorial, I will be using Streamline 3.0. It’s pretty old. Heh, it’s the pre-Windows 95 version, but hey, it gets the job done. :) You might have a different version, but the steps in this tutorial should be pretty much the same on any version since I’m not doing any real tricks, just basic commands.

With all that out of the way, let’s get started...

I think Anime is cool stuff, so I thought it would make good subject matter for this tutorial. Plus, the Anime style is still used quite a bit in the gaming industry. Remember some of the cool Capcom games? They were filled with Anime-style imagery. The earliest game that I remember with this was the game U.N. Squadron. It was a side scrolling flying game. The game itself was ok, but I remember the cool characters that you could pick from. If I recall, the face of the guy you chose was at the bottom of the screen while you played the game. So, to demonstrate the content of this tutorial, I decided to do for a portrait-like close up of a face similar to one in that game. Yeah, I know a face isn’t terribly exciting, but I also wanted to show something simple, and I chose it for simplicity sake because there are far less complex lines to deal with that a total body. Here is the face of my guy:

There are several reasons for choosing Illustrator to make this drawing.

1. Take a look at how lovely and pristine the black lines are. Without the aid of Illustrator, that would be a serious pain to do.

2. Remember, Illustrator is vector based so pretend you wanted to make your cool picture into a poster and needed to enlarge it. No problem. Vector images can be altered to any size at any point and look just as good as if they were 1 inch or 100 feet tall (pretty much the same way a font works). But if you tried to enlarge a bitmap picture that much in Photoshop, it would turn into a blurry, pixelated mess.

3. The third reason is that individual Illustrator colors can be changed at any time along the way. I guess that is kind of true with Photoshop; it’s just easier in Illustrator.

4. The other nice thing about doing something like this in Illustrator is that by the time I’m finished, all the parts of this character’s face will be separate objects that can be altered or move with ease. Are the eyes on the face too far down? No problem. Just nudge them up a few pixels. Is the mouth shaped wrong? Again, no biggie, we’ll just rotate it a bit. It’s great to have the option to do that, and I think it really helps you learn proportions since you can toy with them as much as you want and get a real feel for facial expressions. This is important because have you ever noticed how the placement of your facial features defines your face so well? Sometime, go up to a mirror and use your two pointer fingers and pull the skin by the sides of your nostrils outward just a slight bit. See how that altered your nose and how it most likely totally changed the look of your face. Or try it around your eyebrows, eyes, or mouth. The point is, when you move a feature just a fraction of an inch in a different direction it will give the expression a much different feel. That’s why making a face look good, or look like a particular person is hard as hell. It’s because the placement, size, and angle of all of the features together as a whole are critical. Since a picture is worth a thousand words, take a look at the initial sketch I did for this face below.

Not particularly awesome in my opinion. He’s looking a bit strange. Particularly with the eyes. But I knew in advance that I would be messing around with the features anyway, so placement wasn’t all that critical at this point. In fact, a while back I used to draw all the features of the face separately on different parts of the same sheet of paper and scan them in, then slapped them together in Illustrator (kinda like what we did when we were kids with Mr. Potato head)! But, I learned that a method like that wasn’t terribly practical -- hey, I was experimenting with something new. :) If I were doing this drawing as a standalone hand-drawn illustration, obviously I would take the time to get everything right. All I’m saying is, don’t stab yourself in the hand with your own pencil out of frustration if you can’t get everything perfect at this stage. Just buzz through the sketch because we’ll be tweaking it out bigtime in Illustrator.

(Continued on next page)

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.