Web Site Design Quotes - Free Web Site Design Quotes - http://www.designersplayground.com
Specular Buttons
http://www.designersplayground.com/articles/33/1/Specular-Buttons/Page1.html
By Alan Hettinger
Published on 06/18/2005
 
Good basic technique for websites.

How to Create Cool Buttons
We’ll make a button first, then we’ll do some text later on. Open up Photoshop, make a new layer, and draw a small circular selection with the elliptical marquee tool. Hold SHIFT to make a perfect circle.



Now you need to fill it, but to add some depth to this mutha, we’ll use the gradient fill tool. Select the gradient tool, and select “Radial Gradient.”

I’m going to make an orange one, so select your foreground color as light orange, and your background color as dark orange.


Now lets start on the highlight. This part is easy if you know the right tricks. I don’t know the right tricks though, so you’re basically screwed.

Create a new layer, and draw another circle in front of your original, but use a white fill.



How to Create Cool Buttons page 2

Now get out the pen tool. You just need to draw / drag out three points. It might help to zoom in first. Follow the diagram. This is going to make an outline for your specular highlight.

Click on the first point you drew to close the path.


Your path needs to change into a selection, so click the “Paths” tab. (It should be next to your layers tab). Click on the dotted circle at the bottom of the paths window. Poof! Invert the selection with the select menu (SELECT > INVERSE).

Now cut your new inverted selection (CTRL + X)


Cool, but it looks more like a yin-yang than a button. We need to make some adjustments.

Get the lasso tool and make a selection that cuts through the middle of the circle. Doesn’t matter if it’s not very straight. Feather the selection (SELECT > FEATHER) 5 to 10 px depending on the size of your circle,
and cut. (CTRL + X)