The Cat

Here he is, looking fun and slightly malicious:

Soundtrack: Primus ‘Tommy The Cat’

Get a load of Primus in their prime with this classic song from Sailing The Seas Of Cheese, featuring Tom Waits as the titular character:
[Audio clip: view full post to listen]

Funny story: I was wearing a Primus t-shirt during my final high school exam (matura). One of the professors saw it, said he hated the band and proceeded to try and stump me with difficult questions, without too much success. What a loser!

The eye

Draw an ellipse then activate the Convert Anchor Point tool (Shift+C) and click once on the left and right endpoints to turn them into corners. Scale down the eye vertically.

Draw the iris as a circle and the pupil as a squashed ellipse, just like the main eye shape.

Make the eyeball slightly yellow and add an Inner Glow effect.
Fill the iris with a yellow/orange radial gradient.

Make the pupil dark brown. Make a copy of the eyeball, place it behind everything else (Send to Back, Shift+Command+[) and turn it brown. Scale it up horizontally, keeping the right corner coincident with the eyeball. Move the iris-pupil combo up and use a copy of the eyeball to create a clipping mask.

Adjust the angle of the eye so the outer corner is rotated upwards. Add a semi-transparent white circle on top of the iris to act as reflective highlight. Mirror the other eye and place a guide in the middle.

The nose and the snout

Draw the left half of the nose, snapping to the guide. Mirror the right half then hit Command+J to invoke the Join tool. WIndow select the two top middle points and chose the Smooth option. Repeat for the two bottom points.
Fill the nose with a brown gradient and add an Inner Glow and an oval highlight.

Draw the snout with two simple curves. Apply a tapered brush from the Brushes palette, loaded from Artistic > Artistic Ink.

Select both halves and go to Object > Expand Appearance. Unite the two shapes from the Pathfinder palette. Draw two simple teeth and fill them with a light gray gradient to suggest roundness.

The body

Draw the body as a modified oval shape and fill it with an orange gradient, darkening the bottom half.

Draw the ears and unite them with the body as one shape. The inner ears are separate shapes filled with a lighter gradient.

Apply an Inner Glow effect to the body. Draw the belly, fill it with the same gradient as the inner ears and clip mask it to the body.

Now we’ll create some quick fur.
Select the belly then go to Effect > Distort & Transform > Roughen. Use the appropriate values to obtain a frayed edge that resembles fur. Do the same for the inner ears.

The stripes

Let’s create the tiger stripes.
Draw a series of paths radiating along the left side of the cat. Apply a tapered brush to them, loaded from the Artistic Ink brushes. Mirror the stripes to the right side and expand all the paths. Clip mask them to the body and apply the Roughen effect to create the fur.

Select the clip masked group of stripes and click on the Crop icon in the Pathfinder palette. This will expand the group and apply the mask. Make a copy of the belly, make sure it’s expanded. Now select the expanded stripes and the copy of the belly and click on the Divide icon in the Pathfinder. This will create a large group of shapes from which the ends of the stripes that overlap the belly can be deleted. The same goes for every lightly colored shape in the group: it’s the copy of the belly that we don’t need anymore. When you’re done, the stripes will not overlap the belly.

The paws

Still with me? Good. On to the paws.
Draw the paw with a simple path and fill it with an orange shade sampled from the underlying body. Draw the toenail and fill it with an Inner Glow effect, choosing the Center option. Repeat for all toes.

Make a copy of the paw, turn it dark brown and place it underneath the paw. Rotate it a bit and apply a Gaussian Blur effect: it’s the paw’s shadow. You need to clip mask it to the body so there’s no shadow in the air.
Mirror and copy the remaining paws.

Use the same method to create a shadow from the body. Place it above the hind paws, using them as clipping mask. This means you have to create two shadows, one masked to the left hind paw, one to the right hind paw.

The tail

The tail is a curved shape behind the body, filled with the same gradient. Make sure the base of the tail is darker than the tip.
Using the method explained before, create stripes on the tail and make them furry.

Finishing touches

The paws look flat. Add darker shapes, made blurry with a Gaussian Blur effect. Clip mask them to the paw. Do it for each paw of course. Finally create a drop shadow from the body+paws+tail and you’re done.

You should have a vector cat at your disposal now. Have fun!

Check out these posts too:

1. Create a Cute Baby Seal with Illustrator
2. Create a Vintage TV Set Icon in Illustrator
3. Create a Tasty Burger Icon in Illustrator

The result

Here’s what we’ll have on our screen at the end of this easy easy tutorial:

Get your tablet ready! No tablet? Sorry, you’re going to be disappointed by your result if you use a mouse, but keep reading please.

Soundtrack: Smokestack Lightnin’ – Howlin’ Wolf

As usual these soundtracks suggest themselves to me when I put an illustration together. This time, ladies and gentlemen, it’s none other than Howlin’ Wolf.
Not only is Smokestack Lightnin’ appropriate for this tutorial, it even inspired me to write it.
Please do yourself a favor and listen to the Howlin’ Wolf several times a day to wash away all the crap the radio and the TV have been playing for the past 30 years.
[Audio clip: view full post to listen]

I love how this song clashes with Lost’s dark, ominous atmosphere. Imagine strolling through the jungle, listening to the blues, and suddenly meeting the smoke monster! In fact, let’s…

Meet Smokey!

Again, don’t worry, there are no spoilers here! The true nature of the smoke monster is not revealed.
Here are several screenshots of Smokey, one of the most misterious characters of Lost:

As you can see it often looks just like regular black smoke (it ain’t…), though sometimes it takes on the form of a long, thin arm. The smoke is not wispy and transparent but rather solid and thick. It also moves a lot, whirling and rolling.

We’ll go for a thick cloud of black smoke in a menacing pose.

Step 1: blocking out the image (sketch)

Find a good picture of the (preferably) Hawaiian jungle to act as backdrop to Smokey. Here’s a photo I found on Flickr (with a Creative Commons license), already cropped:

Get it on Flickr.

Draw a quick sketch of Smokey now. It’s important to try different shapes until you find one that does justice to the original character and plays well with the backdrop. Don’t waste time with how it looks, just concentrate on its shape. Here’s my sketch:

Smokey comes out from between those trees at the right of the screen and weaves through the jungle, almost coming to a stop.

Step 2: laying down the shape

With the sketch in place you can lay down the actual shape. Remember what we said about the smoke being thick, rolling and moving all the time? Paint a faily solid shape in black, making the edges quite busy with curls. You can do that with a good textured brush, controlling the size and opacity with the pen pressure setting.
I’m using one of Chris Wahl’s amazing brushes.

Step 3: the base color

The first thing you need to notice is that black smoke is not black. Rather, it’s dark gray, so make Smokey lighter.

Step 4: adding depth

The patch of light in the bottom right corner tells us that there’s light coming that way. We need to darken Smokey’s left side using either a black brush or the Burn Tool. Also add secondary shapes the same way.

Step 5: adding details

Using a gray brush and light strokes lighten up the middle and right areas: that’s where Smokey is lit. Try to suggest a series of rings along the length of the “arm”.

Now break up the ring pattern and tone down the lit areas. Paint the shadow cast onto the ground. I’ve also added a slight yellow tinge to simulate color bleed from the trees. In the last image I’ve smudged some edges and some of the inner crests to suggest movement. Surgical motion blur if you will.

You’re done with the painting. Now run for your life!

Conclusions

This tutorial is about painting smoke, any smoke, and the Lost smoke monster was of course just a pretext to make it more appealing.
I hope you learned something useful and had fun. I had lots of it but sadly this doesn’t change the fact that Lost is no more. Damn do I miss that show!

Check out these posts too:

1. Let’s Go To Monster School!
2. Painting a Jack-O’-Lantern
3. Create Character Driven Book Cover Art Using Illustrator and Photoshop

The finished icon

Here’s the final result: the icon for the ficitious Kitchen Range app.
I came up with the concept for the app and designed its icon in order to show my design process in the article Designing iPhone Icons, a guide I wrote for designers and developers of the iPhone platform. I suggest you read it before following this tutorial.
Kitchen Range is a search engine for recipes with additional social features. The icon depicts a gas range, a graphic metaphor that fits both the app and the icon format.

Soundtrack: Chitlins Con Carne

Cute Little Factory is the only blog whose tutorials feature soundtracks.
The right tune sets the mood for the artwork, maximizing the fun and the quality of the result. Music enhances your design life.

The obvious choice for this tutorial would have been “The Dangerous Kitchen” by Frank Zappa but I feature his music way too often so I chose “Chitlins Con Carne” instead, a blues instrumental by Kenny Burrell performed here by Stevie Ray Vaughan.
[Audio clip: view full post to listen]

The sketch

Every iPhone icon sits inside a rounded square. You can either see it as a frame for your app’s logo or you can target it directly by designing an icon that is a square object with rounded corners. In the case of Kitchen Range I chose a gas range because it matches the app’s function and is a rounded square in real life.

Before you start sketcing you must collect photographic reference. Study pictures of various gas ranges and identify the common elements, what makes a gas range identifiable. Do some rough sketches until you find the proper design. I like to paint a quick color sketch in Photoshop to see if the design works. It takes 5 minutes to sketch this icon with a tablet.

I think it works.

Step 1: the iTunes artwork

The plate

Start a new blank document, 512×512 pixels. Activate the grid (Command+’) and Snap from the View menu.
Draw a rounded rectangle, setting 78px as Radius. This is approximately what iTunes uses to display icons in Cover Flow.
Apply Gradient Overlay, Inner Glow, Inner Shadow styles to shade the square.

Duplicate the square and scale it down by 16px. Clear the styles then apply another Gradient Overlay and a Bevel and Emboss to make the square inset from the bigger one. Convert the layer to a Smart Object and apply a 1px Gaussian Blur to soften its edges.

Duplicate the bigger square again and scale down to 440×440 px. Clear the layer styles and apply a vertical Gradient Overlay to light the range from the top. Do the same Smart Object/Gaussian Blur trick here too.

Fill a new layer with black or white (load these default colors with the shortcut D). Apply a Noise filter then a horizontal Motion Blur. Change the blending mode to Soft Light and reduce the Opacity to 50%. We have created a subtle brushed metal texture.

The burners

Draw four black circles. Make their radius 48px, 72px, 96px and 128px. Make sure to snap exactly on the pixels by drawing with the grid on.
Apply Gradient Overlay, Bevel and Emboss and Drop Shadow styles to give the burners depth.

Draw a dark blue half-circle on the lower half of the biggest burner. Turn it into a Smart Object. Apply a Ripple filter (from the Distort group) and a Gaussian Blur as well. We now have a blurry reflection. Use a black to white gradient mask to fade the top of the reflection. Repeat the process for the remaining burners.

Duplicate the burner, enlarge the copy by 8px and clear all styles. Apply an Angle Gradient Overlay to simulate several reflections. Duplicate this circle, enlarge it by 20px, rotate the Gradient Overlay and add a Drop Shadow. Finally overlay the brushed metal texture to complete the base of the burner. You can make the texture more obvious of course.

Take a gander at the layer structure of each burner.

The pan supports

The pan supports are thick metal wires created with paths.
First draw the left half as a rounded rectangle. You can reuse the vector mask from the plate and move the points. Change the Fill to 0% so the vector layer itself won’t be visible (but the layer styles we apply will). Apply an 8px inside Stroke, black. Convert the layer to a Smart Object and add a Gradient Overlay to lighten the top and a Drop Shadow. Apply a Bevel and Emboss ro round the edges.

Create the remaining wires as rounded rectangles and keep the same layer styles. Just make sure to increase the Distance parameter in the Drop Shadow for the small wires because they are farther off the plate.

Step 2: the application icon

We must resize the document to 57×57 pixels and the icon needs to be manually adjusted. Since we can’t edit Smart Objects directly within the document we must convert them back to regular layers. To do so double click them and they will open in a separate document from which you can duplicate the individual layers. When you do choose the main document as Destination and the original, editable layers will be available.

Now resize the document to 57×57 pixels.
Hide all layers except the plate. Adjust all vector shapes by snapping them to the grid to make sure their edges lie on, not across the pixels. Also increase the contrast of the brushed metal texture until the lines are visible again.

Resize the burners, snapping to the grid. Eliminate the flat ring around them, resize the bigger ring and restore the Drop Shadow to 1px. Layer styles are scaled down along with the layers so their settings may be off.

The pan supports must be redrawn entirely. Snap to the pixels and use a 1px inside Stroke for maximum crispness. Also eliminate all the styles that only add visual noise. It’s an empirical process so your personal judgement comes into play here.

Here’s the finished icon. Try applying the Unsharp Mask filter: if the lines don’t change much you have done a good job.

Step 3: the small icon

We now must resize the icon to 29×29 pixels. Just like before restore all smart objects to their layer state and resize the document. It looks pretty messy.

Carefully resize the plate. Make sure the corner points lie directly on the pixels.

The brushed metal texture won’t be visible at this size so in the trash can it goes. Same goes for the rings around the burners. Just keep the black circles with the gradient and the drop shadow.

Redraw the pan supports from scratch. Again? Yes, welcome to icon design!
Use an appropriate radius for the rounded corners.

Complete the pan supports with all the small sticks.

Here’s the 29px icon at 100%.

Conclusion

The icon is finished, take a looksie.

As you can see creating an iPhone icon is quite a lot of work. Manual work. Resizing in Photoshop gives fairly messy results that can be sharpened but can’t be made crisp. Crispness is the result of manual optimization.

I hope you liked this tutorial and I hope you can appreciate the amount of work that goes into creating icons. They are not just small drawings after all, are they?

Check out these posts too:

1. Create a Vintage TV Set Icon in Illustrator
2. Create a Tasty Burger Icon in Illustrator
3. Designing iPhone Icons

Final Result

Here’s the finished wallet icon blown up and at its native size of 128×128 pixels.

Soundtrack: “Money” by Pink Floyd

There was no other choice! Enjoy this 7/4 gem from “Dark Side Of The Moon”.
[Audio clip: view full post to listen]

Step 1

For once I want to make an easy tutorial for beginners so let’s create the icon at the intermediate size of 128×128 pixels: the icon is bigger than normal yet we won’t need to be extremely detailed.

Create a 120×64 px rectangle and add the Rounded Corners effect choosing 4 px for the radius. Fill the rectangle with a vertical yellow gradient. Remember to give all your shapes whole-number dimensions, no commas allowed. The same goes for their coordinates: make sure each object lies on the pixels, not across them. Doing so will avoid antialiased (blurred) edges and the icon will look crisp.

Step 2

Copy and paste in front the rectangle (Command+C, Command+F). Load an animal skin pattern from the Patterns palette and apply it to the rectangle. In the Transparency palette set the mode to Overlay and the Opacity to 25%. Now our wallet is made from (fake, of course) yellow crocodile skin. It doesn’t get more stylish than this.

Step 3

Draw stitches on the wallet with a simple light brown path. Make the stroke dashed and adjust the dash length and spacing to get a satisfying result.

Step 4

Draw the top metal edge (a simple rectangle) and fill it with a black and white gradient to simulate reflections on chrome. Also add a drop shadow to the edge with the eponymous effect. Use 0 px for the X offset so the shadow is cast downward.
Don’t forget to place a fake Italian designer’s logo on the wallet!

Step 5

Draw the closing latch with an angled stroked path and expand it. Fill it with the usual chrome gradient (adjusted for this particular shape). Mirror the second latch and make it slightly taller. Add the two little beads that snap together and shut the wallet. They’re made with three concentric circles.

Conclusion

Finished! That was easy, wasn’t it? Behold the beautiful icon. See how crisp it is at its target size? That’s because we kept all lines exactly on the pixels and not across them.
Think about how many other realistic objects can be drawn with just a few clever steps!

If you enjoyed this tutorial don’t bogart it: there’s a whole design community to share it with!

Check out these posts too:

1. Create a Tasty Burger Icon in Illustrator
2. Design a Fun Invoice Template with Illustrator and InDesign
3. Create a Vintage TV Set Icon in Illustrator

Final result

Here’s the finished illustration. You’re on the moon, or orbiting it, and you get a glimpse of Earth, our pale blue dot. Whatever those light beams are they’re begging for some spaceship to be placed right among them. It was only fitting that I’d put the awesome space rocket from my own tutorial.

Soundtrack: Space: 1999 Black Sun

To put you in the right mood for this tutorial I’ve uploaded a moody, relaxing space theme from the cult TV show Space: 1999 called “Black Sun”.
Put your headphones on for maximum effect:
[Audio clip: view full post to listen]

Step 1: The backdrop

Create a new RGB document and make the canvas square, I used 500 pixels on each side. Fill the canvas with an intense blue gradient (1a). Add variation with darker and lighter brush strokes (1b) then introduce new colors like purple and light blue to create depth. Leave a lighter aura at the bottom right corner (1c).

Step 2: The Moon

Create the Moon by selecting a light blue color (2a) and creating a large circle. Place it at the bottom right corner so it matches the aura you painted in the previous step (2b). Add a blue gradient (2c) to darken the side facing us (2d).

Step 3: The Earth

Grab a picture of the Earth seen from space, like this one from Stock.Xchng.
Make a selection with the Elliptical Marquee Tool (M) (3a) and hit Command+J to create a new layer from it (3b). Place the planet into our scene at the top left corner. Scale it down as needed (3c). Let’s take a look at our layers to see what we have so far (3d).

Step 4: Adjust the Earth’s colors

Grab a strong blue (4a) and paint the Earth with a light brush using transparency (4b). Add a few layer styles (4c, 4d) and use a Curves adjustment layer (4e) to enhance the planet (4f).

Step 5: The sunburst

Let’s create a sunburst to place behind the Earth.
Create a new document, 300×300 pixels and Paint a vertical gradient from white to blue (5a) then go to Filter > Distort > Wave. Refer to image 5b for the settings. The filter produces vertical bands (5c). Go to Filter > Distort > Polar Coordinates (5d) and voilà, a nice sunburst (5e).

Step 6: The light rays

Place the sunburst in the space scene (6a) and get rid of the white rays with the Magic Wand (W) and the goold old Delete (6b). Move the sunburst behind the sun and scale it down. Set the blending mode to Linear Dodge (6c) then erase the hard edges with a soft brush tip (6d).

Apply a Motion Blur filter (from Filter > Blur) (6e) to stretch the rays towards the moon (6f). Apply some Outer Glow (6g), fade the rays where they meet the moon and finally duplicate them to increase their impact (6h).

Step 7: The stars

Hit B to select the Brush Tool and F5 to open the Brushes palette. Select a 5px soft brush and set the spacing to 500% to change the solid stroke into a series of dots (7a). Turn on Size Jitter to vary the diameter of the dots randomly (7b). Enable Scattering (7c) and Opacity Jitter (7d). I’m using a tablet so I set it to Pen Pressure. Alternately you can set it to Off and increase the value to about 50%.

The following images show how you can build a convincing starry sky by painting on different layers, changing the size of the brush and the opacity. In the last image you can see star clusters with an outer glow to suggest the presence of nebulas and galaxies.

Step 8: The Moon’s craters

Create a bunch of dark beige ellipses on the surface of the moon, varying their diameter wildly but moving them closer together as they approach the moon’s outer edge to simulate perspective (8a). Merge the craters together and use the Dodge Tool (O) to brighten the farthest craters (distant objects are always brighter) (8b). Working on the moon layer paint shadows behind the craters so they look raised from the surface (8c). To finish brighten the bottom edge and darken the inside of the crater for better depth (8d). The moon is finished (8e).

Step 9: Color adjustments

Adjust the moon until it’s blue-green using an Adjustment Layer (Hue/Saturation or Color Balance) (9a). Add a Selective Color adjustment layer to the light rays (9b) to make them greener (9c) then using Curves (9d) to enhance the sky’s contrast (9e).

Step 10: Completion

With the same brush we used to create the stars paint some dirt on the moon (10a). The illustration is almost finished (10b): we need to add our favorite space rocket (10c).

I hope you had fun doing this tutorial and learned some cool tricks. With these techniques you can create an infinite number of space scenes, I’d love to see what you come up with.
As always tweet and share the post if you enjoyed it and please comment, I love getting feedback from you.

Check out these posts too:

1. Create An Awesome Space Rocket Avatar in Illustrator
2. Create a Magnifying Glass Icon in Photoshop CS4
3. How to Create a Swanky Coffee Table Icon in Photoshop

Final Result

Here’s the finished invoice. It’s got a nice border reminiscent of envelopes, icons to mark the designer and the client info, a project thumbnail, nice typography and a clear layout.

Creating the border pattern

Open Illustrator and create a new A4 document with a 3 mm bleed area (click on Advanced if you don’t seee this option) (1a). The document is created with a traditional artboard and red guides to mark the bleed area (1b).

Create 4 horizontal stripes: one blue, one white, one red and another white one. Don’t just fill them with solid colors, they’re flat! Use light gradients instead to make them appear slightly rounded (2a). Group the 4 stripes together and place many copies until you have covered an area roughly twice as big as the artboard (2b).
Select all the stripes, hit Cmd+G to group them together then pick Transform > Shear from the right-click menu. Choose Vertical and -45° to make the pattern slanted (2c).

Create a rectangle as big as the bleed area on top of the stripes (3a). Shift-select the stripes and hit Cmd+7 to create a clipping mask. Now the stripes are cropped to the bleed area (3b).
Save the file as “border-pattern.ai”

Importing the pattern to InDesign

Open InDesign and hit Cmd+N to create a new document. Select the A4 size and set both the margins and the bleeds to 3 mm (4a). The document is created with the appropriate guides (4b).

In the Pages palette double-click on the A-Master thumbnail (5a). We want to create a template that can be applied to any page. Hit Cmd+D or choose Place from the File menu and select the “border-pattern.ai” file. Snap it to the bleed guides to place it in the document (5b).

Start organizing the Layers: the bottom layer contains the stripes and can be locked. Make a new layer and name it “page” (6a). Create a new white Rectangle and snap it to the margin (blue) guides (6b). Give it a thin black stroke too (6c).

Completing the master page

Create guides 1 cm off the border and write INVOICE at the top of the page (7a). Now set up guides and placeholder frames (on a separate layer) for the icons, the text frames, the project thumbnail and the table (7b). At the bottom of the page place your logo, a tagline to thank the client for his/her business and a dotted line for your signature (7c). The master page is complete (7d).

The designer icon

Go back to illustrator and create a new 48×48 px document. Turn on the grid and the snap features from the View menu. Create a vertical ellipse at the center top of the artboard (8a), filled with a skin-colored gradient (8b).

Below the head draw the neck (9a, 9b). Draw a light blue t-shirt, making sure it snaps to the neck (9c, 9d).

The hair (10a) snaps to the sides of the head (10b). Add some facial features (10c) and check the icon at 100% zoom. The designer icon is finished (10d).

The client icon

Let’s modify the previous icon to create a businessman, i.e. our client.
Create a V cut in the t-shirt and change it to a dark gray gradient to create the suit jacket (11a). Use a copy of the original t-shirt to create a white shirt under the jacket (11b).

Add a lapel (12a) and give it a Drop Shadow effect (12b) then mirror the other one (12c). Similarly draw the shirt’s collar (12d).

The tie is made with two simple trapezes filled with red gradients, darker where it meets the other garments (13a, 13b). The client icon is finished (13c).

Assembling the invoice

Back to InDesign create the text, images and table layers and start working on Page 1 of the document (14a). Place the icons in the document and snap them in place (14b).

Add text frames to contain the information regarding the designer and the client (15a). Create another text frame to contain the project details and import the project thumbnail (15b). The thumbnail has a light drop shadow to lift it from the page (15c).
Of course the text frames go on the text layer and the icons and the thumbnail on the images layer.

The table

Don’t forget to add the invoice number at the top right corner (16a). Now we can hide the placeholder frames and see what we have so far (16b).

Create a text layer for the table, double-click it then go to Insert > Table. Set it up as in image 17a. Fill the header row with a desaturated medium blue and fill the remaining rows alternately with white and light blue (17b).

When you select a row you can set its text style from the option bar (18a). Start adding the column title and adjust the row’s height as you please (18b).

The cells containing the items need to be left-aligned, the quantity column center-aligned and the money sums right-aligned (19a, 19b). Complete the table by filling in the remaining information (19c).

Finishing the template

Zoom out and see that the tagline needs to be aligned with the table (20a) so do that (20b). You can add another text frame below the table and enter some notes, for example payment details (20c). The template is finished (20d).

Conclusion

We now have a master page that contains all the elements that never change (the page border, the title, the logo, the tagline and the guides) and a regular page with all the text and image elements that need to be edited each time we create an invoice.
After a few adjustments the same template can be used for estimates so you can have a pretty neat stationery consistent with your outlook. In fact I encourage you to use a page border that matches your company colors or website.
Another nice touch is to create a female icon for women clients (and of course for yourself if you’re a woman designer). I just made a generic white male icon here but of course you should make your icon look more like yourself by matching your hairdo, skin color and clothing style.
Have fun designing your templates and may they bring you a lot of good business!

Check out these posts too:

1. Design a Stylish Wallet Icon in Illustrator
2. How to Create a Dynamic Design Portfolio with WordPress
3. Create a Tiger Striped Cat with Illustrator

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?

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!

Check out these posts too:

1. Create a Vintage TV Set Icon in Illustrator
2. Create a Tiger Striped Cat with Illustrator
3. Create An Awesome Space Rocket Avatar in Illustrator

I made this icon in September, when I started freelancing full time. Luckily Psdtuts+ was in need of a few icon tutorials so I had a lot of fun doing what I like.
You know the feeling of waking up in the morning and saying to yourself “What will I do today?”. You just want to bite into the day and make something beautiful. I never had that when I was working for someone else. That’s terrible. I like to wake up very early on Monday and wage my full-on attack on the week: freelancing is a war!

Ok, enough with the inappropriate violent metaphors, read the full tutorial on Psdtuts+ and comment, praise, criticize and share.
Also, while you’re at it, take a look at my other tutorials on this blog, on Psdtuts+ and Vectortuts+.

Check out these posts too:

1. How to Create a Swanky Coffee Table Icon in Photoshop
2. Create a Leather-Textured, Realistic Briefcase Icon
3. Create a Magnifying Glass Icon in Photoshop CS4

Here’s the illustration I created. It’s inspired by the ominous truth spoken by The Giant in Twin Peaks: “The owls are not what they seem”:

Read the full tutorial on Vectortuts+ and be sure to leave a comment: I always appreciate the kind words and I welcome constructive criticism.
I’m curious to see what I’ll come up for January. Mmh, maybe another animal…

Check out these posts too:

1. Create Character Driven Book Cover Art Using Illustrator and Photoshop
2. How to Create A Realistic Chef’s Knife in Illustrator
3. Create a Tasty Burger Icon in Illustrator

Sean Hodge, the (now former) editor of Psdtuts+, commissioned a series of tutorials that feature a digital painting icon set. The articles will appear once a week for a total of five weeks, leading into the new year. So for me 2010 is already off to a good start.

The first tutorial is entitled Creating a Set of Digital Painting Icons Part 1 – Sketchbook with Pencil Icon and here’s the final icon:

The second tutorial is Creating a Set of Digital Painting Icons Part 2 – Camera Icon. Take a look at that SLR:

The third tutorial is called Creating a Set of Digital Painting Icons Part 3 – Paint Brush Icon and teaches you how to create this icon:

The fourth, Creating a Set of Digital Painting Icons Part 4 – Digital Tablet Icon, features a Wacom Cintiq tablet:

Finally the fifth and last tutoril is entitled Creating a Set of Digital Painting Icons Part 5 – Cityscape Display Icon and includes some nice techniques taken from the world of matte painting:

This series was a lot of fun to create and I hope you enjoy all five tutorials.

Check out these posts too:

1. Tutorial published on Psdtuts+
2. How to Create a Shiny Paint Bucket Icon
3. How to Create a Swanky Coffee Table Icon in Photoshop