Create a Stylish Web Button in Photoshop

download source

Every designer has his/her own secrets and methods of creating buttons. Today i’ll share some of my with you.
In this quick tutorial we’re gonna learn how to create a stylish glossy button, mainly for web design but can also work for applications etc.
The process might look a bit long but it’s fairly simple and quick. There are many ways to achieve the same result, so play with it, explore, and find your own best way.

Final Result


Base

Create a new document.
Add a new layer on top of the background. (I have modified the background layer a bit, just to have something nice to look at)
Take the Rounded rectangle tool and set the corner radius to 4px.
Draw a shape sized 136px X 38px.


Make a selection out of the path and color it blue (#0066a1).
We will call this layer ‘Base’.


While selected, add a new layer and fill the selection with black.
Deselect.


Add a layer mask and grab the gradient tool.
Set it on radial from black to white, make sure that you have the mask active and drag the gradient from around the middle of the button to the outside.
Change the layer opacity to 60%.


You should now have something looking like that:


Duplicate the ‘Base’ layer, and call the duplicated layer ‘Noise’.
Go to filter > noise > add noise
Apply the following settings:


Change the layer opacity to 20%.


Add a 1px dark blue stroke to the ‘Base’ (color #002e49)


Depth, Glow, and Reflections

Make a selection out of the ‘Base’. (cmd click on the layer’s thumbnail)
Create a new layer on top of everything and fill the selection white.


Leave the selection on, go to Select > Modify > Contract, and contract 1px.
Press delete, and deselect.
Change the layer opacity to 25%.


Duplicate this layer and change the opacity to 80%.
Add a layer mask, grab the gradient tool and set it on radial from white to black.
Make sure that you have the mask active and drag it around the top center.


Now we have a nice reflection on the top:


Create a new layer above the ‘Noise’ layer and call it ‘Glow’.
Take the elliptical marquee tool and make a selection at the bottom (120px X 25px).


Go to Select > Modify > Feather and apply a 5px feather to your selection.
Fill you selection white. Deselect.


Make a selection out of the ‘Base’ (cmd click on the layer’s thumbnail) and press the “Add layer mask button” while the ‘Glow’ layer is active.
Change the ‘Glow’ layer opacity to 65% and its blending mode to Overlay.


Now we’re going to create the “glass”.

Add a new layer on top of everything, make a selection out of the base (cmd click on the layer’s thumbnail), and fill the new layer white.
Deselect.
Cut it in the middle using the Rectangular marquee tool.


Add a layer mask and drag a linear white to black gradient from top to bottom.
Call the layer ‘Glass’ and lower the Opacity to 20%.


Add “Drop shadow” to the Base layer with the following values: (Feel free to tweak as you wish)



That’s it!
Just Apply your desired text or icon and you got yourself a button.

Comments

  • Sunshine

    Nice and easy. Cheers.

  • havilio

    simple indeed. thanks