IRIS Design » Archive » Web 2.0 style buttons

IRIS Design » Archive » Web 2.0 style buttons:

Nowadays Web 2.0 style becomes more popular. Every day tons of sites which has simple, bright and very interesting things, appear in Network. There are no standards about creating any Web 2.0 elements, but we have several typical features, for example and clean colors, many gradients.

Today I want to show you how to create Web 2.0 styled button using Adobe Photoshop CS2.

1. Open the Photoshop, create new document for the button.
2. Create shape for future button using Rounded Rectangle tool on toolbar, specify round radius.
   
3. Right click on rectangle layer in Layers palette, choose Blending Options.
4. Set the Gradient Overlay effect parameters. I have following color of first and second thumb: 434343, third – 000000.
   
5. You can find Stroke effect parameters below. Stroke color is 363636.
   
6. Set the Inner Glow effect options.
   
7. As the result you will get following image:
   
8. Create rectangle using Rounded Rectangle tool, it will be used as button glare.
   
9. Right click on “glare” layer, choose Rasterize Layer.
10. Click Edit in Quick Mask Mode on toolbar.
11. Choose Gradient Tool, create gradient like following:
    
12. After leaving quick mask mode, you will get selection area. Click Delete button.
    
13. Add layer with text “Entries RSS” and RSS icon. Set Drop Shadow effect parameters.
    

Now you got following button:

After changing different effects parameters, adding or changing elements, I got following buttons:

Updated: You can download PSD sources here.