Headphone Icon Which Aid on Music Related Creation

Doing something for the music industry or thinking of how to create a music related icon? This tutorial will teach how to create a cool and nice headphone graphic which can be use as an icon as well.

Please note that this will be a very long tutorial. It might be long, but actually the steps are simple

  1. As what i like to do most is start any new file with the resolution of 500×500. Use the Rectangle Tool create a shape which is similar as shown above. The size u would use mine as reference, which is 65×360. Name this layer headphone bg

  2. Then use the Rounded Rectangle Tool, with the radius of 120px, draw a rounded rectangle as shown above. After having the right size at the right position, draw a rectangle marquee selection like on the image, with this layer select, press delete once to delete off the unwanted area. Name this layer headphone right.

  3. After the above step basically u will get something like shown here. Name this layer headphone right.

  4. Using the Rectangle Tool again, create a new layer and draw a square like what is shown on the above, the green color rectangle. Any size u want, but my size is 48×360. Leave a 2px between the headphone right and this green rectangle. Name this layer headphone middle

  5. Another new layer, draw another rectangle like shown as the black rectangle on the above image. The reference size is 26×360. Same thing 2px in between. Name this layer headphone left

  6. Now the coloring time. Use the Blending Option for each of this layer. Use the color according to what’s shown above. Both the headphone middle and headphone right are using Gradient, while the headphone left is a Solid Color. In case you don’t know where is the blending option, it’s Layer > Layer Styke > Blending Option

  7. Same goes on coloring the headphone bg layer. Then u will have everything same as what is shown above.

  8. Also your Layer sequence will be like in the image.

  9. Ctrl+click on the thumbnail of layer headphone right to create a marquee selection on it. Then go to Select > Modify > Contract, give a 10px.

  10. Fill the selection with White color Of course with a new layer.

  11. Repeat Step 9 and Step 10 with the layer headphone middle and headphone left, with the contract pixel of 7px and 5px respectively with new layers. Then u will get what shown on the image.

  12. Next, merge these 3 white color layers. Name this layer shine. Draw a rectangle marquee selection like in the image above.

  13. Use the Feather Tool, can find at Select > Feather (Ctrl + Alt + F). Give a feather of 40px. With the Shine Layer select, press Delete 4 times.

  14. Draw another rectangle marquee but this time is at the top part.

  15. Same thing with the Feather Tool, 40px. With the Shine Layer selected, press Delete 2 times. U will get the the effect like shown on the above. Did u?

  16. Now to make a brief lining in between those layers. Ctrl+click on the thumbnail of headphone middle, fill that marquee selection with any color in a new layer. I am filling with red color here. Name this layer Middle Lining

  17. Ctrl+click on the thumbnail of this middle lining layer, using the Contract tool, with 3px. Press Delete and u will get the same like above.

  18. Then create a rectangle marquee selection like on the image.

  19. Use the feather tool, same with 40px. With the middle lining layer selected, press Delete 3 times. Do the same to the top portion, then u will get something like shown above.

  20. Then by using the Blending Option, fill the middle lininig layer with the color code shown above.

  21. Duplicate the headphone left layer, and put it right under the original headphone left layer, as shown above.

  22. Apply the Gaussion Blur filter of roughly 10px on this duplicated layer.

  23. Then using the marquee tool to cut out the portion as shown above. This layer will be act as a shadow when this is headphone is put on. Group all of this layers together.

  24. Since the stage is not enough big, enlarge the canvas size (Image > Canvas Size. 1000x1000px. Duplicate the Grouped layer. Flip it Horizontal (Ctrl+T, right click and select Flip Horizontal. Than shift this new duplicated group to a place like above.

  25. Now the final part. Use the Ellipse Tool, draw a shape like above at that position. No need to really be exactly same, but just need to the two edges of the circle to touch on each of headphone layer part.

  26. Ctrl+click on this circle layer’s thumbnail. Using the Conract, 5px. Than press Delete, then u will get something like above.

  27. Using the blending option, color this layer with the color code shown. Then u will get the final picture of the headphone.


With this headphone, u can insert various kind of icon on it, like shown on below is one of the example. If u are curious on how to make the red icon below, refer to my previous tutorial Perfect Shine Button or Icon. Hope u enjoy the tutorial.

PSD file – [download#1#size]


Related Entries

7 Comment(s) On This Topic

seraphangel said during April 18th, 2008 at 12:53 am

wooo new tutorial after such a long time ­čśÇ

kai said during May 4th, 2008 at 6:01 am

great tutorial

digital Z said during June 7th, 2008 at 5:05 am

10x man i needed that:D

phim online said during February 7th, 2009 at 9:50 am

thanks alot, it look so good. I download the file, but only see the headfone, can we download all of it?

Oneijose said during January 8th, 2010 at 2:41 am

Nice but where do u get the little music symbol?

Osman said during March 8th, 2010 at 6:23 pm

├çok g├╝zel ─░ndirme dinle m├╝zik dinleme sitemde indirmedinle.com logo olark kullanaca─č─▒m.

tottenham said during September 16th, 2012 at 5:39 am

Nice job

Leave a Reply