Gungurru Web Design Blog

We often see these glossy download buttons all over the Internet, and today we’ll be designing a button in Adobe Photoshop, and the button design is easily flexible for your own uses for your website.

Firstly, for the purposes of this photoshop tutorial, we’ll use a canvas size of 600px by 200px.

Once this is done, use the rounded rectangle tool, with a radius of 10px.
Then, draw the rectangle to your chosen size – If you’re wanting to write multiple lines of text, like the example, drag it to around this size:

Then, open up the blending options for your brand new shape, and apply the following effects:

(For the outer Glow, I’m using the colour #e9e9e9)

(For the gradient Overlay, I’m using a gradient of #c4c4c4 to #ffffff – Note: I have checked the ‘Reverse’ box here)

(For the Stroke, I’m using a gradient of #ff5b5c to #febbbc)

Now for the next step (creating a white glassy effect), there are, I know, a number of different methods of doing it.
The method I use is to use the pen tool to create a shape directly above the original layer like this, and I’ve filled it with White (#ffffff):

Drop the Opacity of this new layer to 55% and already, the button is starting to take form.

Now, using a 54px Arial Bold font, with colour set to #444444, and the Tracking set to -25, write the text ‘Download’ (or whatever text you want to have here)

Then apply the following styles to it:

This gives an awesome letterpressed text effect. The gradient overlay is hidden enough to be discreet, but still gives a nice feel to the button.
Then, create a new line (in the same text layer), and using a size 24px of the same font, with the colour #e8e8e8, write your secondary line of text.

For Usability, it is often important to have the minor details in a smaller, lighter coloured font here, as the users can easily see the information which is important to them.
Next, we’re going to create the ribbon element which overlaps the button, with a little 3d-style effect to add another dimension to the button.
Select the Pen Tool, and create the following shape. If you need to (like I have), use a few guide lines to help align your arrow. It really doesnt matter what colour the arrow is, as we’re adding effect to it soon, which will change that.

Then, apply the following styles to your shape:

(For the Inner Glow effect, I’m using the colour #80271d) 

(For the Gradient Overlay, I’m using the colours #871508 and #e4250f for each end of the gradient)

Next, for the 3d part below the ribbon, select the pen tool, and draw a shape like so behind the ribbon. Give it a dark red colour (I’ve chosen #990000)

For the arrowheads inside our glossy ribbon, select the Custom Shape tool, and use the ‘Arrow 2′ shape.

With that, draw an arrow, rotate it 90 degrees to be pointing downwards and to fit inside the ribbon, and change the shape colour to white (#ffffff).

Then Apply the following Inner Shadow, and duplicate the layer and place it just above:

And there you have it! A premium-style download button, created in Adobe Photoshop!

Now it is easily possible to adjust the colours of the buttons, and get some really good results – here’s what I got:

If you want a copy of the project files, the PSD file can be downloaded here (file size is 280KB)

Thanks for reading this graphic design tutorial – if you have any thoughts/improvements, feel free to comment!

Related posts:

1. Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 1)
2. Design a Vintage WWII Poster: a Photoshop Tutorial
3. Design a Warm Nature Website Layout: a Photoshop Tutorial
4. Create a Retro Vintage WWII Style Poster: A Photoshop Tutorial
5. Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 2)

Tags: button, photoshop, sleek, tutorial, web, web 2.0

This entry was posted on Saturday, July 24th, 2010 at 2:53 pm and is filed under Graphic Design, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.