How to create Web 2.0 button in Photoshop

Web 2.0 style become realy popular. There is no any standarts in web 2.0, but there are some style signatures:
lush and pure color, gradients, rounded corners...

 

Today I want to show you a few examples of how you can create buttons in the style of Web 2.0 using Adobe Photoshop CS2.

 

How to create Web 2.0 button in Photoshop:

1. Open Photoshop, create a new document for the buttons.

 

2. Use  'Rounded Rectangle' tool to create a toolbar button shape by entering a radius for rounding corners.

 

 

3. Right click on the layer with a rectangle on the Layers palette, choose Blending Options.

 

4. Configurate effect parameters of 'Gradient Overlay'. For ex.: Color of first and second sliders is 434343, of the third - 000000.

 

 

5. Parameters of 'Stroke' effect shown below. Color of stroke - 363636.

 

 

6. Configurate parameters of 'Inner Glow' effect.

 

 

7. The result image:

 

 

8. create a rectangle form, using 'Rounded Rectangle' tool,it will be glare on the button.

 

 

9. press on glare layer with your Right mouse button , choose 'Rasterize Layer'.

 

10. Click 'Edit in Quick Mask Mode' on your toolbar.

 

11. Select 'Gradient Tool', create a gradient like this:

 

 

12. Exit the 'Quick Mask mode', we will get selected. Press 'Delete'.

 

 

13. Add a layer with the text: "Entries RSS" and RSS icon. Configurate parameters of 'Drop Shadows' effect.

 

 

14. The result is this button:

 

 

15. By changing the parameters of the various effects or adding and changing some of the elements, you can have different buttons.