design your dreams…
![]()
Create a download icon in photoshop, to replace your old download button on your website.
I’ve just created this website/blog, every time I wanted to put a download link I used text so I thought I’ll create a nice download icon so the readers won’t miss the links. I hope you’ll like this quick tutorial.
![]()
Step 1 – New Document
Create a new document in photoshop of 1000×1000px with a transparent background
![]()
Step 2 – Circles
Create a new layer, Layer – New – Layer, then select the brush tool (B) and get a circular hard brush. Create a few circles with different sizes, be sure to create a new layer for each circles, I did 6 circles with 6 layers but you can put more or less.
![]()
Step 3 – Layer Style
We’re going to add some layer style at the circles, go to Layer – Layer Style – Inner Shadow and enter these values:
![]()
Stay on the layer style panel and add a color overlay, then regroup all the circle layers in a group, Layer – New – New Folder, name the group Cloud.
![]()
![]()
Step 4 – Arrow
Select the Custom Shape Tool and pick an arrow shape
Tip: If you don’t find the arrow shape in the list, you can load all the shapes in the shape by clicking on the little arrow button on the top right and click on All where you’ve got all the shape libraries names.
Create a new layer name it Arrow and create an arrow shape on it, change the color like you want and rotate it with the free transform tool Ctrl+T. Place the layer in the Cloud group beneath all the other layers.
![]()
Step 5 – Reflection
Now let’s create the reflection of the arrow, select the cloud group and hold Ctrl+Alt+E, You should have a layer that contains the cloud and arrow, name this layer Reflection. Then rotate it 180°, Edit – Transform – Rotate 180° and Edit – Transform – Flip Horizontal.
![]()
Place the image under, right click on the reflection layer, select Rasterize Layer and create a layer mask, Layer – Layer Mask – Reveal All. Apply a black and white gradient on the layer mask going from bottom to top.
![]()
Step 6 – Text and Saving
When you’re finished with the clouds, just add some text on or under it and then save it as a .PNG file, make sure your background is transparent when you do that.
![]()
Similar Articles:
Create a Dock Icon Folder in Photoshop
Colorfull Pastel Typo in Photoshop
Origami Swan Logo in Photoshop
3 Responses to Download Icon in Photoshop
Jon
mars 25th, 2009 at 1 h 34 min
There are some better cloud designs out there, but it was a nice idea.
Brochure Printing
avril 1st, 2009 at 1 h 41 min
Simple, detailed, useful tutorial. Excellent for beginners. Thanks for sharing this! Keep up the good work
Rickgauden
avril 13th, 2009 at 6 h 02 min
O love this tutorial!
I created a Action to use in this. It is more easy!