Web 2.0 Style Button

By Adrian Ciccantelli
2007-11-15


Web 2.0 Style Button
So you like your buttons web2.0 style? Well in this tutorial I show you how to create this button:

Start my creating a new 72dpi document. Then Use the 'rounded rectangle' shape tool to draw the body of the button.





Now open the layer effects dialogue by selecting the layer and clicking the 'F' button at the bottom of the 'layers' palette.
Click on 'gradient overlay' then click on the gradient dropdown. Set the start and end gradient colour stops to #434343 and #000000.



Then click on 'stroke' and add a 3px black outer stroke. Also add an 'inner glow'.
This will give you the following basic button:





Now create a new layer on top of the first and draw another rounded rectangle (white this time).
This rectangle will be the gloss on the button. It needs no layer effects.
Position it as shown, then right click on this layer in the 'layers' palette and select 'rasterise'.



With the new (top) layer selected, switch to 'quickmask mode' and use the gradient tool to draw a gradient similar to this one:



Now switch out of 'quick mask' to get the selection and hit the delete key.
Hit [ctrl - D] To remove the selection.
You should now have a button that looks like this:


If the button doesn't look glossy enough try adding a 'satin' effect to the original (large) shape layer:



Add some text in a web2.0 font (e.g. arial rounded). Here I have also added a feed icon.

Finally link all the button layers together (click the link slot next to each layer in the 'layers' palette) and merge them (Menu: Layer > Merge linked).
Now duplicate the single button layer onto a new layer (Menu: Layer > Duplicate Layer) and position the copy below the original.



Select the lower button layer and use Menu: Edit > Transform > flip horizontal/vertical Until you have a mirror image:



Finally select the lower button layer and use Menu: Layer > Add Layer Mask > Reveal All to create a mask.
Then use the gradient tool to draw a white gradient across the layer to produce the fading reflection:



Tutorial Pages:
» Web 2.0 Style Button

Related Tutorials: 5 Tips for Photoshop Efficiency Photoshop "Inferno" Typography Tutorial Photoshop Indiana Jones Poster Tutorial Photoshop Plasma TV Design Tutorial Designing a Black Zune 2 in Photoshop Design a Cool Old Book with Photoshop