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!
becky
April 3, 2008 at 3:37 pm
Wow, thanks for the tutorial. I never knew I could do this before. Fun! Thanks again.
samar
July 6, 2008 at 12:27 pm
ummm..this is REALLY confusing and I can’t seem to get it right!
Is there a video tutorial of this???
samar
July 6, 2008 at 1:32 pm
ok now I’ve tryed and tryed and tryed but I NEVER GOT IT RIGHT!!
SoOo can you PLEASE make a video tutorial?!
Watabou
August 8, 2008 at 10:42 pm
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.
Brian
August 9, 2008 at 12:06 am
Thanks for the catch – I’ve fixed the article. I hope it helps!
umesh daiya
September 11, 2008 at 7:13 am
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.
iTree
October 9, 2008 at 10:16 am
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!
SEO Beratung
October 16, 2008 at 8:40 am
The icon is very cool. Thanks for the great list…
nero
December 23, 2008 at 4:50 am
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.
Keylime
February 12, 2009 at 6:43 pm
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.
Silver Surfer
August 15, 2010 at 6:48 am
this is the right step..,
really by following the article i thought i did some mistake somewhere..,
to authors: can you please fix your article..,
really it’s a great tutorial but at step 12 it just frustating cause it’s not complete instruction..,
thanks,
Carlos E. Quevedo
September 12, 2011 at 9:52 pm
Keylime I had done your way step # 13 and it had worked for me I had use PCS5.
Thanks you man, it’s a pity that this beautiful and highly useful can have that mistake and haven’t been corrected yet.
Thanks a lot!
spriggig
February 15, 2009 at 3:58 pm
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.
ebook cover designer
April 29, 2009 at 12:08 am
I have always liked the Apple themes. You have given me a cool and simple tutorial here. Thanks!
Doois Tecnologia
May 12, 2009 at 11:32 am
Great tutorial. Keep up with the good work. Thanks
GorillaBoy
May 18, 2009 at 10:27 am
The tutorial needs to be updated some. steps 12-15 do not work as you wrote them.
GorillaBoy
May 18, 2009 at 10:29 am
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
om ipit
June 23, 2009 at 8:35 am
great tutorial
i will bookmark this post
Lorwynne
July 26, 2009 at 9:07 pm
Great tutorial.
Tom
August 13, 2009 at 9:28 am
idiot…..explain step 12 better or dont play goodie two shoes and post confusing tutorials to get web traffic …….. idiot
videoizle
January 8, 2010 at 10:32 am
Great tutorial. Keep up with the good work. Thanks
Jan
May 15, 2010 at 5:40 am
Hey, I like your tutorial, but I don’t understand step 15. I am PC user. It will be realy very helpful if you make a video and post link here.
(Sorry for my bad english)
Carlos E. Quevedo
September 12, 2011 at 10:13 pm
Now, I am stuck in step # 15, the steps are for Apple user and not for PC users. As I said before make the right corrections.
Thanks
austin web designer
June 22, 2010 at 1:12 pm
Thanks for the tutorial was looking for it all over and finally found one that is simple an easy to follow.
Ray
June 28, 2010 at 4:39 pm
Hi, Great tutorial, I managed to get to step 10, but it seems that something is not well explained pass step 10 since I don’t seem to get the right sequence as mentioned.
Can you be a little more descriptive, I’m not so familiar with Photoshop, I’m trying to learn but something is missing.
Thanks for your time.
Lolzer cominkey
July 9, 2010 at 7:58 pm
Thank you so much, now i can make my own icons.
Paul Amoah
September 7, 2010 at 5:44 am
I got lost in step 13. But it is a good tut.
Black Spider
September 22, 2010 at 4:47 am
WooW Nice Tutorial This I’m looking for.
SDAFD
October 14, 2010 at 2:54 am
Another bullshit tutorial with confusing steps and incomplete instructions.
Blow me for wasting my time. Stuck at step 12. By deleting the gloss, I just have pink showing. It’s not like the picture.
Crispijn
October 18, 2010 at 2:16 pm
I’m looking for this sunburst icon tutorial but than for illustrator. Do you know where I can find this?
Noize_man
October 27, 2010 at 1:34 am
I found some errors in this tut. Its step13. Load selection by ctrl+click on SHAPE thumbnail, then CTRL+SHIFT+I, choose GLOSS layer and press delete. Maybe its only my way to do this =D
charlie
November 5, 2010 at 10:43 am
very well done!!!! thanks, it was the tutorial i was waiting for.but the step 13-15 are a bit messy is very helpful.
Bradford Bellina
December 30, 2010 at 6:48 pm
Hi – really good web site you have created. I had a blast going through this posting. I had an urge to write a comment to tell you that the look and feel of this site is very aesthetically delightful. I used to be a website designer, now I am a copy editor in chief for a merchandising firm. I have always enjoyed playing with information processing systems and am attempting to learn website building in my spare time (which there is never enough of lol).
Kyrre Johansson
January 24, 2011 at 8:47 am
Guys
This how to do it (PC)
Step 13
Hold Ctrl and click on the thumbnail for the layer “icon base” This will select the shape with rounded corners. Select the layer “gloss” and hit CTRL+I to invert your selection. Hit delete to remove the extra gloss. Lower the opacity of this layer to 73%.
Hope it helps.
Kyrre Johansson
January 24, 2011 at 9:03 am
Sorry – copy/paste is never a good thing to do
You don’t want to invert the image, but the selection alone. To do that, use CTRL+SHIFT+I. Now you have inverted the selection and you can delete the left over from the gloss layer.
idris
March 5, 2011 at 11:28 pm
excellent tutorial
thank you for sharing
Retail Designer Brisbane
April 26, 2011 at 11:33 am
Hey im a Graphic Designer & Retail Desinger from austrailia,this tutorial will help me in my works.
I am checking your other works too..cheers!
I appreciate your work dude!
Maytag Repair Phoenix
May 23, 2011 at 8:42 am
Can I just say what a relief to seek out http://www.saveonappliancerepair.netsomeone who truly knows what theyre talking about on the internet. You definitely know learn how to bring a problem to mild and make it important. Extra folks need to read this and perceive this facet of the story. I cant imagine youre not more popular because you undoubtedly have the gift.
8x8 gazebo
August 8, 2011 at 3:56 pm
I really relate to that post. Thanks for the info.
Tammy Mcclintick
August 24, 2011 at 6:02 pm
A formidable look at, We using this into the latest associate who had previously been conducting a bit studies on this subject. The particular husband in actual fact bought us breakfast time since I uncovered these with regard to the man.. grin. Now i am able to reword that will actually: Thnx for the cope with! This really is why Thnkx just for having to pay enough time to discuss this informational, I believe enthusiastically in regards to this aside from love browsing discover more with regards to question. Probably, simply because grow experience, do you spirit modernizing yuor web blog site with an increase of facts? It’s actually tremendously the top choice for personally. Significant thumbs all the way up for that short article!. Check out me at Bedspreads And Drapes
Whitney Steinhauser
September 4, 2011 at 12:40 pm
Hey, you used to write great, but the last several posts have been kinda boring? I miss your super writings. Past few posts are just a little bit out of track! come on!
Lingerie Sets
September 10, 2011 at 9:05 am
Fantastic ¡V I should certainly pronounce, impressed with your internet site. I had no trouble navigating by means of all tabs as effectively as related info ended up being truly simple to do to access. I recently located what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for people who add forums or anything, internet site theme . a tones way for your client to communicate. Superb task..
Carlos E. Quevedo
September 11, 2011 at 11:13 pm
I will like to finish this tutorial but I’M lost after step 14, please help.
Thanks
Carlos E. Quevedo
September 11, 2011 at 11:18 pm
I’M lost after step 12, sorry.
I like the product but I would like to do it myself, some help, please will be appreciated.
Thanks
Carlos E. Quevedo
September 12, 2011 at 11:22 pm
Here, http://www.youtube.com/watch?v=Z4CwZnkeVSs you have the same tutorial, it’s a video and works.
Have fun!
Matthew Youket
September 15, 2011 at 7:41 am
Das ist eines tolle Seite!
iphone 4 lens
October 10, 2011 at 1:35 am
I do not even understand how I ended up right here, but I believed this submit was wonderful. I do not know who you are but surely you are gonna a famous blogger should you aren’t currently
Cheers!
Spitfire
November 6, 2011 at 9:47 am
It worked perfectly, thank you.
Although it could be explained with a little bit more detail.
David Davies
February 23, 2012 at 7:50 am
I’m afraid it doesn’t work for me. I can’t get it to delete the excess gloss without it removing the entire layer. A shame as it was a pretty good article up till then.
Mr. Sanchez
March 14, 2012 at 3:24 am
Stuck at Step 15..
Using a Mac but the shortcuts don’t work well.. Help?
Amar Ilindra
March 26, 2012 at 9:55 am
Amazing and Simple Method
Really Loved it
elektrische step kopen
April 5, 2012 at 6:39 pm
I arrived listed here in order to learn about one thing completely diverse than the things I might. I appreciate to absorb as much different data because conceivable, this is the premier aspect concerning daily life. You include a website likewise, click on the connect to come on by way of as well as see the things you become accessing.
ike
April 25, 2012 at 3:35 pm
Just desire to say your article is as astounding. The clearness in your post is simply excellent and i
could assume you are an expert on this subject. Well with
your permission allow me to grab your feed to keep up
to date with forthcoming post. Thanks a million and please continue the rewarding
work.