How to Bake a Cake in Illustrator

09_09_15_cake_01_790x200

We’ve shown you how to make pie with Adobe’s vector drawing application, but how about those times when you need to give someone a cake?

Let’s start with a new document (obviously) – choose web if that’s what you’re planning to use the final image to your site as this will ensure all measurements are in pixels and colours are set in RGB. The canvas size doesn’t matter too much either, but 800×600 makes sense in this scenario.

Illustrator - New Document

To start the basic shape, use the Ellipse Tool (L) to draw a stretched circle with vaguely the same dimensions as those in the image. Make a couple of copies of this, and drag them off the canvas for now. Make another copy by Alt dragging the circle directly below by about 150 pixels. Also hold down Shift while dragging to keep the duplicate copy of the shape aligned to the original.


Illustrator - Circles 01

Using the Direct Selection Tool (A) select the top point of each ellipse and delete it by hitting backspace.

Illustrator - Circles 02

Using the Direct Selection Tool (A) again, select the point on the right of the top ellipse, and holding down Shift also select the same point on the lower ellipse. Now join these two points by going to Object > Path > Join (Command J). Now do the same for the points on the left of each ellipse. This will create a single shape from our two deformed ellipses.

To get this fairly random looking shape looking vaguely cylindrical we need to fill it with a gradient. Go the Gradient Palette (Command F9) and make 3 colour points. Make the points at the two ends of the gradient spectrum the same light brown colour. Make the third point slightly darker brown positioned at about 85%.

09_09_15_cake_02_790x200

Now for something that many people don’t use enough in Illustrator – Photoshop Effects. Make a duplicate of the main cylindrical shape we just made and go to Effect > Texture > Grain… This will bring up the Photoshop Effect Palette that will be pretty familiar to anyone who’s ever dabbled in Photoshop. These textures aren’t vectorised, though, so use them with wisely otherwise you could quickly defeat the whole point of using Illustrator in the first place.

Illustrator - Grain-100

Once you’ve clicked OK on the Photoshop Effects Palette, you’ll see your new textured cake shape. Change its Opacity to about 65% by going to the Transparency Palette (Shift + Command + F10). Now just align the textured shape over the previous non textured shape of the same size.

09_09_15_cake_04_790x200

So we’ve created the main part of the cake, and I guess you can take that out the oven for now and leave it to cool. Now for the icing. This part is pretty similar to before where we had the the 2 ellipses. Create another 2 ellipses of the same size as before (this is where making a few copies comes in handy) and keep them aligned, but ensure they’re closer together than the ellipses we used for the main part of the cake. This time, delete the bottom point on the top ellipse, and delete the top point on the lower ellipse using the Direct Selection Tool (A). Now Join (Command J) the points and make it into a shape like below.

Fill the shape we just created with a 3 colour linear gradient. Place each colour in the same positions as before – 2 of the same colour points (I’ve used just white here) at each end, and then a very slightly darker colour at 85%. I used a slight purple just to spice things up a bit. Make your icing any colour you like.

09_09_15_cake_03_790x200

Position the layer of icing on top of the main cake base by ensuring it’s above everything else. Send the icing to the front by pressing Command + Shift + ].

Now take another one of those ellipses that you dragged off the canvas earlier. Fill this ellipse with white and Feather (Effect > Stylise > Feather) it with a Feather Radius of 15px. Ensure this circle is above everything (including the icing layer we just brought to the front) and align it to the horizontal centre, and vertical top of the main icing layer. The Alignment Palette can be accessed by hitting Shift F7.

Illustrator - Circle Feather

Now select the icing layer that we formed with our two ellipses earlier. Use the Add Another Anchor Point Tool (+) to add a bunch of new points on the bottom edge of the icing shape. These don’t have to be accurately spaced out or anything – they’re supposed to give the effect of dripping icing once we’ve moved them about in the next step.

Using the Direct Solution Tool (A), select each of the points you just created, one at a time. Move every other point down a few pixels, and move a few random points up a few pixels. With a little experimentation, you should get a fairly natural effect similar to that in the image below.

To make the icing look like it’s slightly raised above the cake it’s dripping from, add a subtle drop shadow to the icing shape. Select the icing shape and go to Effects > Stylise > Drop Shadow. On the Drop Shadow Pane, set the Mode to Normal, Opacity to 45%, X-Offset to 0, Y-Offset to 1px, and Blur to 0px. Ensure the colour is black or very dark brown.

09_09_15_cake_05_790x200

We’ve got a fairly tasty looking cake, baked and iced, now for a shiny silver base to sit it on. Using the same method as earlier, create two larger ellipses and delete their top points. Join (Command + J) the two ellipses to make one very short cylindrical shape just like a wider, shorter version of the cake base shape. Fill this shape with a linear gradient of 4 colours to give a chrome like appearance keeping these colours in greyscale. Give this cylindrical shape a drop shadow (Effect > Stylise > Drop Shadow…) Set the drop shadow Mode to Normal, Opacity to 65%, X-Offset to 0px, Y-Offset to 1px, Blur to 3px, and ensure the colour is black.

Create another ellipse of the same size as the ones used to create the shape we just made, and fill it with a dark grey. I used a colour of 50% black.

