Vector Tutorial: Creating a Realistic 3D Beverage Can

11

When designing labels for packaging, it is most effective to present your design realistically rendered rather than something laid out flat. Your client will appreciate it more and will probably save you more time doing additional design studies. We will employ Illustrator’s 3D effects tools to create 3-dimensional rendering of a beverage can,  built entirely from vectors, using the Symbols palette, the Extrude tool and Illustrator’s Image Mapping.

To start with, here’s a look at our final image.

3d-can-final-sml

And here’s the design of my wrap-around can label. This is also all vector and done entirely in Illustrator. Before using this tutorial, you need to create your own label first.

can-label

Step 1: Converting the Label to Symbol

Now that we have our label,  we need to make the label available to be applied on our 3D surface using image mapping later on. Open the symbols palette (Window > Symbols) and drag the label into the window.

symbols-palette

You may also give the symbol a name. Double-click on it’s icon to open the Symbol Options. Then give the symbol a name, such as “label”. This will make it identifiable should you have a number of symbols in the list.

Step 2: Creating the 3D Can

Now on to the main or most interesting part of this tutorial, creating the 3D can. With the Pen tool, draw a single path that defines the shape of the right half of your can— use gray colored stroke to match the metal like color of the can. Use your label design as your guide, and leave the path opened, with unconnected points at the top and bottom (see figure below).

contour-3d-tool

Then go to Effect > 3D > Extrude & Bevel (see also figure above). This opens up the 3D Extrude & Bevel Options dialogue. It’s very similar to the 3D Extrude & Bevel Options dialog, but with a few key differences.

Turn on the preview.  Set the X, Y, and Z axis rotations and the perspective as you like. I used: -15°, -5°, -15° and Perspective set to 100°. Revolve 360°, with a solid end cap and 0pt offset, and should rotate from “Left Edge”. You will see your new 3D can similar to the figure below.

3d-can-raw

Step 3: Applying the Label Using Map Art

If you have already closed the 3D Revolve Options dialog, you may open it again by selecting the 3D object and on the Appearance palette, double-click the 3D Revolve appearance attribute to edit it.

From the 3D dialog box, click on Map Art. Map Art allows you to cover your object’s surfaces with symbols from the Symbols palette. Search through the object’s surfaces using the arrows until you reach the Side of the Can which represents the visible area of your 3D can (surface number 9 for me).

map-art-1

Next we need to select our “Label” symbol from the drop-down, which will Map our label around the can. You may click on Scale to Fit if you want the image to match the dimensions of your object. Then select Shade Artwork (which results in even slower rendering) for that 3D feel. Make sure you have Preview selected. You may also adjust some lighting controls if you want to, by clicking “More Options” in the 3D Revolve Options dialog box. I simply use the default lighting values.

3d-mapped-art

Here’s an image of our can after image mapping.
3d-can-nolights
Good enough but still looks flat and need more realism. Let’s move on to the final step.

Step 4: Adding Photo-realistic Highlights

Lighting controls in the 3D Revolve and 3D Extrude & Bevel Options dialogs are an excellent start on realistic lighting and shadow, but achieving genuine realism requires hand-drawn reflections.

On a new layer, draw 2 groups of long, narrow rectangles the height of the can’s face (including some on the can lid on top). You will again need to use the Pen tool to match the shapes similar to the image below. Set the Transparencies, Gaussian blur and Gradient of the shadow and highlights as indicated in the image below.

3d-highlights

That’s it. Once again, below is our finished photo-realistic JIVE beverage can. Fully scalable, pure vector 3D all done in Adobe Illustrator.

3d-can-final-sml

11 comments

  1. Vector Tutorial: Creating A Killer 3D Pie Chart in Illustrator | Graphic Design Free Resources 9 April, 2009 at 20:17

    […] Clicking the More Options button will reveal advanced lighting options where you may choose a shading type and modify the light(s) and shadows created from the extrusion and rotation. When you’ve finished setting the options for 3D Extrude & Bevel, click OK (for additional tutorial on 3D Extrude & Bevel, see our previous post on “Creating a Realistic 3D Beverage Can“. […]

Post a new comment

Recommended for you

Dingbats Anyone?

Do you like dingbats? I do love dingbats. Most of the time I rip them off and use them as vector graphics. All you have ...