Create a Download Icon in Photoshop
Tutorial #04![]()
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 1000x1000px 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
Create a Colorfull Pastel Typo in Photoshop
Create an Origami Swan Logo in Photoshop
5 Comments
Leave a comment
Recent Posts
Categories
- Articles (5)
- Artwork (2)
- Dock Icon (3)
- Freebies (14)
- Illustrator (2)
- News (4)
- Photoshop (19)
- Programming (2)
- Textures (1)
- Tutorials (21)
- Tutorials Best Of (3)
- Wallpapers (10)






LOVE this idea. I’m actually launching it up now in Photoshop, going to use this idea on my new business website!
…excellent tutorial overall as well. Very easy to understand.
Amazing way to demonstrate… appreciate it!
Hi
THX!
Very GOOOOOOOOOOOOOOOOOOOOOOOD
nice download button
[...] Link: http://drawingclouds.com/2009/05/create-a-download-icon-in-photoshop/ [...]