Make Shiny Buttons for Web Pages Quickly

This tutorial will show you a very quick and easy way to make basic shiny buttons in Photoshop or in the GIMP. I will outline how to do it Photoshop, but the tools and steps are very similar in the GIMP as we will only be using the rectangle selection tool and the gradient tool.

Step #1

Create a new image (Ctrl+N). For this one we'll make it 44x18:

Step #2

Choose a dark color for the base color (Click the Background color square):

Step #3

Create a new layer (Ctrl+Shft+N) and select the entire layer (Ctrl+A).

Step #4

Fill the layer with the background color (Edit -> Fill)

You should now have this:

Step #5

Create a new layer again (Ctrl+Shft+N) and choose the "Rectangle Select" tool:

Step #6

Zoom in, so that you can see what you are doing (Crtl++). Drag the Rectangle Select tool to select the top half of the layer:

Step #6

Choose the gradient tool:

Step #7

Choose the FG to transparent gradient:

Step #8

Drag the gradient tool over the image layer:

After:

Step #8

Save image (Ctrl+S).

Final product

This is a very basic button, but I found that it works well for most things and is very easy to do. I thought most of the tutorials about how to do this were too many steps and didn't look much different than this in the end. You can also make another button of a similar color and use it as a :hover state or javascript rollover image.

I hope you found this tutorial helpful in some way. Thanks for reading and enjoy!
Back to Top