Two Programs, Two Dimensions
(Using Adobe Illustrator and Photoshop to create killer 2D game art)

By Rick "Flatness" Grossenbacher

very artist has their own techniques and approaches when designing artwork. My background is in video game graphics and traditional graphic design, so as I became more and more familiar with the programs used in both fields I learned the power of using them together. 2-D video game graphics are usually made up of bitmap images created with programs like Photoshop and Fractal Design Painter, whereas graphic design uses a lot of mathematically based vector images produced with programs like Illustrator, Freehand, or Corel Draw.

This tutorial focuses mainly on designing and applying your design to pixel art using some methods that may be new to you. The two programs I'm focusing on are Adobe Illustrator 7 and Photoshop 5. Basically, I'll be demonstrating the process of making a design in Illustrator that will be imported into Photoshop as a "template" for creating the pixel art graphic. You are probably wondering how useful and practical Illustrator really is for video game graphics, but I use it more in more in my artwork, and I think you will see that you can create intricate designs that would otherwise be almost impossible (or at least very difficult) without the aid of a program like Illustrator.

Yes, it is true that Photoshop has a Paths Palette, but it doesn't have the powerful features that Illustrator has to offer like the Pathfinder (which is the true power of Illustrator in my opinion). In case you aren't familiar with the Pathfinder, it's a tool that can perform Boolean functions on shapes like intersect and unite (and much more). So, if you are a wiz at Photoshop and are looking to take another step into the world of computer graphics, I highly suggest learning at least the basics of Illustrator. I think if you give it a shot you'll find that it will give your arsenal of graphic-making more power, and will make your life much easier.

Before we get started, here are some tips on pixel art creation in Photoshop that will be used in the tutorial.

As a personal preference, I like using what art historians and instructors call Tenebrism. Although it wasn't really invented by anyone since it is just a natural effect of lighting, it was most notably first used by the renaissance painter Caravaggio. It is essentially just high contrast between light and shadow. For instance, even though this isn't Tenebrism in full force, take a look at the head I have below:

Notice how dark the shadow is under the nose? There is a distinct division point where light and shadow meet. Or take a look at the upper lip compared to the lower lip, and the shadow under the lower lip. Or the bottom of the lower eyelids to the top of the lower eyelids. See the difference? Of course, this is in no way the art-gospel. There are many styles artists pursue, and it's just what I think looks cool.

Another tidbit is the use of layers in Photoshop. I use a considerable amount of layers in every piece of art I make. In the head, for instance, most of the features of the face were put into different layers so I could move them around and see what expression looked best. Not only that, but I also do layers over layers. When I made the cheeks, I created the skin version first, then I put the war paint on a separate layer right over the cheeks I already drew, instead of drawing the paint at the same time as the cheeks. I did this because I am also heavily into manipulating layer opacities to achieve the effect I am looking for. Plus, if I decided I wanted the war paint a different color or altered in shape, it would be a really easy task to change that individual layer rather than to draw the entire cheek over. The only downside to this technique is that you can quickly add so many layers that it is confusing to remember what you put where.

Learning to manipulate at the pixular level is something else I suggest. When I'm working on a graphic, I am constantly zooming in 800% and back to change a couple of pixels here and a couple of pixels there. Not all artists do this, but since I grew up using Deluxe Paint, my brain was trained to plot pixels, and it paved the way for how I make graphics today. Also, you can get some effective dithering going if you are altering individual pixels (which can be vital if you are working from a limited palette – and most games these days are – at least for now).

The final piece of advice that I have to offer is to learn keyboard commands in all the programs you use. You can speed up your work considerably.

Ok, let's get on with the tutorial. Oh, one quick note. The graphics I'm showing are for your own personal learning. I encourage you look them over, study them, and use any of the techniques I'm demonstrating, but these graphics aren't to be commercially distributed. Thanks. With that said, it's time to crack out Illustrator.

First, I started with a very simple Bezier curve.

Note: you might want to save this graphic and import it into Illustrator as a bitmap, then trace right over top of my curve so you can get your curve to match.

Now select the Reflect tool from the toolbar. Then, bring your cursor over the top control point in the curve and hold down the Alt key (the cursor will change to a crosshair with three little dots beside it; it's hard to see because it is right on top of the control point – not the blue origin point off to the right floating out in space, which you can ignore).

Click the left mouse button (with the Alt key still being held) and a dialogue box will come up. Check vertical, then click COPY. As if calling it the Reflect tool wasn't confusing enough, you have to check the vertical button to mirror it horizontally (because Illustrator goes by the shape's axis which is one of my real annoyances with this program).

[figure3.gif]

Now, pick the Direct Selection tool (the white pointer) from your toolbar and select both of the top control points in each of the two curves. Make sure you are only getting the two top points. When they are selected, go to the Average menu (Object - Path - Average). A dialogue box will come up. Check Both, then press OK. This just averaged the two top points to make sure they were directly aligned on top of each other. With them still selected, Join them (Ctrl J). Another dialogue box will come up, and check Corner, then press OK. It should have made a nice point at the top of your two curves.

Now we need to make the path into an editable shape. Perform an Outline Path (Object - Path - Outline Path).

To get rid of some of those stray points, do a Pathfinder Unite (Object - Pathfinder - Unite).

(continued on next page)