Glossy Orange web 2 button

Just felt like making yet another web 2.0 button, and as I have said before, what I think characterize a web 2.0 button, and not any other button styles is smooth corners, gradients and some glossiness and reflection.

This is how it's going to look like when it's finished, and at the bottom you can download the Photoshop work file if you want.

First of, use the rounded rectangle tool to drag out the main shape, in the layers menu right click the shape layer and choose rasterize layer.

Now double click the layer to get to the layers styles menu and give it the following settings.

web 2.0 button step 1

web 2.0 button step 2

web 2.0 button step 3

Now write some text in a new text layer, as I did and place it inside the button, also if you want you can draw or find a shape and place there.

Now for some glossiness, make a new layer, hold down ctrl and click the shape layer to load the selection, then with the selection tool, drag and intersect with the first selection the top part, as shown above.

web 2.0 button step 4

Make a gradient going from white to transparent and drag it within the selection, so it looks like in the image below.

web 2.0 button step 5

The last thing we need now, is a reflection underneath, so copy the shape layer we made at first, and then drag it down beneath the button.

Load the selection and with the gradient from white to transparent drag in the selection so it looks like in the image below.

And you are done.

Download the Orange web 2.0 button Photoshop file here.

abhijit says: 2007-12-03

Which version of PS have you used? I could not follow using version 7 :-(

gnes says: 2007-12-03

nice dude!

tim says: 2008-02-01

hi, iChr(34)ve tried ur tutorial..when i use gradient (white to transparent), there was some places (i mean the eclipse shape..)that shouldnChr(34)t be glossy..is there a way to remove this unwanted glossy

Admin Bob says: 2008-02-02

hi Tim, IChr(34)m not sure I understand your problem, but IChr(34)ll try anyway.. What you do is to have the whole shape selected, then extract an elliptical selection from it.

Admin bob says: 2007-12-16

hi edson, seem quite wired that rasterize layer is disabled, but one thing that can disable functions is if the image you made is not in rgb format. try going to the top menu - image - mode - see if its set to rgb mode and not indexed colors or something like that.

edson says: 2007-12-16

hi im a beginner in photoshop i donChr(34)t get this one out use the rounded rectangle tool to drag out the main shape, in the layers menu right click the shape layer and choose rasterize layer. after i create a rectangle and right click on that new layer in layers tab rasterize layer is disabled can you please elaborate this one out... in-order for a beginner like me to go on with your tutorials. many thanks

edson says: 2007-12-16

hi im a beginner in photoshop i donChr(34)t get this one out: use the rounded rectangle tool to drag out the main shape, in the layers menu right click the shape layer and choose rasterize layer. - after i create a rectangle and right click on that new layer in layers tab rasterize layer is disabled can you please elaborate this one out... in-order for a beginner like me to go on with your tutorials. many thanks

Fhatuwani Mutula says: 2007-11-09

The actual button is on point,but the shadow is just a bit too much.

Admin Bob says: 2007-12-03

hi abhijit, I used Photoshop CS3 its also known as version version 10. But which part of the tutorial gets you stuck? maybe we can work around it with an alternative method.