How to make a download button

Hello and welcome to our fourth tutorial on AREA 1!

This is what we’ll be learning how to make today:

So let’s get started!

Open your Adobe Photoshop, make a new file (width: 200, height: 75).
See Screenshot 1.

Next, using the Rounded Rectangle Tool (See Screenshot 2), draw a rectangle. After this, right click on the new created layer and choose Blending Options > Bevel & Emboss. See Screenshot 3.
Now choose the Text Tool (See Screenshot 4), and write DOWNLOAD.
Duplicate this text layer, then go to Edit > Transform > Flip vertical, move down the layer and then set the Opacity to 50%. Now we should have a reflection effect. See Screenshot 5.

Next, create a new layer and using a custom brush (KLstock_Arrows, click the name to download) draw an arrow. Duplicate the arrow layer, go to Edit > Transform > Flip Horizontal, move the arrow a little and set the Opacity to 25%. You should now have something like this: See Screenshot 6.

Now insert the attention sign (download here) in your project. Scale it down a little and then duplicate it. Move one of the attention sign layers and change its Opacity to 50%. See Screenshot 7.
Scale down a little the attention sign layer with 100% Opacity. See Screenshot 8.
You should now have something like this: See Screenshot 9.

Here’s my final result: Screenshot 10.

Download the project here. (Size: 309 Kb)

Hope you’ll enjoy this tutorial! Please leave a comment & thanks for the visit.



You can discuss this tutorial on the forum, click HERE.

Author: Mihai Opariuc - E-mail

My name is Opariuc Mihai, I'm a graphic/web designer from Ploiesti, Romania and I'm the owner of AREA 1. I hope we can share a lot of information, tips&tricks and ideas through this website. Follow me on Twitter @area1.

SHARE ARTICLE: SUBSCRIBE:

3 Responses to “How to make a download button”

1. donna says:

   January 20, 2009 at 3:32 pm

   Nice design. Simple instructions are very appreciated by new designers in CS3.
2. Richard says:

   May 12, 2009 at 9:50 pm

   Nice tutorial and thank you very much
3. 2nd Anniversary Gifts says:

   August 18, 2009 at 3:42 pm

   Great tute. Hi quality image buttons rendered. So glad i found the best tutorial blogs like this one.
   2nd Anniversary Gifts´s last blog: Information on Feeding Raised Chickens

TRACKBACKS

Post Comments

Click here to cancel reply.

Name (required)

Mail (will not be published) (required)

Website

What is 3 + 4 ?

Please leave these two fields as-is:

RECENT TWEETS

AREA 1 on Twitter

• Over 5000 FREE Adobe #Photoshop Brushes http://bit.ly/2roGEN # 7 hours ago
• RT @Designrfix: 115+ Famous Resources for Promote your Design Articles/News http://su.pr/1SLC4N # 8 hours ago
• RT @VandelayDesign: How to Turn Inspiration from Others into Personal Original Works http://bit.ly/aQQlTT # 10 hours ago
• RT @jthompsondesign: RSS Feeds: Are you Missing out? http://bit.ly/cOE0rL # 10 hours ago
• RT @designblend: 25 Beautiful And Creative Business Card Ideas http://ow.ly/1j7JM # 11 hours ago