Design The iTunes Icon For The iPhone And iPod Touch

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.

Design The iTunes Icon For The iPhone And iPod Touch

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

Design The iTunes Icon For The iPhone And iPod Touch

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.

Design The iTunes Icon For The iPhone And iPod Touch

Step 4

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

Design The iTunes Icon For The iPhone And iPod Touch

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.

Design The iTunes Icon For The iPhone And iPod Touch

Step 6

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

Design The iTunes Icon For The iPhone And iPod Touch

Step 7

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

Design The iTunes Icon For The iPhone And iPod Touch

Step 8

This is what your image should look like thus far.

Design The iTunes Icon For The iPhone And iPod Touch

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.

Design The iTunes Icon For The iPhone And iPod Touch

Step 10

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

Design The iTunes Icon For The iPhone And iPod Touch

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.

Design The iTunes Icon For The iPhone And iPod Touch

Step 12

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

Design The iTunes Icon For The iPhone And iPod Touch

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

Design The iTunes Icon For The iPhone And iPod Touch

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:

Design The iTunes Icon For The iPhone And iPod Touch

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:

Design The iTunes Icon For The iPhone And iPod Touch

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:

Design The iTunes Icon For The iPhone And iPod Touch

Step 17

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

Design The iTunes Icon For The iPhone And iPod Touch

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.

Design The iTunes Icon For The iPhone And iPod Touch

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

Design The iTunes Icon For The iPhone And iPod Touch

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:

Design The iTunes Icon For The iPhone And iPod Touch

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.

Design The iTunes Icon For The iPhone And iPod Touch

Step 22

Apply the following layer style:

Design The iTunes Icon For The iPhone And iPod Touch

Step 23

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

Design The iTunes Icon For The iPhone And iPod Touch

Step 24

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

Design The iTunes Icon For The iPhone And iPod Touch

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!

Design The iTunes Icon For The iPhone And iPod Touch

Extra

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

Design The iTunes Icon For The iPhone And iPod Touch

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

56 responses.

(Add yours)

  1. becky

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

  2. samar

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

    Is there a video tutorial of this???

  3. samar

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

    SoOo can you PLEASE make a video tutorial?!

  4. Watabou

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

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

  6. umesh daiya

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

    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. SEO Beratung

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

  9. nero

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

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

    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. ebook cover designer

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

  13. Doois Tecnologia

    Great tutorial. Keep up with the good work. Thanks

  14. GorillaBoy

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

  15. GorillaBoy

    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. om ipit

    great tutorial
    i will bookmark this post

  17. Lorwynne

    Great tutorial.

  18. Tom

    idiot…..explain step 12 better or dont play goodie two shoes and post confusing tutorials to get web traffic …….. idiot

  19. videoizle

    Great tutorial. Keep up with the good work. Thanks

