Step 1

Using the select tool create a circle for where you want the coffee cup to begin.

Step 2

Gradient it in with a colour of your choice in which you want the colour of the cup to be. Use a darker colour near the center going to a lighter colour.

Step 3

Create a new layer named [inner cup]. Select a smaller area in the mug to the lower right part of the circle you just created and gradient this one in a darker colour. This in 3D aspect is the bottom part of the mug. We're going to set this in so we have an area to work with.

Step 4

Duplicate the smaller circle you just created by pressing Ctrl+J. Now select the bottom layer of the two and transform the object (Ctrl+T). Right click and select Distort. Drag out the shape to make something like so:

Step 5

Press Enter to confirm the change of shape. Change the layer blending mode to multiple.

Step 6

Enhance the lighting by dodging and burning the following areas, go in circular motion like the shape of the cup. Blue arrows mean dodge and red arrows mean burn.

Step 7

Create a layer underneath [inner cup]. Select a circle area just smaller than your overall cup size. Fill it in with white, now offset the selection to the left 3 or 4px and crop out the remainder.

Step 8

Using the eraser soften up the middle part of the white curve line you just created and the tips of the line as well.

Step 9

Create another layer on top and make another circular selection about 30 – 40 px away from the edge of your cup. Fill this in with a very dark brown gradient. Contract the selection 5px and crop out the center of it.

Step 10

Using the eraser soften up the two sides of the rim line you just created.

Step 11

Moving back to the [inner cup]. Using the burn tool burn out the top left of the [inner cup] until it looks like the one below. Don't worry about being bold and making it too dark, once the coffee is one top it'll look good.

Step 12

Create a layer on top of [inner cup]. Make a circular selection slightly bigger than [inner cup] but offset the selection more to the left and up more. Gradient fill this with a dark brown and dark orange. Change the opacity of the coffee layer to 70%.

Step 13

Create a new layer on top of the coffee layer with the same selection size as the coffee, fill in the section with a soft color close to white (but not gray). Deselect your selection (Ctrl+D) and Gaussian blur it for 5px (Filter > Blur > Gaussian Blur).

Step 14

At this point I noticed the cup wasn't very vivid in lighting and shadow so I dodged and burned a bit more of the edges and inner side as the arrows has shown. I also added a white mark in the coffee and blurred it as a reflection.

Step 15

On the edge I made a reflection mark on the cup. Basically drew a shape of the reflection I wanted, filled it in in white. Crop out the unwanted area and changed the opacity to 30%.

Step 16

Now we draw the ear of the cup. Create a layer under everything you just drew. Draw out the shape like the one shown below with the pen tool and select the path. Gradient fill it with the light side to the outer part of the ear and darker towards the cup.

Step 17

Create another layer under the ear as the bottom/end part of it. Finish off the shape as shown below and fill it in with a much darker colour of the cup.

Step 18

Give some waves to the coffee by giving a couple of dodge and burn strokes as follows.

Step 19

Create another layer below everything, this will be your shadow layer. Just draw out any random shape that looks like your cup and fill it in with a dark gray. The shape doesn't need to be that accurate as it will be blurred.

Step 20

Blur (Filter > Blur > Gaussian Blur) at 20px and change the layer blending option to multiply.

Tweak around with the lighting and contrast and you'll get something that looks like this:

3D Hosting Layout

Apple Navigation

Colorful Web Layout

Colorful Web Layout 2

Stylish Mail Icon

5 Advanced Photoshop Techniques for Web Designers

Watercolor Web Design

Retro Poster

Slick Rich UI

Neon Effects

Geometric Shaped Typography

Plastic Text

Glowing Text

Plastic Navigation

Wood Template

Portfolio Design