Create Imitation 3D Graphics in Illustrator and Freehand

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.

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
• shows how placing a light source at different positions affects shadows
• scrolling down a little bit gives some helpful basic 3D renderings of objects

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"
• Illustrator CS 3D effect tutorials
• Part 1: Extrusion and Bevel Basics
• Part 2: Custom Bevel Creation
• Part 3: Creating Symmetrical 3D Objects Using Revolve
• Part 4: Creating a Glass Effect