Make website buttons with the Gimp

By | 2010/07/15

How can I make neat looking buttons for my webpage?

With the gimp, it’s easy. Spice up your webpage with buttons to click on instead of just text links.

1. First, make a new image. Under File > New. 640×480 is fine.


2. Now let’s use the paint bucket tool to dump the background to a button color of our choice. I’m going to go with a random blue color.


Dump with the paint bucket tool:


3. Next click on the text tool, and then flip the color switcher to white. We are going to have white text.


4. Choose a nice font, then type out your button text.


5. Ok now with the rectangle select tool, select a rectangle roughly the size of the button you want around your text.


6. Click Edit > Copy Visible, then Edit > Paste as New Image.

09gimpbtn 11gimpbtn

7. Now with the new image, let’s give it a drop shadow. Click on Filters > Light and Shadow > Drop Shadow


8. On the Drop Shadow menu, I suggest bumping up the X and Y Offset to 12. Then click OK.


9. Your button is complete! Save as a png, and use that as your web button.


Here is the example clickable button:

Another example I made:

You could obviously be quite creative and make any sort of button desired. Buttons could be circular, square, odd-shaped, just an icon or image with no text, or whatever you desire.