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

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.

Join Our Community

Enter your email ID below to get access to all our awesome resources and be a PRO in your field.

You have Successfully Subscribed!


Did You Like Our Post? Sign Up Below and Get Latest Content Directly Delivered to Your Inbox

Enter Your email ID and be the first one to know when the new post gets published on SurfnLearn.

You have Successfully Subscribed!

Exit mobile version