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!
