How to Create an iPhone Icon: Full Workflow

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.
Kitchen Range iTunes artwork

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: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

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.
Kitchen Range sketch

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

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

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

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

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

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

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

Take a gander at the layer structure of each burner.
08

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

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

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

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

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

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

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

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

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

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

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

Complete the pan supports with all the small sticks.
20

Here’s the 29px icon at 100%.
Kitchen Range 29px hand optimized

Conclusion

The icon is finished, take a looksie.
Kitchen Range finished icon

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?

Share this post with the world!

separator

38 Very Welcome Comments:

  • heartbreaker says:

    oh, yeaaaaah! THANK YOU so much. pixelart strts giving me drive ))

  • heartbreaker says:

    *Crispness is the result of manual optimization*

    ooooh… there is no miracle again!!! ))))

  • Ann says:

    Wow, thank you for the tutorial!
    I like to create a small icon at first, leaving detailed elaboration for a dessert, but your method are interesting too!
    P.S. Sorry for my bad English and thanks for music:-)

  • Nick says:

    Thanks a lot man, this tutorial is super well explained, not to mention design and detail oriented. Very nice job!!

  • Good work ! Well done. Thanks for sharing.

  • ppp says:

    very nice idea of the music! i´ll come back mor often! Thanks!

  • This is a helpful resource to create an iPhone icon from scratch using Photoshop’s vector shapes, layer styles and masks. Thanks for the sharing.

  • David says:

    When I put a Rounded Rectangle it DOESN’T DO ANYTHING WITH THE LAYER EFFECTS.

    All there is, is the background layer and a faintly lined Rounded Rectangle shape, that won’t let anything happen inside it, around it, OR WHATEVER.

    TERRIBLE TUTORIAL.

    • Andrea says:

      Double-click the layer in the Layers palette to open the Layer Style window. You will then find the tutorial isn’t too shabby.

  • incomen says:

    Great tutorial, I’ll try to do something similar. Thanks!

  • Awesome tutorial. Well explained & very easy steps which really nice to learn. Thanks for share this nice tutorial. :)

  • Great tutorial. Well explained and easy to understand. Thanks for the post.

  • KA says:

    This is very helpful. I am just wondering why you started at such a large size, I have created a vector image and will scale it down to the right size and export as a Jpeg into Photoshop to do the background parts of the icon. And are these the right sizes for the App Store on iTunes as well as the iPhone itself?

    • Andrea says:

      If you read the article carefully you will see that I designed the icons at the correct sizes required by Apple. Starting from the biggest image and progressively simplifying it while creating the smaller sizes is what works for me. The opposite workflow is also acceptable.
      It’s important to stress that each size has to be adjusted manually. Automatic resizing always gives blurry results.

  • great and impressive work you have done and also thanks to share this to all of us….

  • Sridhar Rajagopal says:

    Great tutorial! This gave me a new appreciation for the work it goes into icons and other graphic design. Thanks for sharing!

  • An Outstanding note-worthy blog I see here. Thanks….

  • Jax says:

    Nice tutorial. However it’s not necessary to create your icon with rounded edges unless you’re planning on using it elsewhere, as the iPhone actually applies the rounded edges (and reflective effect) before drawing it.

    • Andrea says:

      Thanks, I know that the rounded edges are added by iOS. The internal border of the icon, though, needs to be rounded already so I decided to round the edges, also for display purposes in the article.

  • Deepetch says:

    wonderful explanation, the icons look great and it conveys the message it created to say.Thanks for sharing.

  • Really great tutorial. I like it very much. Very very nice and informative tutorial. Specially helpful for design professional. Thanks for sharing such a wonderful creative work.

  • Отличный урок, спасибо! побольше бы таких…

  • Valentina says:

    Hi! I like you graphic works and thanks for very detailed tutorials!!!

    As for this one… I’ve created the icon in size 512×512 pixels. The result is grade! Thank for tutorial again :)))
    But now I should resize the icon to 57×57 pixels and I have a problem there :(
    I don’t understand the step “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.”
    Can you explain please, should I duplicate the layers with Smart Objects into the same document, which I’m going to resize? If yes, then when I’ll do that, the PSD document will just contain Smart Objects and their duplicates. And when I’ll resize the document to 57×57 pixels through “Image->Canvas size”, all layers will not fit on the size.
    Please advise!

    • Andrea says:

      Double click the Smart Object and it will open in a separate document with all the original layers. You can now drag them in your main document.

      • Valentina says:

        Andrea, thanks for replay!
        I’d some problems with smart object, but I’ve read about it in the internet and already finished this lesson :) The result is very nice! Thanks for sharing your experience! It was very very helpful for me.

  • Probably the best post I’ve comes across for a iPhone logo design!

  • Nick says:

    Thank you for this great tutorial!
    Another way to create an iphone icon is to use an online app editor, as an example SeattleClouds

  • Lizzybluts says:

    This is an awesome tutorial. Thanks for posting.

  • Steve says:

    Great tutorial. Very helpful! Just one question though, I know you save the icon that is 57px X 57px as “apple-touch-icon.png”. My question is, what do you save the one that is 27px X 27px?

    Thanks!!

  • Really an knowledgeable article that had helped me how to design the iphone app differently so that it attracts most of the users.

  • Amazing job is done here! I always wondered how to created beautiful icon for iPhone and here it is! Funny thing is with all retina buzz we need to start with 1024×1024 template these days!

    If you don’t mind to answer what would be the price for iPhone icon like this?
    I have some app that I want to refresh so it’s not just curiosity…

  • anon says:

    fugly icon.

  • Great work. Really a great and excellent tutorial. I like this very much. Thanks for sharing.

  • Thank you so much for your generosity in sharing this tutorial. I’m impressed with the detail and time it must have taken to share. As a self taught graphic designer I am very grateful for and enriched by the sharing of others’ talents, skill and experience.

    I recently designed an icon for a client and would certainly have benefited from reading this tutorial. I discovered the necessity of re-designing at each size point, but thought at the time I was being inefficient and should have found a way to produce a fully scalable icon. Good to know I was on the right track. I also started at the larger size as this suits my way of thinking/designing. I prefer to take away elements and size down, rather than add elements as you size up.

    Thanks again and much good karma to you.

  • A hard thing has been easier by you. Nice post and very helpful for us.

Speak Your Mind