Biju Subhash: Create a web button in photoshop

Create a web button
Author: Biju Subhash Date: 17th of October 2008

Here's How:

Select the "Gradient Overlay" first. Open the Gradient picker and select "Violet, Orange".

Settings: Blend mode is normal, Set gradient is reverse, Style Linear and the angle is 90°.
Then apply "Stroke Effect". Size is 1px, color is violet and other settings are default.
And finally ad a "Drop Shadow" effect. Opacity is 30%, Distance 2px and the size is 3px. Other settings are default. Layer style effects are completed. Click on the OK button.
Create a new layer. Name it Glare
Press and hold the "Crtl" key and press on the "Web button" layer. You will get a selection from the "Web button" layer.
Go to the "Select" menu, Select Modify then "Contract". Set the Contract by value 5 pixels

Now select the Eliptical Marquee tool. In the Options bar, Click on the third button "Substract from selection".

Select the gradient tool. Set the foreground to white. In the option bar click on the Gradient picker and select "Foreground to transparent". Drag the gradient color bottom to top.

Create an another layer. Name it Glow. Get selection from the "Web button". Follow the step 11.
Then contract the selection. Follow the step 12. Value is now 7
Feather the selection. Feather radius value is 10 pixels.

Select the brush tool. In the option bar, set the radius of the brush is to 60 pixels. Mode is screen and the opacity is 40%. Set the foreground color is to white.
Paint the color left to right and only apply it on the bottom of the selection. Don't paint it on the top glare area.
Move the layer down. Just behind the "Glare" layer
Put a text with white color. Add a layer style " Drop shadow".
That's it.

Bookmark this tutorial online