Sunday, October 10, 2010

creat dload button

Firstly, for the purposes of this photoshop tutorial, we'll use a canvas size of 600px by 200px.
image 1
Once this is done, use the rounded rectangle tool, with a radius of 10px.
image 2Then, 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:
image 3
Then, open up the blending options for your brand new shape, and apply the following effects:
image 4
(For the outer Glow, I'm using the colour #e9e9e9)
image 5
image 6
(For the gradient Overlay, I'm using a gradient of #c4c4c4 to #ffffff - Note: I have checked the 'Reverse' box here) image 7
(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): image 8
Drop the Opacity of this new layer to 55% and already, the button is starting to take form.
image 9
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)
image 10
Then apply the following styles to it:
image 11
image 12
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.
image 13 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.
image 14
Then, apply the following styles to your shape:
image 15
image 16
(For the Inner Glow effect, I'm using the colour #80271d)
image 17
(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)
image 18
image 19
For the arrowheads inside our glossy ribbon, select the Custom Shape tool, and use the 'Arrow 2? shape.
image 20
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).
image 21
Then Apply the following Inner Shadow, and duplicate the layer and place it just above:
image 22
image 23
And there you have it! A premium-style download button, created in Adobe Photoshop!
Design A Shiny Premium Web 2.0 Download Button


Read more: http://www.webdesign.org/photoshop/photoshop-basics/design-a-shiny-premium-web-2-0-download-button.18694.html#ixzz11yVIi5Cn

No comments:

Post a Comment