Create a Download Icon in Photoshop

Tutorial #04

Mini Preview

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.

Final Preview

Step 1 – New Document
Create a new document in photoshop of 1000x1000px with a transparent background

Step 1

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 2

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:

Step 3

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 3

Step 3

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 4

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.

Step 5

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 5

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.

Step 6

PSD File

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