In this second article of our vector graphics series, we’ll take the basics that were covered in part one 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? 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. 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. Beveled shapes can be used to make buttons. Here, I’ll demonstrate how to make a round beveled button and a rectangular beveled button. 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. 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. 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. 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! 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. Is this box too boring for you? Let’s look at a couple ways that you can use this ‘funky box’ for other purposes… 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. 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. 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. 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: Source.