Specular 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.

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)

Your object should look something like this. Now you can add to it to make it suit your needs.

Here I added a light drop shadow and some text. You can use this technique on any number of applications if this is the look you are going for.