Drag another one of the ellipses onto the canvas that you dragged off earlier – keeping it the same size as the main cake shape. Fill this circle with a very dark grey (darker than the last one we created) – I used 80% black. Feather this ellipse with a Feather Radius of 15px.

Illustrator - Cake Base

Align each of these 3 shapes to the horizontal centre and Group (Command + G) them. Send them to the back with Command + Shift + [ and ensure they are horizontally centred with the main cake shape too. Now you have a cake, baked, iced, and on a shiny plate!

Illustrator - Cake So Far 01

Now for the candles. It’s time to draw a few more ellipses – this time we need to make a really tall, thin version of the basic cake shape that we made before. Use the same method – draw two small ellipses directly above one another and then delete the top points and Join (Command + J) the two shapes. Fill this shape with a 3 colour linear gradient with the 2 end point colours the same, and a darker shade of the same colour at around 85% along. Your candles can be any colour, but I decided to go for a bright pinky red.

Make a copy of an ellipse of the same size as the ones you just used to create the basic candle shape. Fill it with a similar, preferably slightly darker colour as that of the main candle shape. Align this to the top of the candle shape so it forms the top of the candle.

Make another copy of that same ellipse, but scale it down to about a third of the original size. Fill this ellipse with a dark colour, I just used black. Feather this ellipse with a Feather Radius of 2px. Align this to the centre of the ellipse sitting on top of the candle.

Make yet another copy of the ellipse and proportionally stretch it so that it’s slightly larger than the candle width. My ellipse was around 50px wide and 14px high. Fill this ellipse with black and Feather it with a Feather Radius of 12px.

Illustrator - Candle 01

That’s the main candle made, now to light it. To make the flame, draw another ellipse, but this time stretch it vertically so it’s taller than it is wide. Using the Convert Anchor Point Tool (Shift + C) click on the top point of the ellipse you just made. This will cause that point to become a vertex rather than a smooth curve. You should now have a nice flame shape. Fill it with bright yellow.

To make the flame more realistic, make a copy of the shape and proportionally scale it so that it’s slightly smaller. Align it to the bottom centre of the first flame shape. Fill this with a slightly darker shade of yellow. Repeat this same step a few times, making the shape smaller and filling it with a slightly darker colour. The centre of a flame, if you look closely, is actually made up of a spectrum of blue. Fill the smallest couple of flame shapes with blue. Ensure all of these shapes are horizontally aligned to the centre and vertically aligned to the bottom of one another. It would probably make life a little easier to Group (Command + G) the flame shapes together so that you can easily align them slightly above the centre of the candle shape.

09_09_15_cake_06_790x200

Now make a few copies of the whole candle shape (again, easier if you Group all the candle elements together here) and position them on the top of your cake however you wish.

Now just dim the lights, and you’re ready to sing happy birthday. Here’s the outcome. Yum.

09_09_14_tut_cake_01_790x593

Ai Get the Adobe Illustrator CS2 File [705KB]

Don’t have Adobe Illustrator? Download the SVG.

Don’t forget to save some cake for me when you’re done. Thanks for reading!

Subscribe to the GoSquared newsletter.

Join 15,000 people. Get our latest posts delivered to your inbox every week.

  • http://greater.gd Liam Day

    Do you have one in chocolate?

  • http://webagentur-meerbusch.de Zulu

    Great job. Looks tasty

  • http://Arttut.com Arttut.com

    Delicious cake 🙂

  • Billy Joe the Cook

    Get a life please please please and go make a real cake

  • http://www.gosquared.com/ James Gill

    Hi there Billy Joe the Cook,

    Liquidicity is a site dedicated to design and technology. We cater to a knowledgeable audience of creatives.

    We don’t teach cookery here. When I next make a cake I wouldn’t expect any to be going your way.

  • Carrie

    Hey. This is an awesome tutorial! I love it. Also, one question, before the completed cake, your last cake photo shows lines on the side where the frosting is lying on top of the cake. Mine looks like that, then at the bottom, the finished picture there are no lines. I was just wondering how exactly you made it look smooth like that? Thanks a ton! Enjoyed it very much. [=

  • http://www.cgbaran.com Cgbaran

    Great tutorial thanks

  • alessandro

    Using the Direct Selection Tool (A) again, select the point on the right of the top ellipse, and holding down Shift also select the same point on the lower ellipse. Now join these two points by going to Object > Path > Join (Command J). Now do the same for the points on the left of each ellipse. This will create a single shape from our two deformed ellipses.

    Answer
    Listen what do you mean when you say” Using the Direct Selection Tool (A) again, select the point on the right of the top ellipse, and holding down Shift also select the same point on the lower ellipse”
    i cann’t understand it im not good with english…please can you explain me better please??
    could you be more cleared please??

  • alessandro

    Using the Direct Selection Tool (A) again, select the point on the right of the top ellipse, and holding down Shift also select the same point on the lower ellipse. Now join these two points by going to Object > Path > Join (Command J). Now do the same for the points on the left of each ellipse. This will create a single shape from our two deformed ellipses.

    sorry i cannt understand this steps …could you show me it by pictures i cannt move on please!!
    i cannt join the figure like you say i m not able to do that please can you show me by photos?
    thanks…