By: Corrie Haffly

September 24th, 2004

Reader Rating: 9

In this second article of our vector graphics series, we'll take the basics that were covered in part one [1] and make use of them in a fun application of vector graphics programs: Faux 3D Graphics.

There are plenty of powerful programs that create "true" 3D graphics -- graphics that can have lighting and textures applied to their surfaces, and can be rotated in space. In fact, later versions of Adobe Illustrator and Macromedia Freehand have 3D capabilities that allow you to "extrude" shapes (e.g. take a 2D rectangle and turn it into a 3D box), rotate them, and apply different lighting. For more information on Illustrator and Freehand's 3D functions, see the links at the end of this article.

So, if even Illustrator and Freehand have 3D graphics capabilities, why would anyone try to make vector graphics that "look" 3D, but aren't truly 3D?

• Just for the challenge! There is something quite satisfying about a 3D-looking image that you've created yourself in Illustrator or Freehand. But if you don't have anything to prove, these next reasons might be more compelling...
• To make fast buttons and other interface elements. Create round bullet-type buttons, beveled rectangular or rounded rectangular buttons, and other 3D-looking objects for your website or graphic user interface. Here's an example:

• To create stylized logos or images. Some illustration or logo projects might require a more stylized look, perhaps involving skewed edges, imperfect perspective, or non-linear lighting. Here's an example of a "funky shape" that takes less than a minute to create in Illustrator or Freehand:

• To make XP-style icons. This graphic of a computer is an example of a more complex vector graphic that looks 3D, but isn't "truly" 3D. And it's a graphic that can be created using a vector graphic program!

Are you convinced? Let's get started! As you follow this tutorial, you'll hone your skills with the use of gradients, and you might even pick up a few other skills, too.

Note: I'll be making my diagrams and commands using Adobe Illustrator 8. I'll also add a few comments for people who use Macromedia Fireworks to make it easy for you to follow along.

Faux 3D Round Shapes

Creating imitation 3D round shapes is quite easy.

1. Start with a round shape using the ellipse tool.



2. Our current shape has no fill and a black stroke. We'll change this to no stroke (1), then choose the fill square by clicking on it (2) and choose the gradient fill option (3). (You can skip #2 and just click on the gradient fill square if you wish.)



This fills the shape with a gradient:



3. Now, open the Gradient palette and change the type of fill from Linear to Radial.



4. Choose the Gradient tool from the toolbar, or hit "g" for the keyboard shortcut.



5. To make it look like the light source is coming from above and to the left, click in the upper left of the round shape, hold, and drag down to the bottom left to change the centering of the radial gradient.

Easy! Now, remember that these are imitation 3D shapes. The shading and highlights won't be perfect for round shapes that aren't perfect circles.

Faux 3D Beveled Shapes

Beveled shapes can be used to make buttons. Here, I'll demonstrate how to make a round beveled button and a rectangular beveled button.

1. Start with two circles (see Create Vector Graphics in Illustrator and Freehand [2] for tips on how to make two circles inside one another).



2. Select the circles, set the stroke to "none", and the fill to a linear gradient fill.



3. Use the Gradient Tool to set the inner circle's gradient in one direction and the outer circle's gradient in the opposite direction. This makes it look as if the inside of the button is indented slightly, with a beveled edge.

OK, a round beveled button was pretty easy. But the creation of beveled shapes with "hard"-edged objects will take a few extra steps. In this demonstration, I'll create a basic rectangular beveled shape.

1. Let's start with two rectangles.



2. Select the inner rectangle and Edit > Copy (Ctrl-C or Command-C). Then go to Edit > Paste In Back (Ctrl-B or Command-B).



3. With the inner rectangle selected, go to Object > Hide Selection (Ctrl-3 or Command-3). This now-hidden shape will eventually be our top "surface."



Freehand side note: If you're using Freehand, you'll want to put the duplicate inner rectangle on its own layer, then hide the layer from view.

4. Select the Scissors tool.



Freehand side note: You'll want to select the Knife tool.

5. Use the Scissors tool and click on each corner of the two rectangles.



This cuts the shapes into eight individual line segments. It will still look like you have two rectangles until you try to use the black arrow tool; the individual line segments are now independent of each other.

6. Use the black arrow tool to select the line segments from three sides of the shape. In the diagram below, we've marked the line segments to select in orange so that you can see them clearly. The right side of the diagram shows what it looks like in Illustrator.



7. Now, go to Object > Lock (Ctrl-2 or Command-2). This fixes the line segments in place so that you don't select them by accident.



8. Use the white arrow tool to select the top pair of endpoints.



9. Go to Object > Path > Join (Ctrl-J or Command-J).



This takes the two open endpoints and connects them with a line segment.



Freehand note: Sometimes, using the Join command in Freehand doesn't work as expected. If you're having more trouble than you think it's worth, use the Pen tool to connect the line segments together instead!

10. Repeat the same process for the bottom endpoints (select with white arrow tool, then Join command), then set the Stroke to none and the Fill to a gradient. The first beveled edge is complete!



