Okay, here's a quickie. Unlike all my other tutes, for this one I'm going to assume you know the basics of how to use the GIMP. If you don't know how to open a new layer, or save, etc, etc, I suggest you hit the 'Help' button on your GIMP.

Right. I've made a button for my GIMP tutes which you can see on this blog to the right. I wanted it to match the design of the rest of this site, so I took inspiration from the 'Free Rice' button (wicked site - go visit) also on the right. Here's how to make your own.

---

Step 1: Work out what you want. In this case, I wanted a similar button, but a bit larger. I opened the image file of the Free Rice button to compare. Then I opened File-->New and created a new template of 130 x 31px. Obviously, yours may need to be a different size. :)



Step 2: To make it easier to align my text and layers, I opened up a grid. (Note that I didn't 'Snap to Grid' because I wanted freedom to move things anywhere I want.)


Step 3: Create the second layer. I want a less wide, second layer to go on top of my first. I use my grid to cut my second layer to the size I want. (Expand picture for further instructions if needed.)



Step 4: Now I have a second layer (here coloured pink for clarity) I want to add a gradient of colour to each layer.


Step 5: I'm hoping you know how to do a gradient!... :) Just follow the steps in the picture if you don't.


Step 6: Add your text. I have two layers of text. The word 'GIMP' was Copperplate Gothic Bold, 14px, white. The word 'Tutorials' was Aharoni Bold, 17px, white.

Step 7: Add the details. Use the pencil tool for crisper lines. I drew two dark lines, 1px wide, as vertical borders on the second layer. Then I added two pale dots, 3px wide, as 'nails' on the background layer. Here's a closeup:


Job done. Check out the finished product at the side. Turn it into a working button by using HTML to turn the image into a link.