5 Minute Web 2.0 Button in Photoshop

Design, Tips and Tricks, Tutorials Add comments

Make This Button in Just 5 Minutes With Photoshop
Click Here

Start out by making a new file, press Cntrl + N and make it the default photoshop size.

Using the rounded rectangle tool with a radius of 30, drag out a rectangle the size you want you button.

Add a gradient style to it with the settings shown below

Gradient-Settings

Gradient Settings:
Gradient

And add a 2px stroke to it, I used the color #0e9800.

Then add an inner shadow to it with the settings shown below

Inner Shadow Settings:
Innershadow

Next use the rounded rectangle tool with the same size radius and drag out a rectangle so it looks like this

White Rectangle

Cntrl + Click on the vector mask thumbnail in the layers pallet to select the layer. Then press Ctrl + Shift + N to create a new layer. Press D, and then Cntrl + Backspace to fill the new layer in white. Then press Cntrl + D to deselect the layer.

You can hide the vector shape we just made now or delete it.

Now to make the layer look glossy, press Q to make a qiuck mask, and then G to use the Gradient tool. And use the Foreground to Background gradient. Drag the gradient from top to bottom on the white layer and it should look like this

Quick Mask

Quick mask

Then press Q again to make the selection and hit Delete to make the fade to transparent. Then Cntrl + D to deselect the layer.

And thats it!

Your button should look something like what I have below.

Green Button


Leave a Reply

Copyright ©2008 Tweeaks.com
Entries RSS Comments RSS Login