- Contents
- About
- Submissions
- Feedback
- Archives

volume 1, issue 26

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:

Painting on Polygons: Our regular texture tutorial series, by Chris Buecheler, a freelance 2D artist.

DRAW, Partner!: A look at the various techniques involved in 2D art design.

T-Shirts: Stylin' loonygames t-shirts from Berda Compugrafix!

Artwork: Hey, dig the artwork on loonygames? We're selling some of the original art.

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 :

Inside Raven Software: Our definitive history of the company behind Hexen, Heretic and other classics.

Search the Archives!

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

By Rick "Flatness" Grossenbacher

 

Once you have your shape the size you want it, get rid of the bitmap of the base texture you just imported. You don't want to keep it underneath your shape because when you rasterize the Illustrator document in Photoshop, the bitmap will be part of your shape (and you don't want that). We will import the stone texture into Photoshop separately so the shape and bitmap are on different layers.

You should have only your shape in the Illustrator document now. Save this as an Illustrator file. Now we're done with Illustrator for this exercise. It's time to fire up Photoshop.

In Photoshop, open up the base texture you used to do your sizing in Illustrator.

I made the texture and the background two different layers, then named the texture layer "Stone." There was really no cosmic reason for making a background layer other than I just wanted one I like to have a background layer separate from things I will be editing.

Now it's time to load up the shape we made in Illustrator. Load it like you would any other file in Photoshop. A dialogue box will come up to confirm that it is going to rasterize your shape (change it from a vector object to a bitmap). Click OK. Select the shape, copy it, and paste it on top of the stone texture in the middle as a separate layer. Name this layer "Shape." Naming your layers is a good habit to get into. Although I have to admit I'm usually too lazy to do it, for the purposes of this tutorial it is critical or else it would be impossible for you to know which layer I'm referring to.

In your layers palette, click on the "Stone" layer to select that layer (it should be right below your "Shape" layer). Then move your mouse pointer to the "Shape's" layer and Ctrl click. It should select the shape. Notice that when you have the cursor on top of the "Shape" layer and you press Ctrl, the mouse icon changes to a little hand with a hash-marked box. Now that you have the outline of the shape selected and you are still on the "Stone's" layer, do a copy (Ctrl C). You've just copied the shape but from the contents of the "Stone's" layer. Now paste it right on top of the original shape but on a separate layer. Name the layer "Stone Shape," and drag it so that it is the top layer in the palette. Then, with the "Stone Shape" layer still highlighted, bring up the Brightness/Contrast pop-up window (under the menu item: Image - Adjust - Brightness/Contrast). We are going to brighten it up very slightly to set it off from the background stone. Drag the Brightness slider up to +16 and click OK. Here is what your layers palette should look like:

It's time to put a shadow under the shape we just cut out of the stone. First, select the "Shape" layer (the black shape, not the one we just made), and make two copies of it. We have made the two extra layers because they will simulate the shadow's falloff. Your layers palette should now have the following layers from top to bottom: "Stone Shape," "Shape copy 2," "Shape copy," "Shape," "Stone," and "Background." Click the layer "Shape copy 2" to activate it, then select the Move tool (V), and press the down-arrow key on the keyboard once to move it down one pixel.

Now select the layer "Shape copy" and press the down-arrow key twice. Then, set the opacity slider of "Shape copy" to 70%. To complete the shadow, select the layer "Shape" and press the down-arrow key four times and set the opacity slider of that layer to 40%. Here is what the graphic should look like:

With your shadow done, we need a highlight at the top. Make a duplicate layer of the "Stone Shape" layer and drag it below the original "Stone Shape" layer (the copy should be your second layer from the top). Bring up the Hue/Saturation menu (Ctrl U). Drag the Lightness slider to +40 and click OK. Now move it up in position by one pixel by pressing the up-arrow key on the keyboard once. Ba-Bing! Now it is starting to look like something.

Now that everything looks good, go ahead and merge all the layers except the "Background" layer and the "Stone" layer. Name the layers you just merged "Stone Shape." You should have a total of three layers in your layers palette now.

Ok, here is where it may get a bit complicated so pay close attention. Duplicate the layer "Stone Shape," and name the duplicate "Stone Shape Bottom," then move the layer down underneath "Stone Shape" (so "Stone Shape Bottom" is the second layer from the top in your layers palette). Next, click "Stone Shape Bottom" to make sure it is selected, and press the down-arrow key on the keyboard 7 times (make sure you are still using the Move tool. After that, bring up the Brightness/Contrast menu and set the Brightness to -20 and the Contrast to -27.

Now, duplicate "Stone Shape" again and name it "Stone Shape Bottom 2," and on the layers palette move it underneath the layer "Stone Shape Bottom." Then press the down-arrow key 11 times. On this one, you don't need to change the Brightness/Contrast because it is underneath the shadow of "Stone Shape Bottom" and looks fine as it is.

Ok, we did the bottom. Now for the top. Duplicate "Stone Shape" and name the duplicated layer "Stone Shape Top," then drag the layer on the layers palette underneath "Stone Shape Bottom" (in between "Stone Shape Bottom" and "Stone Shape Bottom 2"). Then move it with the up-arrow key 9 times. Then bring up the Brightness/Contrast menu again and set the Brightness to -28 and the Contrast to -23.

Next, duplicate "Stone Shape Top" (the layer you just created), and name the duplicate "Stone Shape Top 2," then drag it underneath "Stone Shape Bottom 2." Move "Stone Shape Top 2" up 2 pixels by pressing the up-arrow key twice. Then, set the Brightness down to -55. I know that all these layers are a pain to keep track of, but their arrangement is very important. So check to see if yours is the same as here:

Then, check to see if your graphic looks like this:

This thing is really starting to take shape now. I looked at the top layer in the layers palette, "Stone Shape," and decided that it was a bit too bright so I took down both the Brightness and the Contrast to -8. Feel free to do this to any of your layers. Maybe you'll want something different from what I have here and like it better. Quite often I will continuously change the brightness of layers, just to give it a different perspective. If you do this, you will tend to see things you didn't before.

At this point we are basically done with our design. The only thing it needs now is some touching up by hand. So, I'm going to set my brush to a real small size (a couple of pixels width) and go into a few areas using the Burn and Dodge tools to make some highlights and shadows.

The real problem this graphic suffers from is that by using a simple 2-D shape created in Illustrator and placed in Photoshop, it gives somewhat the appearance of paper-thinness to the stone shapes. Maybe that is the look you are going for. If not, the way to solve this problem is up to some imaginative pixel art manipulation or even some of it being rendered in 3D Studio MAX. But that's a whole other tutorial for another time.

Experiment and try different things with your texture. I put another smaller border inside the original top and bottom borders and then drew some moss to see how that would look.

Or, if you are really ambitious, try something completely different. Most of the alterations made to this were with a few added/changed layers, and the use of the Burn and Dodge tools (probably my most often-used tools besides the Rubber Stamp).

Well, whatever you do, I hope you've at least learned a few things about using Illustrator and Photoshop together to your advantage to create some cool art. If you would like to send me your version of this tutorial that you are working on, for me to take a look at, go ahead and e-mail it to me, I'd be happy to check it out. Or, if you've seen a technique in this tutorial that you think could be improved on, or just a different way of doing something that would make it look better, send that in too. I'm always interested in other artists' methods.

 

- 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: Illustration © 1999 Chris Buecheler. Two Programs, Two Dimensions is © 1999 Rick Grossenbacher. All other content is © 1999 loonyboi productions. Unauthorized reproduction is strictly prohibited, so don't try it or we'll do something really nasty. Trust us. Wooooo.