Button Tutorials are probably one of the hottest categories in any Photoshop tutorial site and since Web 2.0 is such a hot topic now, lets go about doing a simple button suitable for any Web 2.0 application of websites. Read on!

Step 1. - Creating the button

Now the first thing we are going to do is start a new canvase with the size of 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg01‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. The reason we hold shift is to keep the image square. Any color is fine at the current stage as you fill colour.

Step 2. The blending options

Now what we are going to do is call up the Blending Options of ‘bg01‘, this is very simple todo, right click on `bg01` and click `Blending Options` and adjust the styles as follows:

Drop Shadow

• Opacity: 40%
• Distance: 0px
• Spread: 0%
• Size: 6px

Gradiant Overlay

• Color stop: 0%, #d00031
• Color stop: 100%, #ff2b5d

After you have done that you should have something like this :

Step 3. Making the button look web 2.0

Now this is where it all starts to get exciting as it will now start to look like a web 2.0 style button.

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

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

Gradiant Overlay

• Color stop: 0%, #c6002f
• Color stop: 100%, #c6002f

Create another new layer for text, call it ‘txt‘. Insert your button’s text. I’ll use an alphabet to represent. The font styles I’m using here are as follow:

• Rounded Arial Bold
• 150pt

For this tutorial I am using Arial Bold but you can use any font you wish, double click on ‘txt’ to launch the Blending Options and tweak the following styles.
Drop Shadow

• Opacity: 25%
• Distance: 0px
• Spread: 0px
• Size: 5px

Inner Shadow

• Opacity: 10%
• Distance: 0px
• Choke: 0
• Size: 10px

Bevel Emboss

• Depth: 1px
• Direction: Down
• Size: 0px
• Softten: 0px
• Highlight Mode Opacity: 32%
• Shadow Mode Opacity: 32%

Gradiant Overlay

• Color Stop:0% #d2d2d2
• Color Stop:100% #f0efef

Step 4. Finishing Touches

The button is almost done. Let’s give it a little glow over the top part. Hold CTRL, left click on ‘bg02‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with the Eclipse Marquee Tool selected, drag is across to minus out the bottom half of the highlighted area.

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

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

And there you have it , a wonderful web 2.0 style button that can be adapted and used in many diffrent web applications! I hope you enjoyed this tutorial.

This tutorial was created by Chris Baines - http://www.tutorial-zone.co.uk, if you liked this tutorial and would like more then please visit my website.

Related:

Initially, individuals only needed to do 70-294 in order to be able to attempt 642-825. However with time, the series has advanced to 642-552 that requires more basic courses like 642-503 and 642-176 to be taken. This is sad indeed. However, with all these credits, one does not need to go for 640-802 or even 1Y0-259 anymore.