How to Make a Cool Download Icon for a Media Related Website

To begin open a new document. I used to size 400px width and 200px height with a white background.

Create a new shape using the rounded rectangle tool:

Fill the shape with the color code #33cccc :

Add the following layer styles:

You should get this effect:

Go to the Edit menu, go to transform path menu and select prespective. Transform the shape as shown below:

Nudge the original layer NOT the duplicate layer by selecting the ‘Move tool’ and hitting the arrow, till it looks like this:

Currently the layer already contains these layer styles:

You need to add a couple more layer styles to this layer:

You should see a little drop shadow and the colors on the backside of the block getting a bit darker:

Next we create a small circle in the center of the block to create the play button, using the ellipse tool:

Remove the layer styles it has, if any and add these instead:

The button should look like this now:

Once done, create a small triangle using the Polygon tool, by setting it to 3 sides:

Right click it and select the option ‘Make Selection’ and delete the shape:

Go to the select menu and go to modify. Choose ‘Smooth..’, when a menu pops up, enter 3px, this will make the corners of the triangle rounded. Nudge the selection into the center of the button if its not aligned properly after creating a new layer:

Fill the selection with white color on this new layer:

Add this layer style to the arrow layer:

You should see the embossing effect:

Take the rectangular marquee tool and make a selection as shown below:

After creating a new layer, right above the background layer so its below everything else visible inside the image except the background, fill the selection with any color you want:

Apply the following layer styles to the line:

Once done, you’ll see this effect:

Add text to the image, I used the ‘Narkisim’ font.. It came with adobe photoshop cs4. You can choose to use any font you like or the same:

Apply the same effects you used on the line by copying the layer styles and pasting them on this layer and you get the final result of our download icon:

I hope you found this tutorial on how to make a cool download icon for a media related website interesting and it was easy to follow. If there are any questions please feel free to leave a comment.