This tutorial aims to teach a very simple way of getting a glossy effect on buttons, similar to the ones in OS X. Some Photoshop experience with the pen tool is needed, and it should take 10 – 20 minutes to finish.

1. Set up a new canvas of approximately 250px by 150px.

2. Select the rectangle tool from the toolbar, and change it to rectangular tool.

3. Give it a radius of 20px from the options window.

4. Make a rectangle approximately 200px by 25px. You can see the dimensions as you make it in the info window. This size is reference only.

5. Double click the layer to bring up the layer styles window.

6. Select the gradient overlay option.

7. If there is a two colour gradient drag the one from the left to the middle, and click the spot where it was and a new colour stop will appear.

8. Select the one in the left and give it this colour: #c3cfda, select the one on the center and give it this colour: #8491a0, use the same colour you used on the left colour stop (#c3cfda) for the one on the right. Drag the middle colour stop a bit to the right to make the lower half of the shape to have a smooth fade. These colours are only for reference, it is best if you use colours according to the colour scheme of your project.

9. Make sure your gradient overlay settings match these ones.

10. Select the stroke option on the layer style window, and give it a stroke of 1px and use the same colour as you used in the middle of the gradient (#8491a0). This step is optional.

11. Select the pen tool and make sure it is set for shape layers. It is a good idea to zoom in to 200-500% in this step. Make sure the style on the options window is set to none, and set the foreground colour to white.

12. Put the first anchor point in the upper left of the shape just where the curve starts. Press shift and put the second anchor point on the same spot in the upper right corner. When you press shift a straight line is formed between two anchor points.

13. Press the third anchor point where the curve is starting to finish and drag it a few pixels in a 90 degree fashion (use the shift button to get a straight line), imitating the curve of the shape. Put fourth anchor point a few pixels below the third and to the left, because you didn't use alt to take the curve away from the previous anchor point a small curve will be formed.

14. Press shift and put the fifth anchor point in approximately the same place as in the other side. It is a good idea to place a guide over the third anchor point to get the sixth one symmetrical. When you press the sixth anchor point drag it a few pixels upwards to create a similar curve as in the other side.

15. Finish the shape by clicking on the first anchor point and dragging the curve line to the left to match the curve of the first shape you made.

16. Get rid of the guide. Go to the layers window and set the opacity of the shape you just made to 30%. The normal state of the button is finished now, you can add some text or even a small icon or a simple logo.

17. To create the over version of the button click on the layer of the first shape you created and drag it to the ‘create new layer’ button below, this should create a duplicate shape right above it.

18. Double click the layer to bring up the layer styles and change the gradient in the middle to another colour, for example #7d97b5, and your over state button is done!! I suggest that you do an over state for the text as well, a good idea is to use a pillow emboss from the layer style options.

19. To finish up, export the over and normal states of your button in the format of you choice and you can use JavaScript to make your button work if you're doing a website. If you use flash, you can use the previous image for the down state of your button, and make a cool over effect in Photoshop by adding an outer bevel from the layer styles to the text.

You can access the working files at the bottom. Try to experiment with different gradients and shapes to get better results. You can add a little more depth by merging together your two shapes together and giving it a gradient overlay with dark edges and nothing in the middle.

Attachment	(click to download)
	tutorial.pdf
	buttons.zip