Free all Tutorials , Seo And Web Design

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.

Web 2.0 Button - Example 1

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 RSSicon. 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.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Awan Tag

%d blogger menyukai ini: