"}
How to Create a Grunge Polaroid Photo in Adobe Fireworks
How To Get More Out Of Layer Styles
Tutorial: How To Design a Realistic Takeout Coffee Icon

Tutorial: How To Design a Realistic Takeout Coffee Icon

In this tutorial we're going to show you how to design an icon from our popular freebie, the Incredibly Detailed Drinks Icon Pack. We'll walk you through the process of creating the takeout coffee cup from start to finish, exploring a wide variety of techniques in Photoshop that can be applied to almost any type of design and drawing.

This tutorial assumes a basic understanding of the Adobe Photoshop software package, and was created using version CS5, however I think CS3+ can perform most if not all of the same tasks.

Preview the Final Icon

Here’s a sneak preview of the final product of this tutorial, this is how the icon should turn out:

how to design a realistic takeout coffee cup

Let’s begin with the tutorial:

Setting up the Document

Start by creating the document, this is going to be a pretty high res icon so set the width and height to 512px, even if you use the final image slightly smaller it’s best to start off bigger for a crisper result, unless you plan to reduce the size by over 50% this is usually a good rule to stick to. Also set the background to transparent but feel free to use a mid grey solid colour temporarily through the project if you feel the checkerboard effect is interfering with the design.

how to design a realistic takeout coffee cup

Set the foreground colour to #6e3b14 and draw a rectangle (U) shape layer in the centre but towards the bottom of the document at about 295x395px. this will be the building block of our cup.


how to design a realistic takeout coffee cup
how to design a realistic takeout coffee cup

Drawing the Cup

Now let’s draw some guides to help us keep the cup in proportion. Start by simply dragging new guides in to touch the edges of the shape you just drew, from here create 2 new guides around 20px above and below the top line, and repeat for the bottom line. Finally draw a new guide about 45px in from each of the vertical guides. your result should be something like this.

how to design a realistic takeout coffee cup

Using the direct selection tool (A) grab the bottom corners of your rectangle shape layer and nudge (arrow keys) them to meet the inside guides you drew, this will make your rectangle appear to expand towards the top.

how to design a realistic takeout coffee cup

We will now be using Photoshop’s boolean tools, so make sure you have the shape layer still selected (thin grey lines will be visible) and using the toolbar at the top of the window select Shape Layer, Oval, Subtract from shape layer.

how to design a realistic takeout coffee cup

Now draw an oval using these options within the top guides, the result will be an area subtracted from the original rectangle rather than a new shape layer.

how to design a realistic takeout coffee cup

Repeat the last step at the bottom of the rectangle with one difference, select the Add to shape layer as opposed to subtract or create new.

how to design a realistic takeout coffee cup
how to design a realistic takeout coffee cup

At this point we should have the basic shape that will form the coffee cup.

Note: if at point during this you feel like getting a coffee, for motivation feel free wink.

Adding Texture to the Cup

Back to the design, at the moment it’s the right shape but looks nothing like a dimensional cup, this can be solved with a simple gradient a bit of shading. First the gradient, double click the rectangle’s layer in the layer palette (Window > Layers) or right click and select Blending Options….

Select Gradient Overlay and create a gradient like the one demonstrated below.

how to design a realistic takeout coffee cup

The top row of stops in order are:

Opacity: 100 Location: 0, Opacity: 0 Location: 50, Opacity: 100 Location: 100

The bottom row of stops are:

Color: #190e03, Location: 0, Color: #ffffff, Location: 50, Color: #190e03, Location: 100

Having a white stop in the centre of the two dark brown stops creates a simultaneous shadow and highlight using just one gradient.

Create a new layer (CMD/CTRL+SHIFT+N) and select the brush tool (B), with a foreground color of #000000 draw a basic 300px soft circle (default brushes) at the bottom of your shape, approximately half on it and half off. Then right click the new layer you just created select Create Clipping Mask.

how to design a realistic takeout coffee cup

