Create a Tasty Burger Icon in Illustrator

March 15, 2010 in Tutorials by Andrea Austoni | 44 comments

In this delicious tutorial I’ll show you how to create a three-dimensional, scrumptious burger using Adobe Illustrator. Remember that I’m a vegetarian, so you should definitely appreciate the effort!

Final Result

Here’s the finished burger at the final resolution of 72×72 pixels and blown up to show the detailed shapes and shading.
Finished hamburger icon

The bottom bun

Create a new document in Illustrator and set the canvas to 72×72 pixels. This icon size is used for Android launcher icons. I won’t go into the details of pixel-perfect icon creation, preventing blurry lines etc. That’s for another tutorial.

You should make a sketch every time you design anything to block out the shape and the colors and check out the perspective. I did my sketch directly in Illustrator, painting with the Blob Brush using a tablet. I cannot recommend a tablet enough so start saving today…
Burger icon sketch

Zoom in until the canvas fills the screen and draw the shape for the bottom bun (1a), filling it with the proper gradient (1b).
Add some Inner Glow from the Effect menu (1c) to make the bun appear round.
Draw the bottom bun

Draw the inside of the bun (2a) and fill it with a lighter gradient (2b). SInce it falls out of the bottom shape we need to crop it. Duplicate the bottom shape and place it above the inside (2c). Now select both shapes and hit Cmd+7 to create a clipping mask: now the inside is cropped to the bottom (2d).
We’ll use this technique every time an object needs to be cropped to another so keep referring to this step.
Draw the inside of the bun

The filling

The first item to add is a leaf of lettuce (3a) filled with a strong green gradient (3b).
Draw the lettuce

Add the patty (4a) and select a meaty gradient, burnt to a crisp (4b).
Draw the meat patty

Add a slice of tomato on top of the patty (5a) using the proper colors (5b). As you can see we don’t waste time drawing the texture of the meat or the inside of the tomato because these details won’t be visible at the final size, they’ll only add visual noise.
Draw the tomato slice

The fillings cast a shadow onto the bottom bun so duplicate the lettuce and make it black. Set it to Multiply and lower the Opacity to 35% (6a). Go to Effect > Blur > Gaussian Blur and choose the appropriate settings (6b).
Draw the lettuce shadow

As you can see the shadow bleeds out from the bun’s outline (7a) so we need to crop it with a clipping mask (see previous step) (7b).
Crop the shadow to the bun

Let’s also add a drop shadow below the bun, this is not a flying burger. The shadow is a black ellipse set to Multiply with an Opacity of approximately 50% and a good dose of Gaussian Blur added to it. I guess you now know how to create shadows!
Draw a drop shadow below the bun

Wait a minute, no cheese? Of course! Draw a squarish shape but make it droop at the corners like a good slice of semi-melted cheese does (8a). Check out the cheesy gradient (8b)! Duplicate this shape and move it up (8c). Make it lighter, modifying the color stops in the gradient (8d).
Draw the slice of cheese

All we need to do now is draw the shadow cast by the cheese on the tomato and the filling is complete.
Draw he shadow cast by the cheese

The top bun

Mmh, the hamburger is almost complete.
Draw the top bun much like you drew the bottom bun (9a, 9b).
Draw the top bun

Create a smaller shape to act as top highlight and set it to Screen and 85% Opacity (10a). Add some Gaussian Blur to smooth its edges (10b) then use the clipping mask method to crop it to the bun (10c).
Draw the top highlight

Finishing touches

Let’s not forget the top bun casts a shadow onto the cheese so just like before add your blurry shadow (11a). Finally draw a bunch of small, light yellow ellipses on top of the bun: the unrenounceable sesame seeds (11b).
Add the finishing touches

Now here’s the finished icon at its native size. Isn’t it cute?
The finished icon at its native size

So you see, it takes some work and clever tricks to craft icons. They aren’t just small images and they don’t take just a few minutes to throw together.

I hope you liked this tutorial and, once again, please appreciate the effort it took me, as a vegetarian, to create a hamburger.
The least you can do is tweet and share this tutorial with the world.
Buon appetito!

Share this post with the world!

Check out these posts too:

  1. Create a Vintage TV Set Icon in Illustrator
  2. Design a Stylish Wallet Icon in Illustrator
  3. Create a Tiger Striped Cat with Illustrator
  4. Create a Cute Baby Seal with Illustrator
  5. Create An Awesome Space Rocket Avatar in Illustrator
separator

44 Very Welcome Comments:

Speak Your Mind