In this detailed tutorial I’ll show you how to create an iPhone icon from scratch using Photoshop’s vector shapes, layer styles and masks.
Starting from a handdrawn sketch we’ll proceed to create the high resolution icon for iTunes. Finally I’ll take you through the necessary steps to resize the icon by hand in order to create the remaining sizes for the Home Screen and Spotlight searches.

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.

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.










[Via cutelittlefactory]