Subscribe Via RSS

3243 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Compact Disc Icon

May 8th, 2009 in Photoshop Tutorials by Richard Carpenter

Compact Disc Icon

1 Star2 Stars3 Stars4 Stars5 Stars9 Votes, Rating: 3.67
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 331 posts.

Hello welcome to another tutorial by hv-designs, today we’ll be making a compact disc icon from scratch.

The icon were going to be creating is all done using shape layers which means you can resize up and down without loss of quality. Were going to start off with a fairly big canvas so create a new document 600 x 600 pixels, fill your background with any color, ive opted for a nice blue gradient background. Select the ellipse tool, in the top toolbar change the tool settings to shape layers.

Step1

Draw out a circle filling up most of the canvas, holding down the shift key whilst dragging the circle out will keep the circle’s aspect ratio square. Once you’ve got your circle add these layer styles.

Step2

Step3

You should have something like this.

Step4

Label your first circle layer “CD BASE” then duplicate it. Rename the duplicated layer to “CD SHINE” right click the layer and goto “clear styles”. Now add these layer styles to your “CD SHINE” layer.

Step5

Once you’ve added the gradient overlay set the layer fill amount to 0%.

Step6

Select the rectangular marquee tool and make a thick rectangle across your canvas. Fill the rectangle with any color.

Step7

Add a gradient overlay to your rectangle, you can use what every colors you want in the gradient overlay, the colors will be the little reflective colors you see on the cd’s. Ive opted for a simple blue gradient.

Step8

Create a new layer above your gradient overlay layer which you was just working on. HIDE all the layers apart from the new one and the one with your multicolored rectangle. Goto “layers > merge visable” then unhide all layers. Goto “filter > distort > pinch” pinch by 15px two – three times. Rotate your colored rectangle by pressing CTRL + T. The angle doesnt have to be anything in particular. Make sure your colored rectangle is selected, whilst its selected click your “cd base” layer whilst holding down the CTRL key. Goto “select > inverse” and hit the delete key.

Step9

With the ellipse tool create a smaller cirlce in the center of your cd.

Step10

Change the fill amount for the layer from 100% to 0% then add these layer styles.

Step11

Step12

Step13

You should have something like this.

Step14

Select the ellipse tool again and create another cirlce inside the one you just created, make the circle smaller by about 50px or so.

Step15

Add these layer styles to your new circle.

Step16

Step17

With ellipse tool again, create another circle abit smaller than the last one. Set fill amount to 0%. Then add these layer styles.

Step18

You should have something like this.

Step19

Once again for the last time create another circle using the ellipse tool. This circle is for our hole in the cd.

Step20

Add these layer styles to your circle.

Step21

Step22

You should have something like this.

Step23

Additional Steps

Now were going to add some circular text onto our black inner circle. To do this we need to select the ellipse tool and change our settings to paths.

Step24

Draw our your path so it’s in the middle of your black inner circle.

Step25

Select the type tool and move your cursor over the path, the icon on your cursor should change.

Step26

Once the icon changes click your mouse button, you should now be able to type your text and the text should follow your path.

Step27

Next select the pen tool and create a selection like this.

Step28

Fill the selection with the color white and set opacity to about 20%. Thats it all done, heres my finished result.

Step29

Hope you enjoyed this tutorial, dont forget to subscribe via RSS and twitter. You support is greatly appreciated. Dont forget you can also share this post by using the social icons below. Thank You.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

26 Responses to “Compact Disc Icon”

  1. krike says:

    Nice :D will try it out soon :D (nice work on the website to ;) )

  2. Thx man nice work

  3. LukeM says:

    lol i am glad there is one person out there who likes to redesign there website all the time… i though i was alone…

  4. were only on our 25th design since 2002.

  5. Good as usual! It was chosen for the home page of http://www.tutorialsroom.com as usual :)

  6. Jamaica says:

    This tutorial skipped a whole step which made my cd light blue

  7. Jamaica says:

    This tutorial skipped a whole step which made my cd light blue!!!

  8. all the steps are there….

  9. huwaw69 says:

    wow great technique its really helpful man! thanks for the guide!

  10. Selcuq says:

    Good work.

  11. Alin Ivana says:

    Awsome, good for icons, I used something like this to simulate a cd label (http://www.madic.ro/lucrari/as-pin-identitate-vizuala/), but your tutorial is much more complex, great work.

  12. Tollboy says:

    One of, if not the best, disc creation tutorials I have seen. Great job.

  13. Simon says:

    As i read above. The tutorial is missing a step. It goes from this http://data.fuskbugg.se/skalman01/whatnext.jpg, and your next picture is http://www.hv-designs.co.uk/tutorials/cd_icon/step9.gif.

  14. if not the best, disc creation tutorials I have seen. Great job.

  15. khaled ali says:

    Great job :)

  16. Nice Work … keep it up

  17. Nice Work … keep it up

  18. dt0098 says:

    Very good ….. Thankful

  19. oscar says:

    its fantanstic. youre the best. thanks you. papasitooo!

Leave a Reply