11. We will repeat these steps to create the other beveled edges. First, unlock the other line segments by going to Object > Unlock All (Ctrl-Alt-2 or Command-Option-2).



12. Now, select everything but the two line segments that you want to work with and lock them (Ctrl-2 or Command-2). Again, I've colored the selected objects orange in the diagram below.



13. Use the white arrow tool to select the endpoints, then Join them.



14. Repeat for the other side. You may then change the stroke and fill colors.



15. Continue the "Unlock > select > Lock > select points > Join > select other points > Join > change stroke and fill" sequence for the other sides. Here's the result:



16. Now, let's put the middle part back by selecting Object > Show All (Ctrl-Alt-3 or Command-Alt-3).



17. The middle rectangle will reappear. You may then add a gradient fill to the middle area.



18. Here's our final beveled rectangle. I've split up the different shapes just for demonstration purposes:

Feeling good about your imitation 3D shapes so far? Let's move on to something more complex…

Faux 3D Box Shapes

Let's try to create a "funky box shape" that you can use as a base for lots of other types of imitation 3D objects.

1. Use the pen tool to create three different shapes that, lined up together, make a box shape.



Here are the individual shapes, in case you're wondering what they look like separately:



2. Use the black arrow tool (selection tool) to select all of the shapes. Select the Stroke option in the tools palette, then click the "none" option to remove the black stroke. (You can also use the keyboard shortcut "/" to remove the stroke.) Then, click the gradient option to fill all three shapes with a gradient. (You can use the keyboard shortcut "." or ">" to select the gradient option.)



3. Use the black arrow tool to select the individual shapes, then use the gradient tool to "fix" the coloring.



Here's the result:

Is this box too boring for you? Let's look at a couple ways that you can use this "funky box" for other purposes…

1. Use the pen tool to create a distorted square on the front side of the box (roughly following the lines of that side) and fill it with a grey-white gradient. Can you see where this is going?



2. Use the gradient tool, if necessary, to fix the direction of the gradient.



3. Finally, use the pen tool to create two long, thin triangles to create a funky TV graphic. Just what you've always needed!

In the next example, we'll take the funky box and lay text over it to use in a retro-style Website catalog as a "no product image available" placeholder.

1. First, copy and paste the box into Photoshop and create a text layer.



2. Right-click on the text layer and choose Rasterize Layer.



3. Go to Edit > Transform > Distort.
4. Use the cursor to drag on the corners of the text so that it conforms to the same lines as the surface of the object.



5. Double-click inside the text area to commit your changes, then save for Web. Use it in your local retro or fun-and-funky-style Website.



Side Note: If you have Illustrator 10+, you may use the Envelope Distort command to fit the text to the object. This tutorial shows you how to use the Envelope Distort command [3].

Congratulations!

You now know how to create common imitation 3D shapes:

• round shapes
• beveled shapes
• box shapes and variations

And you've also realized that creating these 3D-looking 2D shapes really comes down to fancy use of the gradient tool. So, to use the gradient tool well, you'll want to spend some time looking at photographs or real-life objects to see how lighting affects the shadows and shading of the object. Below are a few links to resources that might be helpful in understanding light and shadow.

• a nice basic overview of lighting, shapes, and shadows [4]
• shows how placing a light source at different positions affects shadows [5]
• scrolling down a little bit gives some helpful basic 3D renderings of objects [6]

Furthermore, because these imitation 3D graphics simply combine shapes and gradients, you can use the same gradient tool techniques to create quick 3D-like graphics in Photoshop or Fireworks as well (using vector tools or selections!). Just remember that you'll want to use vector graphics if there's a chance that you'll want to be able easily to resize and reuse the graphic later.

Finally, I mentioned earlier that later versions of Illustrator and Freehand have some 3D rendering capabilities. If you wanted to learn more about that, these links might be helpful:

• a nice overview of the "2D Drawing Applications' 3D Capabilities" [7]
• Illustrator CS 3D effect tutorials
• Part 1: Extrusion and Bevel Basics [8]
• Part 2: Custom Bevel Creation [9]
• Part 3: Creating Symmetrical 3D Objects Using Revolve [10]
• Part 4: Creating a Glass Effect [11]

[1] http://www.sitepoint.com/article/graphics-illustrator-freehand
[2] http://www.sitepoint.com/article/graphics-illustrator-freehand
[3] http://www.nickhodge.com/mne.php?mcid=545
[4] http://www.eclipseunleashed.com/tut/shade/basicshapes.htm
[5] http://www.tiemdesign.com/howto/2004/May/Drawing_3DShapes/default.asp
[6] http://www.anticz.com/drawing1.htm
[7] http://www.designer-info.com/master.htm?http://www.designer-info.com/Writing/2d_to_3d.htm
[8] http://www.creativemac.com/2003/12_dec/tutorials/illcs3d1031211.htm
[9] http://www.creativemac.com/2003/12_dec/tutorials/illcs3d2031218.htm
[10] http://www.creativemac.com/2004/01_jan/tutorials/illcs3d3040114.htm
[11] http://www.digitalmediadesigner.com/articles/viewarticle.jsp?id=23334