Design The iTunes Icon For The iPhone And iPod Touch

This tutorial will show you how to effectively create the iTunes icon found on all iPhones and iPod Touches. This tutorial will walk you through the various filters and layer styles needed to create this very sleek icon.

Step 1

First, open up a new document – 125 x 125 pixels at a resolution of 72 DPI. Fill your canvas with black.

Step 2

On a new layer, grab the rounded rectangle tool. With the radius set to 9 and your foreground set to white, draw in a rounded rectangle. Name this layer “icon base.”

Step 3

Apply the following gradient overlay. The color on the left of the gradient should be #a800ff while the color on the right should be set at #8a00ff.

Step 4

Hold Command (Ctrl for PC) and click on the thumbnail for the layer “icon base.” This will select the icon.

Step 5

Create a new layer, with the “icon base” still selected. Fill in the selection with white. Go ahead and name this layer “starburst” because it is where we will be making the starburst effect.

Step 6

With the layer “starburst” selected, go to Filter>Noise>Add Noise. Apply the following settings:

Step 7

Hit Command (Ctrl) + D to deselect the starburst layer. Go to Filter>Blur>Radial Blur and apply the following settings:

Step 8

This is what your image should look like thus far.

Step 9

Hold Command (Ctrl for PC) and click on the thumbnail for the layer “starburst.” This will select the burst you have. Now, hit Command+Shift+I to invert your selection. Hit delete to remove the extra starburst.

Step 10

Lower the opacity to 41%. Your icon should now look like this:

Step 11

On the “starburst” layer, add a layer mask. With a Black to White gradient, and the gradient set as Radial, drag from the center of the icon to the edge. This will clear out the starburst effect from the middle of the image.

Step 12

Create a new layer. Name it “Gloss.” Grab the Ellipse Tool and with your foreground as white, draw this shape:

Step 13

Hold Command (Ctrl for PC) and click on the thumbnail for the layer “gloss.” This will select the gloss you have. Now, hit Command+I to invert your selection. Hit delete to remove the extra gloss. Lower the opacity of this layer to 73%.

Step 14

Add a layer mask to the “gloss” layer. With a black to white gradient, drag from the middle of the icon to about the middle of the gloss. It should lower the opacity of the bottom half giving you something like this:

Step 15

I hope you named your layers for this one! Command+Click the thumbnail for “gloss.” Press Command+I. Then, Command+Option+Shift+Click the thumbnail for “icon base.” You should have a selection like this:

Step 16

Create a new layer and name it “shadow. Now, using a black to transparent gradient, drag your mouse like this while holding the Shift key:

Step 17

Lower the opacity of your “shadow” layer to 53%.

Step 18

Next, go ahead and grab your brush tool. Set the diameter to 100 and the hardness to 0. Create a new layer titled “bottom glow.” With white as your foreground color, simply make one brush right at the bottom of the icon.

Step 19

Crop out the brush from your “bottom glow” layer that is not in the icon. Lower the opacity of “bottom glow” to 45%.

Step 20

Now we are done with the overall icon. Next, we just need to add in the ring and the arrow. To start the ring, grab the elliptical marquee tool. Holding down the shift key, draw out a selection like this:

Step 21

Create a new layer titled “ring.” Fill in the selection you have with white. Next, go to the top menu and choose Select>Modify>Contract. Contract your selection by 5 pixels and hit delete.

Step 22

Apply the following layer style:

Step 23

Create a new layer titled “arrow.” Choose the arrow in your custom shapes pallet (U) and draw an arrow like this:

Step 24

Press Command+T to enter transform mode. Right click and choose “Rotate 90 Degrees CW.”

Step 25

Copy and paste the layer style from your “ring” layer onto your “arrow” layer. Your icon should look like this. Congratulations! You’re finished!

Extra

Have some fun messing around with different opacities, layer styles, colors, etc. There are literally endless possibilities.

Got lost along the way? Download the PSD file for free!

Premium WordPress Themes
Starting at $49.95

  • This post was written by Brian
  • Website: http://elitebydesign.com
  • About: Brian is a blogger and web designer at Elite By Design. He has been blogging for over a year providing quality design-related articles for the community.
