Create Web 2.0 Style Buttons in Photoshop

Ever wonder on how to create a web 2.0 style buttons with such nice glowing effects? Today I’m gonna show you how to create one. 🙂

First, we’ll create a 100 by 40 pixel image. Open Photoshop (I use CS4) then File > New then specify the width to 100 px and 40px in height.

Step 1
Step 1

Select Rectangular Marquee Tool on the toolbox or just press CTRL+A to select the entire work area.
Then, click Gradient tool on the toolbox. (Ctrl+G) or if it is not shown press press CTRL+G then Shift+G to show.

Pick your desired gradient color. I pick fading color blue.

Step 2
Step 2

Create New Layer then again with the new layer slected press CTRL+A. Click again the Gradient on the toolbox then on the color pick the color white and on the other side of the gradient pick the color that match the color that you’ve chose earlier. Then click the Opacity Stop and on the Opacity ticker type 0 (zero) to make the color transparent. Then after you select, drag it into your newly created layer just shown below or you can adjust.

Gradient Window
Gradient Window
Drag the Gradient
Drag the Gradient

Deselect the layer by pressing CTRL+D on your keyboard. 😉

Again, create new layer. Click on Rectangular Marquee tool and drag it into your image with a margin approximately 3px on left, top and right side just as shown below and do drag it up to the center of the actual height of your document.

New layer
New layer

Then select again your Gradient tool and drag it starting on top up to bottom without minding the height of your selected area.

Then you will have similar output just like the image below. Deselect again your selection.

The Output
The Output

Select the first layer of your document then click “add layer style” button on the layer window.

Effects Window
Effects Window

Click on the Stroke checkbox then on then 1px on the size, Position = Inside, Blend Mode = Color Dodge, then select the closest match color of your button. Click OK.

Now you have a nice glowing web 2.0 style button 🙂 You can adjust this as long as you want. 🙂 Enjoy!

The final output
The final output
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s