Subscribe Via RSS

3588 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Custom Hard Drive Icon

October 7th, 2008 in Photoshop Tutorials by Richard Carpenter

Custom Hard Drive Icon

1 Star2 Stars3 Stars4 Stars5 Stars21 Votes, Rating: 4.43
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 Contributor for HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 364 posts.

In this tutorial il show you how to create a custom hard drive icon in various colors.

Create a new document 600×460 pixels with your desired background, create a new layer called “hd_top” select the rounded rectangle tool, once you have the rounded rectangle selected we need to change a few options, change the selection type to “shape layers” and change “radius” to 20 pixels.

Select the color black then drag out your rectangle whilst holding down the shift key, this will ensure we get a nice even square. Goto “edit > transform > perspective” drag the top right or left anchor point inwards untill you have a look like this.

The rectangle we just created will be the top of our hard drive so lets give it abit of depth and add these layer styles.

The gradient overlay is not really important you can change that to any color you like. You should now have something like this.

Duplicate your layer “hd_top” then drag the new layer underneath its orginal, right click it and goto “clear layer styles” now add a color overlay using the color “#5e5e5e”. Name this layer “hd_middle” then move it down a couple of times.

Duplicate the “hd_top” layer then right click and clear the layer styles. Now whilst holding the “ALT” key on the keyboard press the down arrow key about 40-42 times. Now doing this will create 40-42 new layers and with each press of the down arrow key it shifts it down 1 pixel. HIDE all layers apart from the ones you just duplicated, then goto “layer > merge visable” the 40-42 layers should now have been merged into one layer, unhide all your other items then drag the layer underneath “hd_middle”. Name this new layer “hd_bottom”.

Now add these layer styles to “hd_bottom”.

You should be left with this.

Now we have our basic shape for our hard drive, now its time to dress it up with some extras, firstly create a new layer above “hd_top” called “hd_shine” select the pen tool and create a selection like this.

Fill the selection with the color white then set layer opacity to about 15%.

Now were going to make the indent in the top of our hard drive, duplicate “hd_top” then press “CTRL + T” now whilst holding down the shift key resize it and place in the middle of the hard drive. rename this layer “hd_indent”.

Add this inner shadow to your indent shape.

Now set layer blending mode to “lighten”, your indent layer should now look like this.

Select the rectangular marquee tool and create 2 small squares, make sure the two squares are on seperate layers labelled “light 1 on” and “light 2 off”.

Add these layer styles to your “light 1 on” layer.

Add these layer styles to your “light 2 off” layer.

You should now have something like this.

Now create a long rectangle in the middle, and a small square on the right. Add these layer styles to these two items.

On the small square change the color overlay to white, you should have something like this.

Inside the long rectangle add a 1 pixel yellow line then add a 2 pixel dark grey line using the rectangular marquee tool. In the small white box add 4 dots. (see image below).

To finish the icon add a simple name for your hard drive.

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

63 Responses to “Custom Hard Drive Icon”

  1. alex says:

    Always great tutorials here at HV-designs made a couple of them and just love them. Can’t wait for more:)

  2. This is one of your best tutorials!

  3. Achim says:

    Great Tutorial. Thank you for sharing ;-)

  4. this is great, thankyou!

  5. Judicator says:

    Ah. Really nice tutorial. HV-Designs are really awsome. Good job! Keep it up.

  6. kaylee says:

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    kaylee

    http://www.thinkpadonline.info

  7. Very nice that hard drive looks beautiful, keep up the great work.

  8. aklp says:

    really cool man, thanks ;)

  9. mokin says:

    So cool!

  10. Matt says:

    For some reason, on my adobe photoshop i can’t pick colours :S Can you help me out with this? Email is maky369@hotmail.com By colours i mean the one where you insert numbers.

  11. very good, thank you

  12. Pretty cool design! I wish hard drives really did come in these colors! I would love mine in purple hahaha :) Thanks for sharing this cool tutorial. Keep up the good work!

  13. MeiK says:

    good .i like

  14. hafiz says:

    hey nice tutorial..thnx
    btw does any body know how to make this icon to be used with hard drive icon on the pc??
    thnx again

  15. good! very very very thanks..

  16. Hello, already been reading your blogging site for some time. I manage a related blog site however I always keep getting a lot of spam comments, tips on how to keep your blog site so clean?

  17. JS says:

    I’m simply blown away! I like how the final product looks. I’ve been trying to design a logo somewhat like this (in essence, of course even though this tutorial is for an icon) for myself and it was a disaster! I didn’t manage to get it looking right. It was a little bit… off somehow. Finally, I decided to use the professional services of an online logo design site instead (http://www.logodesignplanet.com) and got the logo I wanted at an affordable price and fast too, within 24 hours. I did provide this link for reference and inspiration to my designer as I liked how yours look. I’m not going to design a logo without any professional help anytime soon though it’s fun. And liberating. Haha. Cool tutorial, by the way.

Leave a Reply