Download Icon in Photoshop

In: Photoshop| Tutorial

23 mar 2009
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 1000×1000px 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
Colorfull Pastel Typo in Photoshop
Origami Swan Logo in Photoshop

3 Responses to Download Icon in Photoshop

Avatar

Jon

mars 25th, 2009 at 1 h 34 min

There are some better cloud designs out there, but it was a nice idea.

Avatar

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 :)

Avatar

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!

:D

Comment Form

Sponsored Ads