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.
    Web 2.0 Button - Initial
  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.
    Web 2.0 Button - Initial gradient
  5. You can find Stroke effect parameters below. Stroke color is 363636.
    Web 2.0 Button - Initial stroke
  6. Set the Inner Glow effect options.
    Web 2.0 Button - Initial inner glow
  7. As the result you will get following image:
    Web 2.0 Button - Initial result
  8. Create rectangle using Rounded Rectangle tool, it will be used as button glare.
    Web 2.0 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:
    Web 2.0 Button - Glare mask
  12. After leaving quick mask mode, you will get selection area. Click Delete button.
    Web 2.0 Button - Glare result
  13. Add layer with text “Entries RSS” and RSS icon. Set Drop Shadow effect parameters.
    Web 2.0 Button - Text

Now you got following button:

Web 2.0 Button - Result

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

Web 2.0 Button - Example 1

Web 2.0 Button - Example 2

Web 2.0 Button - Example 3

Web 2.0 Button - Example 4

Updated: You can download PSD sources here.

Comments are closed.