Have you been noticing those large download buttons popping up everywhere over the last year or so? I sure have, they are really eye catching and in your face. It’s next to impossible to ignore them, and they get the point accross.

I just recently started adding some these buttons to my site to increase downloads, and I think it’s working so far! Anyway, after I designed mine I decided to to write a tutorial blog about it, and give away the resulting file that I create.

Here is the final result that we will create in this tutorial:

Step 1 – Create A New File

Create a new photoshop file with a dimension of 225px by 100px

Step 2 – Convert Background Layer

Covert the background layer into an editable layer by double clicking on it, and then choosing “OK” from the resulting new layer pop-up window.

Step 3 – Create 3 new Groups

Create 3 New Group’s and label them, Text, Icon, & Background. (Yes I am a little obsessive about Photoshop file organization.)

Step 4 – Adding the Gradient

Move the Background layer, into the Background Group folder and double click it to bring up the layer style menu. From there go to the Gradient Overlay section.

Create your custom gradient, or use one of the pre-defined photoshop gradients. For this example, I am going to create my own Gradient and use #4c5159 as the lighter color, and #0b0e10 as the darker color, which gives us a result like this:

But we aren’t happy with the default gradient settings are we? NO! Let’s add a little more style to the gradient.

Open the layer styles palette for the background layer by double-clicking the layer. Then select the gradient palette, and change your Gradient Style to Radial, and your Gradient Scale to 150%.

Which should give you something like this:

But WAIT! Before you close the Layer Styles pallete, use your Move Tool (V) and drag the gradient center over to the right a little bit.

Step 5 – Add A Shine Effect

Now we are going to add a quick shine effect by creating a new layer on top of the background layer, name it “Shine”.

Fill it with a white to transparent gradient. To do this, select the Gradient tool from the toolbar, or hit the G key. Once you have the gradient tool selected select a white to transparent gradient from the gradient selector in the top left hand of the screen.

Make sure the “Shine” layer is selected and then using the Gradient tool, move your mouse cursor to the top of the button, click and hold the left mouse button, and drag your mouse between 1/2 and 3/4 of the way to the bottom of the document and let go.

If you did it right, your button should now look like this:

Step 6 – Round the Shine

Now we have to round the bottom of the gradient to really bring out the shine effect by using the Elliptical Marquee Tool (M is the Keyboard Shortcut). The way I find is easiest to do this type of work, is either to make your surrounding window really big, or zoom out really far so you can create a very large round/oval marquee.

Now select inverse by either right clicking inside the button area, or click CTRL + Shift + I, or, you can download my 7 FREE Photoshop Actions to cut down design time, and then simply click the F8 key for easy Inversing.

Finally, click CTRL + X to cut that area off, which should leave you something like this:

The last part of this step is to change the layer opacity to 50%:

Which should give you something that looks similar to this:

Step 7 – Add & Style Text

Depending on the type of button you are creating, your text may vary, but since I started this tutorial out as a download button, that’s the text we are going to use.

Select the Type tool, or click (T) on the keyboard, then select the “Text” layer, and click on the button to start your type layer. Type the text “Download” and click either the Check Mark at the top of the screen, or hit the Enter Button on the Num Pad to complete the typing.

Hopefully you have something similar to this:

But not to worry if the type if a different color, font or size as we are going to fix that up right now.

There are a million and 1 ways to style the text, but I will just do something quick and easy that generally gives smooth modern results with not much effort.

Use the Character pallette to set the Font Family to “Century Gothic”, the Font Style to “Bold”, the Font Size to “21″, the Character Tracking to 50, and All Caps.

Which should give you this result:

Now we are going to add some simple layer styles to add some depth to the text:

Double click on the “Download” text layer, which will bring up the Layer Styles palette.

Click on “Drop Shadow” and set the Blend Mode to “Normal”, the Opacity to 100, the Angle to “120″, the Distance to “1″, the Spread to “0″, and the Size to “1″

Now click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, and the Style to Linear. Make a gradient with “#FFFFFF” for the light color, and “BEBDBD” for the darker color.

Finally, click on “Stroke” and set the Size to “1″, the Position to “Outside”, the Blend Mode to “Normal” the Opacity to “30%”, the Fill Type to “Color”, and the Color to “#000000″.

And now you should have something that looks somewhat decent.

Now let’s move this over a little bit to the right and a bit up to make room for our icon, and add the smaller text. I don’t think i really need to explain how to add the small text. Just use a 12pt Century Gothic with Bold applied and voila!

Step 8 – Creating the Icon

Start by creating a new layer inside the Icon group folder and name it “Circle”, and Draw a circle using the Elipse Shape tool (U)

Now let’s add some layer styles to make this circle a little more interesting.

Double click on the circles layer, and click on “Inner Glow” and set the Blend Mode to “Screen”, the Opacity to “75%”, the Noice to “0″, the color to “#54BA30″, the Choke to “0″, the Size to “21px”, and the Range to “100%”

Now click on “Bevel and Emboss” and set the Style to “Outer Bevel”, the Technique to “Smooth”, the Depth to “72%”, the Direction to “Down”, the Size to “4px”, and the Soften to “0″.

Now click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, the Gradient colors to “#52A123″ for the lighter color and “#00601B” for the darker color, the Style to “Linear”, the Angle to “90″, and the Scale to “100%”.

And finally click on “Stroke” and set the Size to “1px”, the Position to “Outside”, the Blend Mode to “Hard Mix”, the Opacity to “66%”, the Fill Type to “Color” and the Color to “#000000″.

Which should leave you with something like this:

Next, create another new layer inside the Icon group folder and name it “Arrow”.

Hit (U) on your keyboard, and you should see a menu appear for the Shape tool at the top of your screen.

Click on the “Shape” icon to reveal a drop down menu with many shapes you can choose from, and select the 3rd Arrow on the top.

Draw a new Arrow on your new layer.

Rotate it 90 degrees clockwise to make the arrow point down, make sure that the arrow is small enough to fit inside our circle.

Next, we will add some layer styles to the arrow.

As usual, double click the layer, and click on “Bevel and Emboss” and set the Style to “Outer Bevel”, the Technique to “Chisel Hard”, the Depth to “1%”, the Direction to “Down”, the Size to “1px”, the Soften to “0px”

Next click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, the Gradient colors to “#FFFFFF” for the lighter color and “#C9C9C9″ for the darker color, the Style to “Linear”, the Angle to “90″ and the Scale to “100%”

Finally click on “Stroke” and set the Size to “1″, the Position to “Inside”, the Blend Mode to “Normal”, the Opacity to “100%”, the Fill Type to “Color”, the Color to “#FFFFFF”.

Almost done! Now we just need to add a final shine to the icon to make it a little fancier.

Create a new layer, and name it Icon Shine.

Hold down your CTRL button (For PC’s) and click on the circle layer. This should create a selection the exact size of the circle.

Select your Gradient Tool (G) and choose a White to Transparent gradient just as we did earlier in this tutorial. Now drag the Gradient Tool from the top of the selection to about 1/2 way to the bottom.

Now select your Marquee Tool (M) and move the selection up a little more than halfway.

Now select inverse by either right clicking inside the button area, or click CTRL + Shift + I, or, you can download my 7 FREE Photoshop Actions to cut down design time, and then simply click the F8 key for easy Inversing.

Finally, click CTRL + X to cut that area off, which should leave you something like this:

And there you have it, a detailed and quite long tutorial of how to make a big Download button. You can download this file in PSD format by clicking the Download Button below.

I hope you liked this tutorial and learned something from it. Sharing is caring!