Easy Coffee Cup Icons in Illustrator


Join us right now!

Our Members get unlimited access to download everything




Easy Coffee Cup Icons in Illustrator

Need a few coffee cup shapes and icons for your website, postcard prints or posters? While it is possible for you to get a good couple of images from the Internet, using those publically available graphics can tend to cheapen the look and feel of your specialized poster or catalog prints. It is infinitely better for you to always create your own icons and graphics to maintain that original and distinct look of your designs.

So, for those who need their own graphics, more specifically their own unique coffee cup icons, we have this guide. We will teach you the step by step process here in creating easy coffee cup icons using Adobe Illustrator. With a little creativity and determination, you can easily do this, even though you might be new to this software.

1.     The first step of course is drawing the basic coffee cup shape. With a new document open in Adobe Illustrator, do this by using the pen tool and just drawing the basic shape. You should have four pen tool points, two at the sides with one at the top and one at the bottom.

2.     Next, add a gradient color to your mug. To make things more natural, use the gradient tool and then apply a radial gradient onto your coffee cup shape. The lighter part of your gradient should approximately be near the front of our shape, but not necessarily the center. Have it a bit off to the right or left to simulate lighting.

3.     Draw an ellipse on top of our coffee cup shape to represent its opening. Again, add a gradient color appropriately. This time, it is okay to use a linear gradient. Just choose the appropriate color that you need for your color scheme. For this example, we are using a light grey, white and dark grey theme.

4.     Now, duplicate this ellipse and then place it back into the spot of the opening. Reduce this size so that you get to see a top edge of our cup. Use a slightly darker version of the gradient that we used from the original version. It would be good to use a four stripe gradient if possible to simulate the cylindrical nature of the opening. Try using a dark grey, grey, white and grey stripe (or substitute your colors with the same brightness or hue values).

5.     We will now add some coffee to our cup. Simply create another ellipse with a coffee color fill. Place it in such a way as to simulate an almost filled cup, but with the inner edges of the cup still visible. Just look at it below.

6.     Afterward, select our coffee ellipse with the smaller top ellipse we created earlier. Go to the pathfinder panel and then select the “divide” option.

7.     This will then divide your coffee shape. Delete the excess coffee shape that goes outside the bounds of your cup.

8.     Finally, add a gradient color to your coffee to make it look a bit natural.

9.     Now we will create the handle. Simple use the pen tool to shape the look of our handle.

10.  Draw in the inside part of the handle as well. Afterwards, select both outer and inner handles, click on divide in the pathfinder tool again. Delete the inner area to get the hole for our handle.

11.  Now color your handle appropriately.

12.  Great! Now we have a basic coffee cup or coffee mug shape.

More Resources in Tutorials

How does Ultimate Designer Toolkit work?
Next »