Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Glossy Button

Glossy Button


Start with a white background, then use the elliptical marquee tool to create an oval shape.

image 1

Set the foreground colour to Blue (I used #1A85D7) and Background ( I Used #1954AB) to Dark Blue then use the gradient tool to fill the selection from top to bottom using the foreground and background..

image 2

Create a new layer then go to "SELECT > MODIFY>CONTRACT" then enter 2. Click ok.

Go to SELECT>Feather and enter 1 then Click OK.

image 3

Select the Brush tool and choose a 15 Pixel Hard Brush. Now open the Brush Dynamics pallete (by click the image 4 icon on the top bar. Select "Other Dynamics" Set as follows:

Opacity Jitter=0, Control = Fade and enter 20 into the box next to it:

Set the Foreground color to #89C9FB then while holding down the shift key, use the brush tool paint from left of selection to right. It should fade out like the screenshot on the left.

image 5

Hit CTRL+D to deselect. now add a dropshadow to the first layer by double clicking on it or go to LAYER>LAYER STYLE>DROP SHADOW

Your image should now look like this (left).`

image 6

You can add any text with any effects to the button. I just add a simple text with a drop shadow.

image 7

You can turn this button into some cool shape buttons by applying the distort filter to it. But first, link all layers (except the background) together then hit CTRL+E to merge the layers, or go to LAYER>MERGED LINKED.

image 8

Now go to Filter>Distort and play with some of the filters, works best with Wave, Twirl, Ripple and ZigZag.

image 9 image 10 Glossy Button


Author's URL: Tutorialwiz.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Glossy Button"

Captcha