41 Comments RSS
  1. Reply beckyNo Gravatar said on April 3rd, 2008

    Wow, thanks for the tutorial. I never knew I could do this before. Fun! Thanks again.

  2. Reply samarNo Gravatar said on July 6th, 2008

    ummm..this is REALLY confusing and I can’t seem to get it right!

    Is there a video tutorial of this???

  3. Reply samarNo Gravatar said on July 6th, 2008

    ok now I’ve tryed and tryed and tryed but I NEVER GOT IT RIGHT!!

    SoOo can you PLEASE make a video tutorial?!

  4. Reply WatabouNo Gravatar said on August 8th, 2008

    For the people who have trouble with this, the author, I think made a mistake when he says hit Command+I to invert the selection. This is incorrect. The correct shortcut for this is Shift+Command+I. This will invert your selection.

  5. Reply BrianNo Gravatar said on August 9th, 2008

    Thanks for the catch – I’ve fixed the article. I hope it helps!

  6. Reply umesh daiyaNo Gravatar said on September 11th, 2008

    wow really its to much helpful for me. and you given process is very easy. i follow up as you guide and i will done this. really fantastic.
    thanks.

  7. Reply iTreeNo Gravatar said on October 9th, 2008

    Can you please explain steps 13-15? I have tried doing what you wrote but it just ends with uselessness. Please rewrite it so us PC users can understand too!

  8. Reply SEO BeratungNo Gravatar said on October 16th, 2008

    The icon is very cool. Thanks for the great list…

  9. Reply neroNo Gravatar said on December 23rd, 2008

    i have a question about step 12&13.
    how can you delete the gloss only on the starburst, i can only delete it and than its realy gone, cant do anything to it.

  10. Reply KeylimeNo Gravatar said on February 12th, 2009

    Step 13 didn’t work for me as written using CS3, here is step 13 again

    Right click and choose to rasterize the “gloss” layer, control click the “icon base” layer, then inverse the selection. Then select the “gloss” layer and press delete.

  11. Reply spriggigNo Gravatar said on February 15th, 2009

    If you want to make an actual iPhone/Touch icon, the correct spec’s are
    57X57 pixels
    24 bit RGB
    PNG file format
    File name “apple-touch-icon.png”
    Flatten the image and place the icon in the root of your website.

    Also, the iPhone/Touch OS adds the rounded corners and highlight effect automagically, so there’s no reason to do that if you are making an actual icon and not simply duplicating the look.

  12. Reply ebook cover designerNo Gravatar said on April 29th, 2009

    I have always liked the Apple themes. You have given me a cool and simple tutorial here. Thanks!

  13. Reply Doois TecnologiaNo Gravatar said on May 12th, 2009

    Great tutorial. Keep up with the good work. Thanks

  14. Reply GorillaBoyNo Gravatar said on May 18th, 2009

    The tutorial needs to be updated some. steps 12-15 do not work as you wrote them.

  15. Reply GorillaBoyNo Gravatar said on May 18th, 2009

    Keylime you are great! What you said fixes the problem. Once again:

    “Step 13 didn’t work for me as written using CS3, here is step 13 again
    Right click and choose to rasterize the “gloss” layer, control click the “icon base” layer, then inverse the selection. Then select the “gloss” layer and press delete.” – Keylime

  16. Reply om ipitNo Gravatar said on June 23rd, 2009

    great tutorial
    i will bookmark this post

  17. Trackback: 40+ Hand-picked Photoshop Icon Designs [Photoshop Tutorials] posted on August 1st, 2008

    [...] iTunes Icon in iPhone [...]

  18. Trackback: fikissimo.it » Blog Archive » Più di 40 tutorial per fare le icone da soli posted on August 1st, 2008

    [...] ITunes Icon In IPhone [...]

  19. Trackback: Photoshop’ ta Görsel ikon Haz?rlama Dersleri +40 | EgitimTUBE posted on August 2nd, 2008

    [...] iTunes Icon in iPhone [...]

  20. Trackback: Photoshop ile el yap?m? icon dizaynlar? | Sadece Bir Blog posted on August 2nd, 2008

    [...] iTunes Icon in iPhone [...]

  21. Trackback: 40+ Photoshop????????? | ???? posted on August 4th, 2008

    [...] iTunes?? in iPhone [...]

  22. Trackback: Photoshop’ ta Görsel ikon Haz?rlama Dersleri +40 | posted on August 16th, 2008

    [...] iTunes Icon in iPhone [...]

  23. Trackback: Photoshop Tutorials - 40+ Photoshop Icon Designs | Make Money Blogging Experiment posted on September 1st, 2008

    [...] iTunes Icon in iPhone [...]

  24. Trackback: AllTuts - Photoshop Tutorials, Illustrator Tutorials, Free Photoshop Brushes and more posted on October 5th, 2008

    Design the iTunes Icon for the iPhone and iPod Touch…

    Learn how to effectively create the iTunes icon found on all iPhones and iPod Touches. This tutorial will walk you through the various filters and layer styles needed to create this very sleek icon.
    ……

  25. Trackback: 50 Excellent Icon Design Tutorials posted on February 11th, 2009

    [...] 33. Design The iTunes Icon For The iPhone [...]

  26. Trackback: » Blog Archive » 50 Excellent Icon Design Tutorials posted on February 12th, 2009

    [...] 33. Design The iTunes Icon For The iPhone [...]

  27. Trackback: 50?????????? : ??????? - Internet Marketing posted on February 13th, 2009

    [...] 33. ???iPhone??iTunes?? [...]

  28. Trackback: 50 Icon Design Tutorials « (kurven) Design posted on February 17th, 2009

    [...] 33. Design The iTunes Icon For The iPhone [...]

  29. Trackback: Online Tips For Tech User » 40+ Hand-picked Photoshop Icon Designs [Photoshop Tutorials] posted on February 27th, 2009

    [...] iTunes Icon in iPhone [...]

  30. Trackback: 50 Excellent Icon Design Tutorials | SulVision posted on March 8th, 2009

    [...] 33. Design The iTunes Icon For The iPhone [...]

  31. Trackback: Icon designing at Under The Bridge posted on March 14th, 2009

    [...] particular, we’d like to single out #33, “Design The iTunes Icon For The iPhone And iPod Touch” as being remarkably apropos in case you happen to want something evocative of Apple style, [...]

  32. Trackback: 45 Apple-Inspired Photoshop Tutorials | Tutorials | Smashing Magazine posted on March 25th, 2009

    [...] Design the iTunes IconThis tutorial shows you how to create the iTunes icon. [...]

  33. Trackback: 45????????photoshop?? posted on March 25th, 2009

    [...] iTunes Icon?? [...]

  34. Trackback: 45 Apple-Inspired Photoshop Tutorials | The Scripts Zone posted on March 27th, 2009

    [...] Design the iTunes IconThis tutorial shows you how to create the iTunes icon. [...]

  35. Trackback: 40 Apple-themed Photoshop Tutorials | Designurimagination Blog - Let Your Imagination Fly posted on April 26th, 2009

    [...] 22. Design the iTunes Icon [...]

  36. Trackback: 40+ Hand-picked Photoshop Icon Designs | Design-Tut+ posted on May 1st, 2009

    [...] iTunes Icon in iPhone [...]

  37. Trackback: Hand-picked Photoshop Icon Designs [Photoshop Tutorials] « Online Free Applications Software Tips Tools Wallpapers posted on May 6th, 2009

    [...] iTunes Icon in iPhone [...]

  38. Trackback: Beautiful Icon Designs | Delliblog posted on May 12th, 2009

    [...] iTunes Icon in iPhone [...]

  39. Trackback: 7 Best Web Design Resources For Beginners posted on May 18th, 2009

    [...] 2. Design The iTunes Icon For The iPhone And iPod Touch [...]

  40. Trackback: Apple-Inspired Photoshop Tutorials | Themeflash : The Better Resources For All Your Web Needs posted on May 23rd, 2009

    [...] Design the iTunes Icon This tutorial shows you how to create the iTunes icon. [...]

  41. Trackback: 40+ Photoshop????????? | Zeroun 'S Blog posted on June 10th, 2009

    [...] iTunes?? in iPhone [...]

