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:

Create a new image 44px wide by 18px high

Step #2

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

Click the Background color square

Pick a dark color. I picked DD710E

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)

Choose background color

You should now have this:

Step #5

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

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:

Select the top half of the new 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:

Before

After:

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