HomePhotoshopDreamweaverIllustrator
 
 
Illustrator Tutorial - Peanut Butter Jar

Before commencing this tutorial, we strongly recommend that you look at this tutorial.

Although we start with the same techniques, this tutorial develops some fairly advanced features such as 'mirroring' an image and giving it a 'reflected' appearance as in the image to the right.

Let's start by right-clicking the 'label' below, copying the image and, in a new Illustrator document, pasting it.

Peanut Butter Label

Do the same with this image below and paste it into the same Illustrator document that you pasted the label (above).

Peanut Jar lid

Now make both these graphics into Symbols.  How?

When you have successfully created these two symbols, you can select each one and delete them.

Peanut reflection

To get you started, right-click the image to the right (the outline of our peanut jar), copy it and paste it into our new Illustrator document.

Zoom in if necessary and, using Pen Tool Pen Tool, carefully draw around the outline (remember, holding down the Shift key as you draw keeps your horizontal and verical lines exactly straight).

Peanut Jar Outline

The image to the right shows how we have 'split' this basic outline
(if in doubt, see the tutorial referred to earlier).  We use the Scissor Tool Scissor Tool to 'cut' the line we've drawn.  As you drew with the Pen Tool the natural 'breaks' you will have created when you changed directions will have made 'nodes' which can easily be cut with the Scissor Tool (zoom in to help yourself).

Where you created the main vertical (i.e. the 'black' section of the outline), you will not have the two nodes necessary to 'cut' this line.  Use the Add Anchor Point Tool Add Anchor Point Tool   to 'cut' (where it says 'AND HERE', 'AND HERE' on the image to the right.

Next, using the Selection Tool Selection Tool select the top segment (the one shown in red) and change the 'Stroke Colour' to #ED1C24.

Select the next segment and change its Stroke Colour to the coffee-colour as shown.

Next, select the main vertical line and make its Stroke black (the colour doesn't really matter as this part will be covered by the 'label')

Finally, select the bottom-most segment and make its Stroke the same coffee colour as before.

Use your Selection Tool to 'marquee' all the segments and go to OBJECT...Group.

Peanut Jar Cut
If you are having problems, the files so far can be downloaded by clicking the link to the right.  This file contains two layer - the original outline for you to trace around and a 'cut' and 'coloured' outline as in the previous stage.  The Symbols have not been added to the Symbols palette! Peanut Jar Download

With all the segments grouped and selected, go to EFFECT...3D...Revolve. Move this dialogue box over so you can see all of your artwork, check the 'Preview' box.

Looking good?

Now click the 'Map Art' button.

3D Revovle

Below, you'll see why we needed to move the dialogue box over - we need to see exactly where the red 'wireframe'
is in relation to our surfaces.  My artwork is showing 39 Surfaces (yours may differ slightly). In the example below,
when the red wireframe seems to indicate where the label should go, scroll down through the Symbols until you come
to the 'label' symbol you created. If the label does not appear in the preview window, scroll back up and select the 'None'
symbol.  This happens with Map Art - the wireframe was actually indicating the inside of the label which is not what we
want. 

Map Art requires quite a bit of experimentation before you get the hang of it - as we will soon see!

Map Art
As you can see in the example above, we've selected the correct surface for the 'Label', but it's not quite correct - the top and bottom of the label is missing and it's turned further around the jar than is ideal.

More on Map Art

Before you can map art onto your object, you have to choose onto which surface of the object you want to place your artwork. At the top of the Map Art dialog, there are buttons with arrows that allow you to navigate or step through each of the surfaces of your object. As you step through each surface, Illustrator displays the selected surface in the center of the Map Art dialog. In addition, Illustrator tries to help you identify the selected surface by highlighting it with a red outline on the artboard (as in the previous image). Depending on the color of your object, this red outline could be helpful, or it could be barely visible.

The surface that appears in the Map Art dialog is shaped as if it is laid flat. You’ll notice as you step through the different surfaces on your object that some show a light gray background whereas others show a dark gray background. Some surfaces may even show a background that is dark gray only in certain areas. This is Illustrator’s way of letting you know which surfaces, or which parts of a surface, are not visible, or are hidden from view. As you would expect, if you choose to use the track cube to view your object from a different perspective, the shaded surface areas in the Map Art dialog updates accordingly.

Map ArtFig 1.
Once you’ve chosen the surface you want to map art onto, use the Symbol pop-up menu to choose a symbol. The selected symbol appears on the surface area in the Map Art dialog with a bounding box. You can drag the symbol to position it to your liking on the surface, and you can also drag on the handles to resize it. As you adjust the position of the symbol, you will see the preview update on the actual 3D object on the artboard. Alternatively, you can use the Scale to Fit button at the bottom of the Map Art dialog to have Illustrator resize your symbol to fit to the surface, although it does so non-proportionally.
Map Art
In Fig. 1, you can see the light grey section in the Preview window which Illustrator thinks is the optimim position for a Symbol.  Use the eight
'handles' which surround the symbol to drag it into position, keeping an eye on the original artwork. In this example, you may want the label
to be further around the 'jar' than is shown.  Simply drag the label left or right until you are happy with the resuilt.
Map Art

All that remains is for us to place the other Symbol (we have called it 'capedge') around the 'lid' of the jar.  Remember, Map Art may indicate
the inside of the lid.  Keep an eye on the original and, if the symbol doesn't appear, scroll back to the 'None' Symbol and keep scrolling through
the 'Surfaces' until you get the correct one.  Again, use the handles to re-position the symbol in the preview window.

Whew!  I hope you have got this far and learned a little more! But, in the first image in this tutorial, it shows a 'reflection'  How do we do that?

It's in the next tutorial and is all about Opacity Masks!

©grafikhaus 2015 | sheffield-central.com