Create another new layer, also with a clipping mask and using the brush tool, set the foreground colour to #ffffff and draw a highlight down the centre of the shape as demonstrated. This will look quite ghastly at first but if you set the layers blending options to Soft Light and Opacity to 30% it will tone down the effect a look more realistic.

how to design a realistic takeout coffee cup

Once again, create another new layer that is clipped to the original shape, this time fill the whole layer white (#ffffff) with the Paint Bucket (G) tool, and from the menu bar Filter > Convert for Smart Filters, this will convert the current layer to a smart object and allow non-destructive application of filters (ie. you can modify and remove them later if you change your mind!).

how to design a realistic takeout coffee cup

next Filter > Render > Fibres… and set the variance to 64 and strength to 3.

Optional: you can also apply a subtle noise filter on top of the fibres to your preference

how to design a realistic takeout coffee cup

On the fibres layer set the blending options to Soft Light and opacity to 6%

how to design a realistic takeout coffee cup

Our cup is now ready! next step is the lid.

The Lid of the Cup

Using the guides we created early on draw another ellipse shape layer directly above your cup, fill it will any light grey colour as we will be applying a gradient above it, using the same boolean techniques we covered earlier add a rectangle to the shape layer at about 45px height starting from half way down ellipse as demonstrated below.

how to design a realistic takeout coffee cup

Apply an Inner Shadow to the new shape layer you just drew with the following settings:

  • Blend Mode: Normal
  • Color: #000000
  • Opacity: 19%
  • Angle: -90
  • Distance: 2
  • Choke: 0
  • Size: 3

how to design a realistic takeout coffee cup

And a Gradient Overlay with the bottom row of stops going from #c2bebb to #ffffff and back to #c2bebb with the middle #ffffff stop at 65%, blend mode: Normal and opacity: 100%.

how to design a realistic takeout coffee cup

how to design a realistic takeout coffee cup

Draw another ellipse above the new shape (again, the guides will assist you in this if you start from where the very top and very left lines intersect)

how to design a realistic takeout coffee cup

Use the Inner Shadow layer style to create a nice subtle highlight below the new shape layer you just drew with the following settings:

  • Blend Mode: Normal
  • Color: #ffffff
  • Opacity: 50%
  • Angle: -90
  • Distance: 1
  • Choke: 0
  • Size: 3

how to design a realistic takeout coffee cup

Duplicate the last layer you created, a quick easy way to do this is to hold ALT and hit one of the arrow keys, a duplicate will be created and offset one pixel in the direction you pressed.

For the next step you will need to use a bit of your natural depth perception and use the transform tool (CMD/CTRL+T) to first decrease the size of the shape proportionally (hold SHIFT key and drag anchors) and then squash the shape vertically until it looks like it is actually sitting on top of the lid of the cup.

Use the image below as a reference for what you’re trying to achieve, applying the gradient overlay first may help with your perception if you’re a very visual person so the settings for that are pretty simple:

Stop 1: #827a74, Stop 2: #fbfbfb, angle 90

how to design a realistic takeout coffee cup

Duplicate this layer and nudge it down 10px (SHIFT+Down Arrow Key).

Now we want to clip the duplicated layer to the original layer, but rather than duplicating the layer for a second time to create a clipping mask we will use boolean operations to trim this new layer down to size.

Select the path of the duplicated shape layer and with the ellipse tool (U) make sure Shape layers and Intersect shape area are selected and draw a new ellipse slightly smaller and inside the original shape, overlapping at the bottom as illustrated below.

how to design a realistic takeout coffee cup

On the new layer set the colour of the shape to #b8b4b1 and apply a gradient overlay at a 90 angle going from #000000 to #000000 but with the first stop on the top row at 60% opacity and the second stop at 0%.

how to design a realistic takeout coffee cup

The next step requires a bit of Pen free-styling, remember to utilise real photos of your subject matter for guidance when drawing shapes like this, nobody can remember exactly what every shape in the world looks like so don’t feel like it’s cheating!

Choose the Pen tool ( P ) and draw a shape similar to one below, fill it with #e8e6e4.

how to design a realistic takeout coffee cup

Give the new shape an inner shadow with the following settings:

  • Blend Mode: Normal
  • Color: #000000
  • Opacity: 21%
  • Angle: -31
  • Distance: 2
  • Choke: 0
  • Size: 7

how to design a realistic takeout coffee cup

And an Outer Glow:

  • Blend Mode: Screen
  • Color: #ffffff
  • Opacity: 60%
  • Spread: 0
  • Size: 2

how to design a realistic takeout coffee cup

Again with the Pen free-styling draw a shape similar to that show below.

how to design a realistic takeout coffee cup

Using the Direct Selection (A) tool select all of the shape and copy and paste a duplicate into the same shape layer, with the duplicated path selected Edit > Transform > Flip Horizontal and nudge it to the right until it is symmetrical with the original

how to design a realistic takeout coffee cup

Apply a Gradient Overlay to the layer from #190e03, 0 to #ffffff, 50 and back to #190e03, 100 and create a new stop on the top layer in the centre at 0% opacity. Set the gradients overall angle to 0.

how to design a realistic takeout coffee cup

how to design a realistic takeout coffee cup

Manual Shading on the Lid

The lid is almost done now, we just need to draw a few manual highlights and shadows for that extra realistic feel. Start with two shape layers drawn with the Pen tool (as seen below) in the centre of the outer ring of the lid we just drew, fill both of the new shapes with #ffffff and opacity 100%.

how to design a realistic takeout coffee cup

Draw two more shapes using the same technique on the left hand side of the lid, fill them with #ffffff.

how to design a realistic takeout coffee cup

how to design a realistic takeout coffee cup

Convert each shape for Smart Filters Filer > Convert for Smart Filters and on the top shape apply a Filter > Gaussian Blur at 1.3 strength and on the bottom shape a Gaussian Blur at 5 strength.

how to design a realistic takeout coffee cup

Next use the Pen tool again and draw a shadow between the two highlights, fill it with #000000.

Set the opacity of the three new shapes as follows:

  • Top Highlight: 35%
  • Shadow: 9%
  • Bottom Highlight: 100%

how to design a realistic takeout coffee cup

Group all three layers (CMD/CTRL+G) and duplicate the group, then flip it Edit > Transform > Flip Horizontal and nudge it across to the righthand side of the lid.

how to design a realistic takeout coffee cup

You can delete the duplicated lower highlight (with the strong blur and 100% opacity) as it doesn’t look quite right on both sides.

how to design a realistic takeout coffee cup

Creating the Shadows

Now we need some shadows, they will be cast by the cup body and the lid, we’ll work down from the lid first, below the lid draw a new Ellipse shape layer filled with #000000, duplicate the layer and apply a Gaussian Blur (no need for smart filters) at 5% and nudge it down about 5px.

how to design a realistic takeout coffee cup

Use the Polygonal Lasso Tool (L) to trim the edges of the blurred shadow, draw a shape using the body of the cup as a guide and then right click the selection and Select Inverse to invert the selection to everything outside of the shape, hit DEL to erase.

how to design a realistic takeout coffee cup

Group both of the new shadow layers and set the opacity of the group to 70%

how to design a realistic takeout coffee cup

Once again, use the Ellipse Tool to draw a shape layer at the bottom of the document on a layer below all the others, use the guides CMD/CTRL+; to help you get it in the right place.

how to design a realistic takeout coffee cup

Apply a Gaussian Blur of 5% strength, and nudge it down a few pixels until it looks like a realistic shadow below the cup.

how to design a realistic takeout coffee cup

Final Steps

Next for some final touches, if you want to get your own design on the cup go back to the shape we drew right at the start and place your artwork into the clipping mask that we created near the beginning of the tutorial.

I have used this excellent pack of vector swirls by Mason Hipp.

how to design a realistic takeout coffee cup

Final and optional step, above all existing layers create a new adjustment layer Layer > New Adjustment Layer > Levels and tweak the image to get the lighting just right.

how to design a realistic takeout coffee cup

And here we have it, the final product!

how to design a realistic takeout coffee cup

I really hope you’ve enjoyed following this tutorial and that you learned some new techniques during the process, please let us know how you liked it and if you have any issues! Thank you so much for reading!

 

Comments

  • Reply »
    Martin LeBlanc Eigtved

    Martin LeBlanc Eigtved

    Great work! I love the final result.

    Apr 12, 2011 at 6:21 pm
  • Reply »
    Tony Thomas

    Tony Thomas

    Thanks Martin, really pleased to see a comment from yourself! smile

    Apr 12, 2011 at 8:57 pm
  • Reply »
    Diane

    Diane

    Nicely laid out tutorial and easy to follow.  Nice!

    Apr 13, 2011 at 4:31 am
  • Reply »
    John from Melbourne

    John from Melbourne

    Hi Tony,

    very nice post, i must say any one can be able to learn design in photo shop after reading this post, superb.


    Thanks for sharing
    John

    Apr 13, 2011 at 10:31 am
  • Reply »
    eugeneK

    eugeneK

    Thanks for quality tutorial, just i think there is much too white when you make manual shading of the bottom light effect.

    thanks again

    Apr 14, 2011 at 2:32 pm
  • Reply »
    Oliver

    Oliver

    Really really nice!

    Apr 14, 2011 at 4:50 pm
  • Reply »
    Ashish

    Ashish

    Wow, such a nice tut.
    Looks gr8 at the end.
    Thanks!

    Apr 15, 2011 at 7:28 am
  • Reply »
    rajasegar

    rajasegar

    Great tutorial and techniques well explained.
    Thanks for sharing…
    Bookmarked !!

    Apr 18, 2011 at 6:41 am
  • Reply »
    savvinovan

    savvinovan

    Awesome outcome. I don’t like shadow in a bottom of a cup. It’s not realistic.
    Keep up good work.

    Apr 18, 2011 at 8:18 am
  • Reply »
    Rahul

    Rahul

    Nicely explained. though i am a beginner at photoshop i could easily understand each step.

    Apr 19, 2011 at 7:52 am
  • Reply »
    Striker

    Striker

    Nice result, very useful tut.

    Apr 27, 2011 at 9:52 am
  • Reply »
    Badri Suresh

    Badri Suresh

    awesome

    May 4, 2011 at 7:31 am
  • Reply »
    Think360 Studio - Web Design Company India

    Think360 Studio - Web Design Company India

    you do a great job Tony, keep up the good work.. cheers

    May 9, 2011 at 7:48 am
  • Reply »
    cseymore54@gmail.com

    [email protected]

    Oh this is so great looking! Really happy to be a part of the medialoot community as well! Can’t wait to see what comes out in the coming year =)

    May 19, 2011 at 11:50 am
  • Reply »
    Roberto Amelunge

    Roberto Amelunge

    Gracias MAESTRO. No soy muy principiante pero debo admitir que tu brillante explicación, la puede entender hasta un niño. Debo reconocer que tuve mucha suerte al encontrar esta página.
    Nuevamente GRACIAS, a nombre de todos los necesitados.

    Jun 23, 2011 at 8:58 pm
  • Reply »
    webindia

    webindia

    Brilliant and very nice job.

    Jul 7, 2011 at 7:25 am
  • Reply »
    Hector Matias

    Hector Matias

    Hola…!!! ESELENTE

    Jul 28, 2011 at 9:32 pm
  • Reply »
    hanan bakri

    hanan bakri

    thank alot…...  very nice information

    Sep 21, 2011 at 5:07 pm
  • Reply »
    Raj Mehta

    Raj Mehta

    Final results are awesome.

    Oct 13, 2011 at 1:11 pm
  • Reply »
    Tuttie

    Tuttie

    Hot cup of nice tut

    Nov 11, 2011 at 2:45 am
  • Reply »
    Alex

    Alex

    good post

    Nov 30, 2011 at 4:51 pm
  • Reply »
    Fero Volar

    Fero Volar

    Very nice tutorial!

    Dec 5, 2011 at 4:48 pm
  • Reply »
    Himanshu Kumar Tanty

    Himanshu Kumar Tanty

    I realy want to try it..thnx for the tutorial

    Feb 9, 2012 at 2:04 am
  • Reply »
    Terry

    Terry

    I tried to do this on windows with no success…does this only work properly with Macs?

    I am trying to make three of them - anyone willing to help me or to suggest what I should do.

    Any help would be appreciated guys.

    Jul 30, 2012 at 8:12 am
  • Reply »
    John Locke

    John Locke

    Excellent stuff from you, man. I’ve read your things before and you are just too awesome. You make it entertaining and you still manage to keep it smart ! I adore what you have got right here.

    Oct 25, 2012 at 4:07 am
  • Reply »
    Notacie Lucke

    Notacie Lucke

    Youre so cool! I dont suppose Ive read similar to this before. So nice to get somebody with some authentic ideas on this subject. Realy appreciation for starting this up. This web site is something that’s needed over the internet, somebody after a little bit originality. helpful purpose of bringing something totally new towards the web!

    Oct 25, 2012 at 4:14 am
  • Reply »
    50r

    50r

    Wow can you design for me a mockup for my website. we don’t want to use this default theme i know how to code i will code it my self.

    Oct 30, 2012 at 11:55 am
  • Reply »
    Sally

    Sally

    Amazing, the tutorial is really good.

    Oct 31, 2012 at 5:34 pm
  • Reply »
    kapil

    kapil

    very cool tut.
    keep it up.

    Nov 1, 2012 at 2:23 am
  • Reply »
    tui xach thoi trang

    tui xach thoi trang

    Fantastic post however , I was wanting to know if tui xach thoi trang you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit further. Cheers!

    Nov 10, 2012 at 9:12 pm
  • Reply »
    mohan karthi

    mohan karthi

    very nice it s very nice

    Jan 7, 2013 at 6:38 am
  • Reply »
    thoi trang xuat khau

    thoi trang xuat khau

    thank you for sharing. nice and very interesting

    Jan 22, 2013 at 12:25 pm
  • Reply »
    Kinh Nghiem Du Lich

    Kinh Nghiem Du Lich

    Very nice tutorial!
    Great!!! thanks for sharing this information to us!

    Jan 23, 2013 at 10:00 pm
  • Reply »
    thuoc la dien tu

    thuoc la dien tu

    Beautiful, you can apply this This bowl also right.Thank a lot

    Jan 30, 2013 at 4:03 am
  • Reply »
    chong tham

    chong tham

    Class, look like the real thing.

    Jan 30, 2013 at 4:06 am
  • Reply »
    ao bong da

    ao bong da

    very good design.
    Thanks post

    Feb 20, 2013 at 11:30 pm
  • Reply »
    thuoc la dien tu

    thuoc la dien tu

    very good design. tip good

    Feb 24, 2013 at 10:19 pm
  • Reply »
    ululf01

    ululf01

    A very interesting tutorial.
    Many thanks.

    Feb 26, 2013 at 2:10 am
  • Reply »
    ao dong phuc

    ao dong phuc

    thanks
    its good design .

    May 5, 2013 at 2:33 am
  • Reply »
    Steven Fernandez

    Steven Fernandez

    This looks so realistic! Thanks for this tutorial!

    Jul 2, 2013 at 11:43 am
  • Reply »
    thelogodesigner

    thelogodesigner

    Really Great tutorial. Icon is looking realistic. Worth doing it.

    Feb 19, 2014 at 9:43 am
  • Reply »
    Sandy

    Sandy

    Excellent Tutorial.

    Feb 25, 2014 at 6:45 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

You can't just submit stuff to our site, but we'd love for you to consider being one of our design contractors, see http://medialoot.com/main/open-positions/ for more information.

See all