Illustrate a Delicious Birthday Cupcake in Photoshop

Photoshop is a dynamic tool. It contains all of the necessary gadgets that designers need to create outstanding artworks. Most of us are aware of how useful Photoshop is for creating photo effects and photo manipulating tasks, but few realize that it’s equally good for creating vectors. Photoshop not only helps us create great vector illustrations, it also has powerful features that enhance vector quality.

So, let’s explore its vector creating capabilities today. I’ll walk you through the process of creating a delicious birthday cupcake in Photoshop. We’ll use many techniques that can help you to create any vector you’d like in Photoshop. We’ll use the pen tool, different shape tools, various blending options, and filters for the creation of the cupcake. So, let’s get started!

Final Result:

vector tutorial

Step 1

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

vector tutorial

Step 2

First of all, we’ll create the cup. Set #64c7ea as your foreground color, and select the polygon tool with the following settings in the properties bar located at the top to draw the shape as below.

vector tutorial

Step 3

Select the pen tool (tool mode: shape) and draw the cup shape shown below in the same color.

vector tutorial

Now, select both the layers (the polygon shape and the pen tool shape layers) and go to “Layer” > “Combine shapes” > “Subtract Front Shape” to get a nice cup shape. Label this layer as “Cup.”

vector tutorial

Step 4

Double-click on the cup layer to open the “Layer Style” window, and apply the following settings to give it some character.

vector tutorial

vector tutorial

vector tutorial

vector tutorial

Step 5

Now, to finish cup’s top edges, draw the shape shown below at one corner, duplicate it, and flip horizontally by going to “Edit” > “Transform” > “Flip Horizontal,” and position it at the opposite corner.

vector tutorial

Draw the following thin cone shape using the pen tool in pure white.

vector tutorial

After that, right-click on the cone shape layer and select the option of “Rasterize Layer.” Then, go to “Filter” > “Blur” > “Gaussian Blur.” Use a 1px Gaussian blur here.

vector tutorial

Step 6

We have formed the central cone shape. Now, keep on duplicating the cone shape to cover the entire cup. You’ll need to narrow the cones that are near the edges and also tilt them a bit around 1-2 degrees. To save time, cover one half of the cup with cones and collect these layers in a group. Then, simply duplicate that layer and flip it horizontally to cover the other half of the cup.

vector tutorial

Collect all of the stripes layers into a single group. Change the blending mode of this group to “Subtract” and reduce its opacity to 15%.

vector tutorial

Step 7

Create a new layer just above the background layer, and select an elliptical area below the cup to form its shadow using the elliptical marquee tool.

vector tutorial

Fill this selection with pure black using the paint bucket tool, and go to “Filter” >“Blur” > “Motion Blur.” Use the following settings for the motion blur. After that, reduce the size of shadow horizontally using the free transform tool (Ctrl+ “T”).

vector tutorial

Step 8

Now, to form the cake, select the ellipse tool to draw an ellipse in color #e3aa6b on a layer below the cup layer.

vector tutorial

Apply a gradient overlay using the following settings.

vector tutorial

vector tutorial

Step 9

Next, right-click on the cake layer and select “Convert to smart object.” Now we can apply smart filters to it, which means we can edit and update these filters at any time.  Now, go to “Filter” > “Noise” > “Add Noise,” and apply the following settings for noise. After that, go to “Filter” > “Filter Gallery” > “Pallete knife,” and use the following values to achieve the effect shown below.

vector tutorial

Step 10

We’ll move ahead to make the icing on the top. We’ll do it in three layers. For the bottom part, you’ll need to create few shapes using the pen tool (tool mode: shape) as shown below. I’ve drawn these shapes using different colors, so you can differentiate these shapes easily. You can use any color for now, as we’ll apply gradient on all of these shapes.

vector tutorial

Step 11

Now, double-click on one of the shapes layers and apply the following layer style settings.

vector tutorial

vector tutorial

vector tutorial

vector tutorial

Once you are done, right-click on this layer and select the option of “Copy Layer Style.” Then, right-click on the rest of the icing layers one by one, and select the option of “Paste Layer Style” to apply the same effects on them. After that, collect these bottom icing layers into a single group.

Step 12

Next, we’ll form middle icing segment in the same way that we did for the bottom part in steps 10 and 11. Make sure to create these layers below the bottom icing layer.

vector tutorial

Finally, make the top icing segment using the same technique.

vector tutorial

Step 13

Now we’ll add sprinkles on the cupcake. Select the brush tool and click on brush panel from the top options bar. Apply the following settings in the brush panel. Create a new layer at top of rest of the layers and apply this brush over all three layers of icing. You can use whatever colors you like for this.

vector tutorial

vector tutorial

vector tutorial

Step 14

Use the following values to apply a drop shadow on the sprinkles layer.

vector tutorial

vector tutorial

Step 15

Collect all the cupcake layers in a group, then duplicate and merge this group. Press Ctrl + <click on the merged layer> to make a selection around it. Now, go to “Edit” > “Fill.” Fill the merged layer with 50% gray. After that, change the blending mode of this layer to “Overlay.” Now, select the burn tool with a size of around 10px – 15px and a soft round brush “Range: Shadows, Exposure: 50%” and dodge tool in “Range: Highlights, Exposure: 50%.”

vector tutorial

Step 16

Create a new layer above the cake layer and below the icing layers. Select the soft round brush tool and apply it on this new layer to form the shadow of the icing on the cake in pure black. Reduce its opacity to 30%.

vector tutorial

Step 17

Our cupcake is all done. Next, I’ll show you how to create a cute candle for this. Form alternate red (#f50101) and yellow (#ffc601) rectangles over each other using the rectangle tool and apply the following inner glow settings on them.

vector tutorial

vector tutorial

Step 18

Create an ellipse in color #c20000 over the top rectangle, and build a second, smaller ellipse inside it in with a darker shade. After that, draw a thin rectangle to form candle thread and apply a black and white gradient on it.

vector tutorial

Step 19

To form flame draw the following shape using the pen tool.

vector tutorial

Set its fill color to 0% and apply the following layer style settings to it.

vector tutorial

vector tutorial

vector tutorial

Collect all the layers forming the candle into a single group and place this group below the cupcake layers. Position it as shown below.

vector tutorial

Step 20

To make the background, make fill of background layer to 0% and apply the following gradient overlay settings.

vector tutorial

vector tutorial

Create a layer just above the background layer, fill it with color #54fee2 and reduce its opacity to 35%.

vector tutorial

Step 21

Next, we’ll make the surface on which cupcake is placed. Select a rectangular area within the lower third of the canvas using the rectangular marquee tool, and fill it with any color. After that, set the fill color to 0%, reduce the opacity to 30%, and apply the following gradient overlay settings on this layer.

vector tutorial

Step 22

I’ve added few strokes to form borders, a ribbon around the cupcake, and some text. It’s up to you how you want enhance it further.

vector tutorial

Step 23

Lastly, create a “Brightness/Contrast” adjustment layer at the top of the rest of the layers. Use the following values for it.

vector tutorial

That’s it guys, we are all done. Hope you enjoyed the creation of this cupcake and learned something useful. Enjoy your tasty treat!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pia

    Yumy… loved the final outcome :)

  • sikander

    awesome techniques u share thanks :)

  • Samantha

    Oohh..looks so tasty!! Love the blue with sprinkles, so appealing…:-)