What do you think?

N/A Subscribers
Search
Search Form
  • Freebie – Kaleidoscope Circles Photoshop Brush Pack
    Freebie – Kaleidoscope Circles Photoshop Brush Pack

    Download the Kaleidoscope Circles Brush Pack Please do not repackage, redistribute or direct link to the download. If you would like to share these textures please link to this ...

  • And THIS Is Why You Don’t Steal Online Content
    And THIS Is Why You Don’t Steal Online Content

    Update: The site that was stealing content has removed their post, although I did not get any sort of reply email. And to the people that were emailing me from Web Design Tuts with...

  • Launching Web Design Tuts
    Launching Web Design Tuts

    Well I knew it couldn't stay a secret forever. Today, after writing a 6 hour, 2,000 word Photoshop tutorial, I went ahead and did an early-open for Web Design Tuts. I rolled ou...

  • Artist Allure: A Vitaly S Alexius Showcase
    Artist Allure: A Vitaly S Alexius Showcase

    Vitaly S Alexius is an innovative graphic artist with a style all of his own, and of his own making. Born in Novokuznetsk, located on the Tom River in south central Siberian Russia...

  • 10 Best Free WordPress Themes You Haven’t Seen
    10 Best Free WordPress Themes You Haven’t Seen

    When it comes to blogging and online content management systems, one name is spoken more often than any other: WordPress. This amazingly user-friendly, endlessly-customizable frame...

More? Try These Posts...