Easy To Create A Burger,First Aid Box,Briefcase Icon in Illustrator

Burger Icon in Illustrator

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.

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…

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 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.

The filling

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

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

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.

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).

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).

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!

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).

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

The top bun

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

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).

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).

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

[Via cutelittlefactory]

-------------------------------------------------------------------------------------------------------

First Aid Icon in Illustrator

Tutorial Details

Program: Adobe Illustrator CS4
Difficulty: Beginner to Intermediate
Estimated Completion Time: 1 hour

Step 1

Open up a new document and select the Rectangle Tool (M). Create a rectangle and fill it with red.

Step 2

Got to Effect > Stylize > Round Corners and apply a radius of 30pt to the rectangle. Go to Object > Expand Appearance. This will apply the rounded corners. Make a copy of the shape, as we’ll need it again later.

Step 3

Now go to Effect > 3D > Extrude & Bevel and apply the settings you see in the image below. Make sure you add an extra highlight and a bevel.

Step 4

Go to Effect > Stylize > Drop Shadow and choose the settings you see in the image below.

Step 5

Create a rectangle filled with gray. This will become the cross for the first aid icon. I filled it with gray for now, but later we will change it to white.

Step 6

Select the rectangle, hit Command + C + F (this will paste the object on top) and then select it with the Selection Tool (V) and rotate it 45 degrees.

Step 7

Select the two rectangles and apply the Unite option in the Pathfinder Palette.

Step 8

Apply another round corner effect (see Step 2) and set the radius to 12pt.

Step 9

Once the shape has been expanded (Object > Expand Appearance), fill it with white.

Step 10

With the cross still selected, open up the Symbols Palette and drag the cross into it. Name it "Cross" and set the type to Graphic.

Step 11

Go back to the red box and open up the Appearance Palette. There, double-click the 3D Extrude & Bevel layer to edit the effect. In the pop-up window, click on Map Art, choose “surface 1″ and select the "Cross" we just added into the Symbols Palette. Place it into the middle of the box top.

Step 12

This is what we have so far for the first aid icon.

Step 13

Let’s create an illusion of a separation to the box, so it looks like it has a top and a bottom that opens up. Take the copy of the rectangle we made in Step 2 and set the fill to none and the stroke to 1pt red.

Step 14

Select the object and go to Object > Path > Outline stroke.

Step 15

Apply the same 3D Extrude & Bevel Settings from Step 3, but add no Bevel and set the Extrude Depth to 5pt.

Step 16

Create a rectangle and fill it with a white to black gradient. Place it on top of the rectangle we just created. Make sure you set the gradient direction like you see in the image below. We will add an Opacity Mask and the black will hide the object and the white color will show it.

Step 17

Select the object and the gradient and go to the Transparency Palette and click on the small arrow on the right and apply the Opacity Mask.

Step 18

This is what it should look like.

Step 19

Now move the object on top of the box.

Step 20

Let’s get on to the box clips. Create three similar shapes like you see in the image below. These object are fairly easy to create. Fill them with gray and the compound object with a gradient of black to white.

Step 21

Apply a 3D Extrude & Bevel again.

Step 22

Once you applied the 3D effect on all three objects, move them together. These three objects make up the clip for the first aid box.

Step 23

Group the three shapes (Command + G) and make a copy. Then place them on the front of the first aid box.

Step 24

Last but nor least, create a shape with the Pen Tool (P) and fill it with a white to gray to white linear gradient. Place it on top of the box and set the Opacity in the Transparency Palette to 80%. This will be the highlight of the first aid icon.

Conclusion

This is the final image. I create a 384px, a 192px, a 64px, and a 32px version. Even as small as 32px, the first aid icon is till recognizable. I hope you had fun creating this little icon.

[Via vector.tutsplus]

-------------------------------------------------------------------------------------------------------

A Briefcase Icon

In this tutorial, I will show you how to create a briefcase icon with rectangles, ellipses, and gradients. This briefcase icon is great for web designs and user interfaces. Moreover, you can easily apply these techniques to other icons, logos, and illustrations.