- 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 :

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

Search the Archives!

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

By Rick "Flatness" Grossenbacher

 

Now we need to trim the edges of the shape. I used the Pen tool to quickly draw a triangle to use as a marker. While drawing it, hold down the shift key to constrain your angles of the triangle. Then, place the triangle over the left edge of the curve so it is overlapping into the shape a little so we can snip that edge off (look closely to notice where the two shapes are overlapping). Select both shapes.

Then, do a Pathfinder Minus Front. That will chop off the left edge of the curve shape where your triangle was.

Make another triangle and do the same to the right edge of the curve shape. Now we have our basic shape that we soon will turn into a complex shape to use as the template in our bitmap.

The next step is to copy the curve shape and paste it right on top of the original one, offset just a little to the right.

Now do a Pathfinder Unite to make them one object. There will be a little bump near the ends of both sides of the object, so just go in and fix that (delete the offending points and join the other ones to close the gap).

The next step is to copy it and mirror it so it is upside down. Use the Reflect tool by double clicking on the tool's button to bring up the dialogue box. Then, click the horizontal button to flip it upside down. After you've flipped it, line it up so it looks something like this:

To line them up, I used the Horizontal Align Center, and Vertical Align Center buttons on the alignment window to line them up exactly on top of each other. Then I just selected one and pressed the left-arrow key on the keyboard to move it where I wanted it.

We are now done with our basic shape that we will use as a template for creating the carving on the texture. But before we close up Illustrator, there is one more thing we need to do. Take a look at the following graphic. It is just a simple texture I made in Photoshop.

I'm not going to go in-depth into how I created it since this is a tutorial on designing and putting your design together rather than building raw textures. It will serve as our base texture.

Import this graphic into Illustrator with the file still open with the shape we just created. Use the Place menu item (File - Place). Once it has been imported, put your shape right on top of the bitmap. We are doing this so we can get the sizing right. You can scale your shape in Photoshop, but keep in mind that Photoshop's scale is lossy and might mess up your shape a bit. So, I advise to stick with Illustrator since the scaling is based on mathematical vectors rather than colors and pixel placement.

(This is a zoomed-in view)

Notice how it doesn't fit perfectly on top of the bitmap? The edges go off. Actually, this is good to a small degree because, remember, we want this to tile horizontally so we want the sides of the shape to overlap a bit or else it wouldn't tile correctly. Experiment and see what works best. The way I have it in the graphic above is probably a bit too large, so you may need to scale it up or down a bit to fit it how you want it. You will want it so the shapes fit together (when tiled) similar to this:

 

(continued on next page)

 

 

Credits: Illustration © 1999 Chris Buecheler. Two Programs, Two Dimensions is © 1999 Rick Grossenbacheri. 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.