Tutorials Vector Graphics Adobe Illustrator Design a Coffee Mug Icon

Design a Coffee Mug Icon

Step 1

Start by pulling up Illustrator and creating a new document. Grab the pen tool and draw out the shape of the mug, something like what you see below. You will have the best results if you use just 4 anchor points. Don't worry about the colors yet; you can just use a black stroke if that helps you see what the shape looks like.

image 1

Step 2

Begin adding the colors you are going to use to your swatches palette. If it's not open click Window->Swatches. The first thing I did to help me organize my swatches was add a 'new color group' I called mine coffee. For the reds of the mug, I used 3 variations (#E3D8BA, #B52025, #4A141A). For the blues of the saucer and inside of the cup I used these 3 (#D0C7DA, #5067B0, #100E19). For the coffee itself I used (#87604C, #553827, #0D090C). The colors of course are merely suggestions, you can use whichever colors suit your needs.

image 2

Step 3

Click on the coffee mug shape you created. Set it's stroke to none and change the fill to a radial gradient going from the dark red to the medium red. You set that using the gradient palette. Then select the gradient tool to skew the highlight slightly to the top left, by clicking in the top left area and dragging toward the bottom right.

image 3

Step 4

Grab the ellipse tool and draw an oval at the top of your mug shape, something like below.

image 4

Step 5

Add a linear gradient to the ellipse that goes from the lightest blue to the mid blue and back to the light blue. Use the image below as a reference. Note: you can drag you color swatches into the gradient palette to use them as the color stops.

image 5

Step 6

With the ellipse you just created selected hit 'ctrl, c' to copy it and then hit 'ctrl, f' to paste it in the same spot in the front. Hold down shift and alt, click and drag one of the corners inward until your copied ellipse is slightly smaller than the original. Change the fill to a linear gradient that goes from dark blue, to mid-blue, to light blue, back to the mid-blue.

image 6

Step 7

Now we'll make the coffee in the cup. Hold down alt and click and drag the top ellipse. This will copy and paste the ellipse; you can drag it into place. Once you have it positioned, change the color to the lightest brown.

image 7

Step 8

Select the new coffee ellipse, hold down shift and also click to select the inner ellipse of the cup. Open up the pathfinder palette (if it's not visible click window->pathfinder). Click the divide icon to separate the coffee fill where it meets up with the lip of the cup.

image 8

Step 9

Right click on the coffee fill ellipse and choose ungroup. Click somewhere else on the canvas to deselect the shapes. Click back on the lower shape and then click delete, leaving just the coffee fill shape above the bottom of the lip.

image 9

Step 10

Now we are going to make the shadow on the coffee. Select the coffee fill you just created, copy and paste it to the front (using ctrl, c and ctrl, f). Fill the new ellipse with a linear gradient that goes from the darkest brown to the mid-brown.

image 10

Step 11

Grab the pen tool and make a curved line where you want to separate the shadow. Use the image below as a reference.

image 11

Step 12

Select both the line and dark coffee ellipse, click to divide the two using the pathfinder palette option just like before. Ungroup the objects and delete the bottom shape.

image 12

Step 13

In this step we are going to create the highlight on the mug. Grab the pen tool yet again and draw something like the shape below, fill it with the lightest brown.

image 13

Step 14

Add a blur effect to smooth out the highlight. Click Effect->Blur->Gaussian Blur. Change the amount to 16px.

image 14

image 15

Step 15

These next few steps will deal with creating the handle of the mug. They are the trickiest of this tut. First off, grab the pen tool and draw an ear shape like below, fill it with the medium red and send it to the back (Object->Arrange->Send to Back).

image 16

Step 16

Use the pen tool to draw the inside part of the handle. Then use the divide tool in the pathfinder palette just like in previous steps. Delete the inside part of the handle. You should now have a shape like below.

image 17

Step 17

With the pen tool draw a shape like the one below for the shadow on the handle.

image 18

Step 18

Give your shadow shape a light gaussian blur (I used 12px). Open up the transparency palette change the mode to multiply and the opacity to 90%.

image 19

Step 19

Repeat these steps to add a second shadow on the right side of the handle. This time I used darken for the blend mode in the transparency panel.

image 20

Step 20

Next up is the highlight on the handle. With the pen tool draw a white shape like the one below.

image 21

Step 21

Add a light gaussian blur (I used 8px). Change the transparency blend mode to lighten at 75% opacity.

image 22

Step 22

Now we are going to make a drop shadow underneath the mug. With the ellipse tool draw out an oval slightly wider than the width of the mug. Fill it with a gray to black radial gradient. Change the blend mode in the transparency panel to multiply. Send the shadow to the back and place it to the bottom right of mug. Your shadow should look like the one below.

image 23

image 24

Step 23

Using the same steps as before add another shadow. This one for the handle. This time use a gray to white linear gradient, and place it behind the mug but above the other shadow so that they overlap and help with the illusion of depth.

image 25

Step 24

Draw an ellipse for the saucer underneath the mug. Fill it with a radial gradient from light blue to medium-blue. Change the stroke to the lightest blue and set it to 5px. Send the saucer to the back.

image 26

Step 25

Add another drop shadow using similar techniques, drop it behind the saucer.

image 27

Step 26

Now we will create the line on the saucer. Add an ellipse with no fill and a light blue 3 px stroke. Place it behind the mug and the mug shadows, but above the saucer. Change the blend to overlay in the transparency palette.

image 28

Step 27

Now we are going to make the steam coming off the coffee. With the pen tool draw an 's' shape above the coffee. Make sure the fill is set to none and the stroke is 1px. Change the stroke color to a medium brown. In the transparency panel change it to multiply at 58% opacity. Within the brush palette click on the small arrow to bring up the brush options. Hover over Open Brush Library->Artistic->Artistic_Watercolor. Choose the third one from the top, or play around with some of the other brush options.

image 29

image 30

Here's My Final Result:

Design a Coffee Mug Icon

subscribe to newsletter