Create a Ready to Go Coffee Cup in Photoshop from scratch

Hi guys, I am back with another Photoshop tutorial for you. Today, I’ll walk you through the process of creating a gorgeous ready to go coffee cup in Photoshop. We’ll use pen tool, various shape tools and different layer styling techniques to achieve the final result. Hopefully, you will learn few handy tips along the way. So, let’s get started!

Resources:

Algerian Font

Final result:

Coffee Cup

Step 1

Create a new document in Photoshop with 650px width and 700px height.

Coffee Cup

Step 2

Create a new layer by going to “Layer”> “New Layer”. Select the pen tool (Tool mode: Shape) to draw the bottom part of the cup as below.

Coffee Cup

Step 3

Double-click on the bottom part layer to open the layer style window and apply the given settings here.

Coffee Cup

Coffee Cup

Coffee Cup

Coffee Cup

Step 4

Next, we’ll draw the main cup shape using pen tool (Tool mode: Shape) on a new layer. You can use any color for now as we are going to change its color in the next step. Label this layer as “Cup”.

Coffee Cup

Step 5

Make Fill of “Cup” layer to “none”. Now double-click on the cup layer and apply the following layer style settings.

Coffee Cup

Coffee Cup

Coffee Cup

Coffee Cup

Step 6

Next, we’ll make the cap for the cup in three parts. We’ll start with drawing the cap bottom shape using pen tool (Tool mode: Shape). Create every shape on a new layer and don’t forget to label them.

Coffee Cup

Coffee Cup

Coffee Cup

Coffee Cup

Step 7

Now we’ll draw the cap middle part as shown below.

Coffee Cup

Apply the same settings for gradient overlay on this layer as applied in step 6 for the bottom part. However, apply the following settings for “Bevel and Emboss” on this layer.

Coffee Cup

Step 8

Next, draw the cap top part as shown below.

Coffee Cup

Step 9

Now apply the following settings for “Bevel and Emboss” and “Inner glow” on the cap top layer and same settings for “Gradient Overlay” as used in step 6.

Coffee Cup

Coffee Cup

Coffee Cup

Step 10

We’ve made the basic cup shape so far, now we’ll move ahead to give it an attractive label. Set #efefef as your foreground color and draw an ellipse using ellipse tool.

Coffee Cup

Apply the following settings for Inner glow and Drop shadow on this ellipse.

Coffee Cup

Coffee Cup

Coffee Cup

Step 11

Draw a smaller ellipse inside the previous one. Use #dfdfdf color for this.

Coffee Cup

Apply the following layer style settings on this new ellipse layer.

Coffee Cup

Coffee Cup

Coffee Cup

Coffee Cup

Step 12

Next, I’ll show you how to add text in a circle in Photoshop. Set #626800 as your foreground color. Select the ellipse tool (Tool mode: Path) and draw an ellipse as shown below.

Coffee Cup

Now select the Type tool and click on the circular path top center and type in your text here. I am using “Algerian” font here, don’t forget to click on “Center text” in the top properties bar before typing the text.

Coffee Cup

Step 13

To type text in the lower arch, duplicate the text layer created in step 12, edit and replace the text with the new one. I am decreasing the font size a bit from 27pt to 25pt. Now select the “Path selection tool (A)” and rotate this text towards the bottom center of the ellipse and then drag it inside the ellipse. Press “Ctrl+ T” to activate the free transform tool and adjust the size of ellipse to position the text properly as shown below.

Coffee Cup

Step 14

Draw the arch as shown below using pen tool (Tool mode: Shape) in #adadad color.

Coffee Cup

Duplicate this layer and go to “Edit”> “Transform”> “Flip Horizontal” and position this copy on the right side.

Coffee Cup

Apply the given settings for inner shadow on these arched shapes.

Coffee Cup

Coffee Cup

Step 15

Now we’ll make small coffee cup icon inside the label. Set #f2c200 as your foreground color and draw two ellipses, position them as below. Select both ellipses and go to “Layer”> “Combine shapes”> “Subtract front shape” to get the cup shape as shown below.

Coffee Cup

Coffee Cup

Step 16

Draw another ellipse using #be9a09 color and apply the same settings for inner glow as used in step 15. Draw the handle for the cup like below using #604c00 color.

Coffee Cup

Step 17

To make coffee inside the cup, draw an ellipse below the cup front layer. Use #904a05 color for this ellipse and apply the given settings for satin to get the effect as below.

Coffee Cup

Step 18

Create this small cup shadow by making a black ellipse. After that, go to “Filter”> “Blur”> “Motion Blur”. Use 0⁰ angle and 20px distance to get the effect like below.

Coffee Cup

Reduce the opacity of shadow layer to 50%. Make the larger cup shadow the same way.

Coffee Cup

Step 19

Now we’ll make swirls over the small cup in #764d25 color. Select hard round brush tool 2px size. After that, select the pen tool (Tool mode: Path) to draw the swirl like mine, now right click the document, choose “Stroke path” and then choose “Brush”. Hit delete to get rid of the path. Make an ellipse at the swirl end.

Coffee Cup

Step 20

Next, we’ll make shadows below the bigger cup cap and just above its bottom part. To do so, draw a black rectangle and go “Edit”> “Transform”> “Warp”. Select arch with -12 bend in the top properties bar.

Coffee Cup

Now place this arch below the cup cap layer and reduce its opacity to 50%. Duplicate this layer, reduce its size a bit and place this copy below the main cup layer.

Coffee Cup

Step 21

Create a new layer below the label layers and above the rest of the cup layers. Now select the soft round brush tool and apply it in the center of the cup in white color as shown below. Reduce the opacity of this layer to 50% and change its blending mode to “Overlay” to give highlighting effect.

Coffee Cup

Step 22

Collect the entire cup layers in a group, duplicate this group, hide the bottom shadow layer. After that, merge it and flip it vertically by going to “Edit”> “Transform”> “Flip vertical” and position it just below the original cup to make its reflection. Place it below the bottom shadow layer and reduce its opacity to 40%.

Coffee Cup

 

Coffee Cup

That’s it guys. Hope you enjoyed the tutorial and learned something useful. I’ll be waiting for your feedback. Have fun!

 

Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes