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.

01gimpbtn

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.

02gimpbtn

Dump with the paint bucket tool:

03gimpbtn

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

04gimpbtn

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

08gimpbtn

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

05gimpbtn

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

10gimpbtn

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

06gimpbtn

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

07gimpbtn

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.

Sweet!

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.