October 7th, 2008 in Photoshop Tutorials by Richard Carpenter
Custom Hard Drive Icon




21 Votes, Rating: 4.43
About The Author: Richard Carpenter
Richard Carpenter has written 322 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.
Leave a Reply
Search HV-Designs
Can't find what your looking for??, Try searching.
Write For HV-Designs
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
HV-Design Flickr Group
Submit your photoshop artwork to the hv-designs flickr group. Not a member? Join Now.
Recent Comments
- Richard Carpenter on Personal vCard Pt.2
- Bekey on Personal vCard Pt.2
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on USB Stick Tutorial
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on LG LCD Monitor Icon
- 60 Excellent Gadget Photoshop and Illustrator Tutorials » IMvsMI blog on 3D Mp3 Player
- 60 Excellent Gadget Photoshop and Illustrator Tutorials | Programming Blog on 3D Mp3 Player
- Imon on Personal vCard Pt.2
- Multi-level Drop Down Menus : swapnil on Sliding Jquery Menu
- Ertan on Creative 3D Layout – FREE PSD
- Ertan on Portfolio Layout #6
Other Blogs Ive Written For
On occasions i write tutorials and articles for other blogs/tutorial websites, here are a list of tutorials and articles ive written. Features tutorials written on six revisions and PSD Tuts+.
Six Revisions Submissions
- Illustrative Web Design Layout Pt.1
- Illustrative Web Design Layout Pt.2
- 3D Gallery
- 3D Ribbon Style Layout
- Minimal Portfolio Layout
- Minimal Portfolio Layout PSD Sitebuild




56 Responses to “Custom Hard Drive Icon”