- Under: Tutorials,
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!
Want More Articles?
-
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 ...
-
School Is In Session – 100 Design Articles To Keep You Motivated : Part 3
Here comes part three in this five part series of 100 design articles to keep you motivated. The last two articles have shown some great performance - part two has gotten almost 15...
-
8 Adobe Air Applications That Will Rock Your World Wide Web
A new set of applications launched recently, or rather a new way to run applications that is, and it’s having quite an impact on the online community. This new line of platform i...
-
How To Master Photoshop In Just One Week Pt. 3
So you want to master Photoshop huh? You've come to the right place. This is the third and final installment of a three part series that will help you to master Photoshop in and ou...
-
30 Most Inspirational Light Web Designs
I've seen a lot of focus on dark designs in the last few months - including my own site redesign and Elite Platinum. However, I still believe that a lot of inspiration can still be...














Wow, thanks for the tutorial. I never knew I could do this before. Fun! Thanks again.
ummm..this is REALLY confusing and I can’t seem to get it right!
Is there a video tutorial of this???
ok now I’ve tryed and tryed and tryed but I NEVER GOT IT RIGHT!!
SoOo can you PLEASE make a video tutorial?!
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.
Thanks for the catch – I’ve fixed the article. I hope it helps!
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.
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!
The icon is very cool. Thanks for the great list…
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.
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.
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.
I have always liked the Apple themes. You have given me a cool and simple tutorial here. Thanks!
Great tutorial. Keep up with the good work. Thanks
The tutorial needs to be updated some. steps 12-15 do not work as you wrote them.
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
great tutorial
i will bookmark this post
[...] iTunes Icon in iPhone [...]
[...] ITunes Icon In IPhone [...]
[...] iTunes Icon in iPhone [...]
[...] iTunes Icon in iPhone [...]
[...] iTunes?? in iPhone [...]
[...] iTunes Icon in iPhone [...]
[...] iTunes Icon in iPhone [...]
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.
……
[...] 33. Design The iTunes Icon For The iPhone [...]
[...] 33. Design The iTunes Icon For The iPhone [...]
[...] 33. ???iPhone??iTunes?? [...]
[...] 33. Design The iTunes Icon For The iPhone [...]
[...] iTunes Icon in iPhone [...]
[...] 33. Design The iTunes Icon For The iPhone [...]
[...] 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, [...]
[...] Design the iTunes IconThis tutorial shows you how to create the iTunes icon. [...]
[...] iTunes Icon?? [...]
[...] Design the iTunes IconThis tutorial shows you how to create the iTunes icon. [...]
[...] 22. Design the iTunes Icon [...]
[...] iTunes Icon in iPhone [...]
[...] iTunes Icon in iPhone [...]
[...] iTunes Icon in iPhone [...]
[...] 2. Design The iTunes Icon For The iPhone And iPod Touch [...]
[...] Design the iTunes Icon This tutorial shows you how to create the iTunes icon. [...]
[...] iTunes?? in iPhone [...]