In this Illustrator tutorial I’ll explain step by step how I created the "Delicious Coffee" illustration which was published in "1000 Restaurant, bar & café graphics" by Rockport Publishing.</p>The final image

This is what we will be creating:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/final_image.jpg" alt="Image Description" width="600" height="849" /></div>

Photo of the illustration in the book:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/book.jpg" alt="Image Description" width="600" height="400" /></div>Step 1: Create a new document

Create a new document, since this is going to be a poster we need a large area to work with. Make it A3 size (297 x 420 millimetres or about 11,7&#215;16,5 inches).

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step1.jpg" alt="Image Description" width="600" height="494" /></div>Step 2: Create layers, background and crop marks

Before we start, it is very important to keep everything organized. So please make a few new layers and name them: background, saucer, shadow, cup and smoke. Now select the background layer, grab the Rectangle Tool, draw a rectangle bigger than the page size and lock the layer so you won’t accidentally move it. I used #CAD980 for the nice fresh green color.

Now make sure you have no objects selected and go to Object>Crop area>Make to create crop marks for your document. It’s a nice little feature which will help you during the export of your file to a different format. It will adjust the document area to the crop marks and ignore any objects outside the artboard.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step2.jpg" alt="Image Description" width="600" height="309" /></div>Step 3.1: Creating the saucer

Select the saucer layer and using the Pen Tool draw a line similar to the one in the picture, give it a white stroke with weight of 2 pt. It will be a basis for our saucer.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step3_1.jpg" alt="Image Description" width="600" height="309" /></div>Step 3.2

Go to Effect>3D>Revolve, to transform the line into 3D shape. Use settings from the picture below. Additionally you will need to setup the light points, and their strength. In my project each of the three light points have the same Light Intensity and Ambient Light value.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step3_2.jpg" alt="Image Description" width="600" height="649" /></div>Your shape should resemble this:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step3_2_2.jpg" alt="Image Description" width="600" height="309" /></div>Step 3.3

To make the stripes at the rim of the saucer we first need to draw 3 rectangles of the same width and height, align them like in the picture below, group them and drag the group to the Symbol panel.

Name the symbol as Stripes set its type to Graphic and click OK. By doing this we convert our three rectangles into a symbol, to be able to map that symbol onto our 3d shape in the next step. (Colors used: #BD127C – magenta, #A8C653 – lime green)

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step3_3.jpg" alt="Image Description" width="600" height="413" /></div>Step 3.4

Select the saucer, go to the Appearance panel and double click 3D Revolve option. In 3D Revolve options panel select Map Art, go to surface 2 and select Stripes symbol from the drop down menu. The symbol will appear in the surface preview area. Click the Scale to fit button and check the Shade artwork option, so the lights we adjusted earlier will affect the mapped symbol.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step3_4.jpg" alt="Image Description" width="600" height="579" /></div>The saucer is ready, it should look like the image below:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step3_4_2.jpg" alt="Image Description" width="600" height="309" /></div>

Step 4: Creating the cup

Now that we’ve created the saucer it’s time to create the coffee cup.

There are two ways to do it, you may draw the whole shape at once like I did, or you may take the "precision way" <imgsrc='http://www.tutorial9.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> , and draw only half of the shape, duplicate it, reflect it, and join the two halves together.

Hide the saucer layer, select the cup layer, grab the Pen Tool and draw a shape like that, but don’t connect the highest and the lowest point.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4.jpg" alt="Image Description" width="600" height="534" /></div>

Duplicate the shape by copying it (Edit>Copy) and pasting it in front (Edit>Paste in Front). Reflect the new shape vertically by double clicking the Reflect Tool, and checking the vertical axis.


<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_1.jpg" alt="Image Description" width="600" height="481" /></div>

Put the shapes close to one another so their end points overlap. Select the top points by dragging over them with the Direct Selection Tool, right click and select Join. Do the same with the two points at the bottom of the shape.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_2.jpg" alt="Image Description" width="600" height="566" /></div>Step 4.1

Take the Ellipse Tool, and draw two ellipses just like on the picture below. The gray ellipse will serve as an inside wall of the coffee cup, give it a nice gray color: #EDEDED. The second one will simulate the coffee and it should have a really dark chocolate/coffee type of color: #1D1C1D

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_1_1.jpg" alt="Image Description" width="600" height="546" /></div>Step 4.2

Open the Pathfinder panel (Window>Pathfinder), select both ellipses that we just drawn and click Divide on the Pathfinder panel. The Divide command cuts selected objects in places where they overlap one another, so now you should have three separate shapes instead of two ellipses.

Since pathfinder automatically groups shapes press Ctrl+Shift+G to ungroup them. Then, select the bottom most shape and delete it, we won’t need it.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_2_1.jpg" alt="Image Description" width="600" height="546" /></div>Your results should look like this:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_2_2.jpg" alt="Image Description" width="600" height="539" /></div>Step 4.3

No we will use the gradient mesh tool to simulate the coffee foam. Select the coffee shape and convert it to gradient mesh by clicking Object>Create Gradient Mesh. Make it 6 columns, 6 rows with flat appearance.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_3_6.jpg" alt="Image Description" width="600" height="409" /></div>Step 4.4

Now take the Lasso Tool, make a selection as indicated on the screenshot below and give it a light brownish color. My color is #694E56.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_4.jpg" alt="Image Description" width="600" height="335" /></div>Step 4.4

Drag the indicated mesh points to the area outside the mesh:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_4_1.jpg" alt="Image Description" width="600" height="335" /></div>You should get something like this:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_4_2.jpg" alt="Image Description" width="600" height="355" /></div>Step 4.5

Now move the other points like this:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_5.jpg" alt="Image Description" width="600" height="355" /></div>Tweak the mesh a little, adjust the colors, your outcome should resemble the picture below::

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_5_2.jpg" alt="Image Description" width="600" height="355" /></div>Step 4.6

The only thing our cup lacks now is the ear. Select the Pen Tool and draw the shape like in the picture below. Give it a light grey colour, like #EBEBEB. Remember to put it on the very bottom of the cup layer.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_3.jpg" alt="Image Description" width="600" height="436" /></div>Now use the Pen Tool to draw a few highlights over the ear shape just like that (don’t worry about the highlights sticking out of the ear shape we will fix it soon):

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_3_2.jpg" alt="Image Description" width="600" height="570" /></div>Use the layers panel to bring the ear shape over the highlights:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_3_3.jpg" alt="Image Description" width="600" height="570" /></div>Select the ear and the highlights, and press ctrl+7 or go to Object>Clipping Mask>Make. Your ear shape will become a clipping mask for the highlights, and will become invisible.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_3_4.jpg" alt="Image Description" width="600" height="570" /></div>To make the ear visible again, find it on the layers panel and select it. Give the ear the same color as before (#EBEBEB). The effect should look like this:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step4_3_5.jpg" alt="Image Description" width="600" height="448" /></div>Step 5: Adding detail to the cup

Since the basis of the cup is ready, it’s time to add some detail to it. We’ll start with the striped pattern.

To get started draw a long green (#A8C653) vertical rectangle, and duplicate it by holding the mouse button with Alt and Shift while you drag it.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5.jpg" alt="Image Description" width="600" height="653" /></div>With the duplicated rectangle still selected, press ctrl+D about 40 times to flood your screen with rectangles <imgsrc='http://www.tutorial9.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> Fill every other rectangle with bright pink color (#B94284).

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5__1.jpg" alt="Image Description" width="600" height="360" /></div>Step 5.1

Group all the rectangles, copy the main coffee cup shape and paste it in front (ctrl+F).

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5__2.jpg" alt="Image Description" width="600" height="360" /></div>Now select the shape and the stripes and go to Object>Envelope Distort>Make with Top Object.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5__3.jpg" alt="Image Description" width="600" height="360" /></div>Select the pattern, go to the layers panel and put it below the coffee shape, and the inside of the cup. Next, go to Effect>Warp>Fisheye, set the Bend parameter to 50 and click OK.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_1_2.jpg" alt="Image Description" width="600" height="378" /></div>Keep the pattern selected and go to Effect>Warp>Twist. You will be notified that "This will apply another instance of this effect". Just click "Apply New Effect" because this is what we need to apply the second effect. Select the Horizontal option, and set the Bend value to 40.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_1_3.jpg" alt="Image Description" width="600" height="378" /></div>Now you can obviously see that the pattern is getting outside the cup, this is an undesired effect. To get rid of it we need to "lock" the pattern inside a clipping mask.

Once again copy the cup shape and paste it in front.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_1_4.jpg" alt="Image Description" width="600" height="435" /></div>Select the shape and the pattern and press ctrl+7 to put the pattern inside the clipping mask.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_1_5.jpg" alt="Image Description" width="600" height="435" /></div>Now create a white ellipse covering the top of the cup. It will cover the unnecessary parts of the pattern and give the illusion that our cup has thick edges.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_1_6.jpg" alt="Image Description" width="600" height="526" /></div>Find the ellipse on the Layers panel and put it inside the clipping mask that we created in the previous step.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_1_7.jpg" alt="Image Description" width="600" height="352" /></div>The effect should look like this:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_1_8.jpg" alt="Image Description" width="600" height="445" /></div>Step 5.2

In this step we will use the blend tool to give the cup some shading. Start with selecting the clipping path of the cup and the ellipse that we just made.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_2.jpg" alt="Image Description" width="600" height="403" /></div>Copy the shapes, paste them in front and click Divide on the Pathfinder panel. After doing this you will see a new group on the Layers panel. Expand the contents of the group and delete the first two objects.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_2_2.jpg" alt="Image Description" width="600" height="403" /></div>Now select the only shape that’s left inside the group and hit ctrl+shift+G to ungroup it. Copy it and paste it in front (ctrl+F), then scale the copy down and move it up over to the edge of the cup.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_2_3.jpg" alt="Image Description" width="600" height="403" /></div>Fill the bigger shape with black and the smaller shape with white. Double click on the Blend Tool and choose "Smooth Color" from the Spacing list. Now while having the Blend Tool and both shapes still selected click on the black shape and then on the white shape to obtain shading effect like on the picture below effect:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_2_4.jpg" alt="Image Description" width="600" height="403" /></div>This is certainly far from what we want our image to look so we have to tweak some settings <imgsrc='http://www.tutorial9.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />

Select the blend, set its blend mode to Multiply and bring the Opacity down to 25. It should look like this:

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step5_2_5.jpg" alt="Image Description" width="600" height="403" /></div>Step 6: Creating shadows

This step is fairly simple.Turn off the cup layer, select the shadow layer and draw a shape resembling a shadow of the cup. Fill it with black. It should be similar to the one on the picture below. Pen or Pencil are the best tools for the job.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step6_1.jpg" alt="Image Description" width="600" height="337" /></div>Change the shadows opacity to 15% and go to Effect>Stylize>Feather. To slightly blur the edges of the shadow.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step6_1_2.jpg" alt="Image Description" width="600" height="337" /></div>Now turn on the cup layer and position the shadow so it aligns well with the cup.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step6_1_3.jpg" alt="Image Description" width="600" height="463" /></div>Step 6.1

Turn off the cup layer again. This time we will draw a shape that will be used as a dark shadow directly underneath the cup. Take the Pen Tool and draw a thick line just like in the picture below. Lower its opacity to 85%.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step6_2_1.jpg" alt="Image Description" width="600" height="337" /></div>Turn the cup layer on and position the shadow properly underneath the cup. You will probably need to tweak points and handles on the curve to make it look good.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step6_2_2.jpg" alt="Image Description" width="600" height="309" /></div>Step 7: Adding steam

Select the Pen Tool or the Pencil Tool and start to draw a steam-like organic object. Be creative <imgsrc='http://www.tutorial9.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> There is no automatic way to do it, you just need to imagine the shape and draw it.

The best way to do this is to start from the bottom and draw every "branch" as a single shape. You can connect everything later by using the "Add" option in the pathfinder.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step6_7_0.jpg" alt="Image Description" width="600" height="405" /></div>Step 7.1

Lower the opacity of the smoke object to 70%, copy it and paste it in the back by using ctrl+B or Edit>Paste in Back. Offset the copy a little to the left and lower it’s opacity even more, to about 30%.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step6_7_1.jpg" alt="Image Description" width="600" height="405" /></div>Step 7.2

The shape in the back is barely visible right now. We need to take care of that by making the shape in the back thicker. Thicker, not bigger so scaling the shape is out of the question.

Select the shape, go to Effects>Path>Offset Path and enter 6 px in the offset value field, leave the other options unchanged.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step6_7_2.jpg" alt="Image Description" width="600" height="405" /></div>Step 8: Background

To make the striped background, draw two really long lines with 0.75 pt white stroke outside of the artboard, and rotate each of them 45 degrees.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step8_0.jpg" alt="Image Description" width="600" height="580" /></div>Step 8.1

Select the Blend Tool and click on both shapes to make a blend from them. After this double click on the Blend Tool in the tools panel. From the Spacing list select Specified Steps and enter 100. The lines will be duplicated 100 times to form a striped pattern.

<divclass="image-container full"><imgsrc="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/step8_1.jpg" alt="Image Description" width="600" height="580" /></div>This is the end of the tutorial. In case you had any problems with following the steps feel free to contact me.

Download the PSD (or source files)

<divclass="download"> <ahref="http://tutorial9.s3.amazonaws.com/uploads/2009/11/coffee-art/delicious_coffee.ai">Download the Illustrator Source File</div>