Trackbacks

  1. 40+ Hand-picked Photoshop Icon Designs [Photoshop Tutorials]

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

  2. fikissimo.it » Blog Archive » Più di 40 tutorial per fare le icone da soli

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

  3. Photoshop’ ta Görsel ikon Haz?rlama Dersleri +40 | EgitimTUBE

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

  4. Photoshop ile el yap?m? icon dizaynlar? | Sadece Bir Blog

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

  5. 40+ Photoshop????????? | ????

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

  6. Photoshop’ ta Görsel ikon Haz?rlama Dersleri +40 |

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

  7. Photoshop Tutorials - 40+ Photoshop Icon Designs | Make Money Blogging Experiment

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

  8. AllTuts - Photoshop Tutorials, Illustrator Tutorials, Free Photoshop Brushes and more

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

  9. 50 Excellent Icon Design Tutorials

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

  10. » Blog Archive » 50 Excellent Icon Design Tutorials

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

  11. 50?????????? : ??????? - Internet Marketing

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

  12. 50 Icon Design Tutorials « (kurven) Design

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

  13. Online Tips For Tech User » 40+ Hand-picked Photoshop Icon Designs [Photoshop Tutorials]

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

  14. 50 Excellent Icon Design Tutorials | SulVision

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

  15. Icon designing at Under The Bridge

    [...] 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, [...]

  16. 45 Apple-Inspired Photoshop Tutorials | Tutorials | Smashing Magazine

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

  17. 45????????photoshop??

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

  18. 45 Apple-Inspired Photoshop Tutorials | The Scripts Zone

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

  19. 40 Apple-themed Photoshop Tutorials | Designurimagination Blog - Let Your Imagination Fly

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

  20. 40+ Hand-picked Photoshop Icon Designs | Design-Tut+

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

  21. Hand-picked Photoshop Icon Designs [Photoshop Tutorials] « Online Free Applications Software Tips Tools Wallpapers

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

  22. Beautiful Icon Designs | Delliblog

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

  23. 7 Best Web Design Resources For Beginners

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

  24. Apple-Inspired Photoshop Tutorials | Themeflash : The Better Resources For All Your Web Needs

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

  25. 40+ Photoshop????????? | Zeroun 'S Blog

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

  26. iPhone Forum, News, Themes, Wallpapers, Ringtones, Software Applications & More! : MacCiti

    [...] layer styles, colors, etc. There are literally endless possibilities. Download iTunes Icon PSD Source [...]

  27. 40+ Hand-picked Photoshop Icon Designs « Resources For Designers

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

  28. 16 tutorials for creating highly detail icon | Web Design Byte

    [...] 10. Design the iTunes Icon for the iPhone in Photoshop [...]

  29. 16 tutorials for creating highly detailed icons | Web Design Byte

    [...] 10. Design the iTunes Icon for the iPhone in Photoshop [...]

  30. Apple inspired Photoshop Tutorials « Richworks Inc.

    [...] GUI for Leopard shows an “inset” effect for text, along with a new chrome finish for windows. Design the iPhine and iPod Touch Icons This tutorial shows you how to create the iPhone and iPod touch [...]

  31. 20 Apple-inspired Tutorials for Practice Web Designers

    [...] Design The iTunes Icon – Photoshop tutorial [...]

  32. 40+ Hand-picked Photoshop Icon Designs | 9Tricks.Com - Tips - Tricks - Tutorials

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

  33. photoshop ikon al??t?rmalar? | Faydal?Web | Internetin Faydal? Yüzü

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

  34. 31 Apple Beautiful Inspired Photoshop Tutorials | Afif Fattouh - Web Specialist

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

  35. 30 tutoriaux Photoshop spécial Apple «

    [...] 15. iTunes Icon [...]

  36. CSS: 31 Apple Inspired Beautiful Photoshop Tutorials

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

  37. 50 Excelentes Tutoriais de Design de Ícones

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

  • koto no ito
  • back pains and brown discharge
  • fragonard fragrances paris france
  • artlend.com
  • acorn squash reciepe
  • aol turns off automatically
  • muenchen.de
  • fairhaven apartments nesconset ny
  • deep gnome
  • bend dies doug email inquiring
  • can hormones give vertigo symtoms
  • alpha gamma rho crest
  • 5ths tuned guitars
  • fluid ounces pint
  • christian heritage school revealed
  • chicago cubs lanyard
  • apartmentsrus.com
  • boys briefs wholesale
  • trenmootom.com
  • just outrageous events
  • education profession
  • 3 inch sanding disc
  • mini vacume
  • hornywhores.net
  • itt leopold
  • 8125 will not access text messages
  • alejandro estrada
  • griffin and gallagher attorney palos hills
  • alan shook and charlottesville
  • capitalism 2 serials
  • 50 vertical jump
  • friend truman
  • genesis helsinki review
  • 12x12 paper storage racks
  • 14ft sea king semi v boat
  • amt back up one
  • mark tinley
  • james landon florida
  • dulce de leche crockpot
  • wholesalesalon.com
  • drivers for tangent cy27 laptop
  • shania twain bag balm
  • brick pavers with mortar
  • anxiety and fear of death
  • ballroom dance gown
  • okay industries
  • 3 month us treasury bill rates
  • canyon skyway
  • hunan king
  • blackmoore roger goo to watanay
  • peritoneal dermatitis treatment and prevention
  • barbara rafferty ella cotter
  • 2007 iowa softball districts results
  • 1920 womens sufferage
  • appeal letters for centennial campaign
  • 409 garfield st burlington wisconsin 53105
  • charles castro guilty
  • dueling dragons minatuares
  • kheigl.com
  • codebreaker codes for quantum of solace
  • 180 harvester drive burr ridge il
  • flax oil or flaxseed oil
  • jennifer plimpton zeta
  • joe.com
  • byron strange
  • centerline forged wheels
  • 1999 gmc dunali reliability
  • chinese chang pai shan captain
  • modernhomefurnishingsllc.com
  • fluke 199c using
  • michael d stewart sr stapleton ga
  • biomonitoring dioxin grass methodology
  • 1000w portable generators
  • 1970 c10 chev information track with
  • hotlinkie.com
  • moby ferry sardinia
  • cac krazy legs
  • herkimer diamond crystal metaphysical properties
  • pedersentoyota.com
  • nancy pelosi hairstyle
  • download size updates show amyuni realtek
  • shelbycs.org
  • 19th century european nationalism
  • bestart.com
  • gilmer county football
  • bob estrada
  • black oak curse
  • 71111 bossier city la contact
  • dascha vale
  • acting talent managers in las vegas
  • computer training institute pune
  • 2 volt direct current motor
  • discontinued melamine dinnerware
  • asx listing rules foreign assets
  • crawling dyslexia
  • gene rouse usmcr
  • golds gym in new bern nc
  • 21 wells st plattsburgh
  • ben sauder shirley rabbi
  • 15 sided figure
  • are diet supplements good
  • adding entries to moblock
  • hairdressing training
  • bravo silva lyrics
  • choruses from hellas shelley
  • marianna fl prison industries
  • bird sleeve puppets
  • broker dealer high payout
  • amanda kelly the colony texas
  • iriver h10 20gb
  • bill reese wa
  • exotic male dancer whipped cream women
  • leech lake uprising
  • nsw tafe teachers pay scale
  • amanda rendall page 3 idol 2003
  • cynthia linn spratt
  • avril elizabeth home judgement
  • education reforms in 1800-1820
  • playcast.ru
  • deviated septum polyps nasal cavity
  • feliz ano novo natal para
  • 1990 ford truck firing order
  • gold coast hotel las veg
  • fed ex silverdale
  • caffe itri
  • 1930s reproduction watch
  • 10,000 uf capacitor
  • agatha christie deutsch
  • alcohol rheumatoid arthritis
  • arthur court casserole
  • veronika collegeteencreamers video
  • charles highschool prank
  • patientconnection.org
  • framed warren kimble prints
  • diagonal method
  • 1977 pulitzer prize awarding for drama
  • mindy heck vermont
  • australian made sporting hunting ammunition
  • ciao bella walkthrough
  • harcoboe.com
  • angels from the realms of glory
  • ati radeon x600 xt firmware download
  • skousen benjamin franklin autobiography mark sparknotes
  • challenging inappropriate conduct in sport
  • bmw motorcycle flapper valve
  • ptc enterprises
  • rvsolarelectric.com
  • abyss rite
  • 1 g ipod touch casae
  • acadian curtains
  • 132 e orange grove pasadena
  • andy williams wonderful time
  • free autographs
  • 1715 fleet 4 escudo gold coin
  • bonaire kite surfing
  • alana hudgins foley al
  • serge desrosiers usa
  • 48075 southfield mi contact
  • odysseus temptations
  • augen prizm
  • club musik
  • discuss reduce cycle time purchasing
  • medcomedicare.com
  • acer aspire 1872 power supply
  • hellohentai.com
  • children of ethel rosenburg
  • john timberland lighting
  • a a allen ministries
  • fifties and sixties music
  • 12 wine glasses
  • arizona mills mall tempe az
  • a dot
  • enterprise car renta discount code
  • alcan packaging asheville
  • classy clothing tips
  • ibeautyny.com
  • download merry christmas from the family
  • acid methanol bound glycerin methanol
  • april 5th birthdays
  • free wide open vigina pics
  • cross country educational consultancy
  • dan tobin teamster
  • dr ann wynne
  • canandaigua marinas
  • behavioral analytics communications
  • 3 stooges sound wave
  • d hud
  • clarence thomas establishment clause
  • 8 pin pci express wiring
  • activities le petit prince
  • lincraft.com.au
  • information systems and ebusiness management
  • mccullough weedeater directions
  • floydrose.com
  • hugh morley melbourne
  • anime furnishing or blanket or linen
  • 1920 focus questions
  • 1958 wi f5 tornados
  • .177 replacement airgun barrel
  • army diversity
  • alalinc.net
  • camas antique mall
  • jojo banawa
  • advent 5485 user manual
  • common fractions decimals percentages conversion worksheets
  • gunter annex
  • 12 increased by a number
  • mildred collins dance
  • 401k withdraw consequences
  • 1960 s inspired wedding gowns
  • byerlys marinade
  • batman begin batman in flight statue
  • osi layer description
  • dssracing.com
  • aerco water heaters
  • guatemalan baby adoption
  • e-passports.com
  • alan 9001 cb
  • mayweather delahoya fight
  • bengal siamese cross kittens
  • eulogy speaches
  • americas-best.com
  • 1st century palestine map
  • caf fingerprints definition
  • allyson lance
  • alladin lantern
  • harris teeter location
  • thehotjoints.com
  • advance wars dual strike black cannons
  • arrest kristopher collins uxbridge
  • 11th battalion royal worcester regiment 1914
  • german shepards names
  • bob dylan songbook
  • arawak cove club eleuthera
  • diana landon
  • andy lawson music
  • ayrton shunt
  • aishwarya wearing nothing
  • cliffs of mover
  • epsom 680 driver
  • a7n8x-e sata
  • hiawatha seaway
  • how to yoyo
  • lethal neutron head exposure
  • cpapdiscount.com
  • girl with yoda tattoo
  • jacuzzi male sterilization
  • activex in locked down environment
  • ramonabowl.com
  • 1776 l wichern black powder gun
  • excercises for intensive body toning
  • ape financial harrassing collection calls
  • add background to work document
  • celebrations bensalem pa
  • dealer sues keystone rv manufacturer
  • arizona pavers
  • carl xvi wiki
  • bimini twist in braided line
  • airtel plaza van nuys
  • actiontheatre.org
  • beth am
  • 3d planet textures
  • bogen 3066 parts
  • monkshood toxin
  • crazy igor used games
  • alcoholrehabilitation denmark
  • idea2invent.com
  • ancestry by dna
  • casa fresa in puerto vallarta
  • click 2 enter
  • 95.9 music playlist
  • article on inspirational films
  • cipher drug eluting stent
  • 1992 integra wiring diagrams
  • addiction to antidepressants
  • bush hog llc ownership
  • furniturestoreblog.com
  • milwaukee stormwater manual
  • alliance city cemetary
  • abdominal adhesions treatment
  • ballbustingblog.com
  • dungeons and dragons ultima online
  • aromatique the smell of christmas
  • andertons.co.uk
  • amway employment
  • config btvision
  • brooks glycerin
  • cher the farewell tour umd
  • alphabet recognition worksheet
  • ive 1 care
  • pharma voyages
  • food borne water borne enteric
  • battleship 3 herbicide
  • dvb ofdm channel estimation carrier lock
  • convert ebooks to text format
  • benny clark owensboro kentucky
  • arabia plates
  • all brand laundry detergent
  • 20007-2008 rymans league fixtures
  • compatibility virgo virgo
  • english names with italian equivalents
  • claritin for skin allergy in cats
  • clarion buffet ocean city
  • damp proofing paint
  • free storys vouyerism