Create Web 2.0 Button

 

In this tutorial we are about to create a simple button suitable for any Web 2.0 application of websites.

Created on: Apr 12, 2009
Created by: Majesticlicks
Program used: Adobe Photoshop cs3
Skill Level: Basic Aim: aim

 

 

Custom Search
Create blank canvas at about 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg1‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. Any color is fine at the current stage.

 

Open blendin Options for ‘bg1‘ and apply the following styles:

Drop Shadow

Gradiant Overlay

Once you get all your settings, select the gradient tool and drag and drop to apple your gradient overlay.

Hold CTRL, left click on ‘bg1‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will shrink the selected area by 2 pixel.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Create a new layer call ‘bg2‘ and filled the highlighted (after shrink) area with any color. I use #000000 black here. Double click on ‘bg2′ to launch up the Blending Option and apply the following style.

Gradiant Overlay

  • first color , #0ec600
  • second color, #21c600

Now uses the type tool and type the letter you want. mine " m"

  • Rounded Arial Bold
  • 150pt

Same, after deciding your text, double click on ‘txt’ to launch the Blending Options and tweak the following styles.

Drop Shadow

Inner Shadow

Bevel Emboss

Gradiant Overlay

  • first color #d2d2d2
  • second color #f0efef
Let’s give it a little glow over the top part. Hold CTRL, left click ‘bg2‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area.

With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter 15px for the radius.

Final

Create a new layer, call it ‘glow‘ and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button.