Gimp Tutorials -- 3d Buttons


I've seen some quite a few nice looking buttons on web pages, and wanted to make some of my own. I tried to find a quick tutorial on making them, but didn't find anything to my satisfaction, so after toying with this and eventually making some I did like, I decided to write up this tutorial.

-- Jesse Norell
jesse@kci.net


Note: I'm using both the new and old version of the gimp. I would use the new one entirely, except it currently doesn't have all the plug-ins needed (or at least I couldn't find them). Specifically, it's lacking composite.

1.

Open a new image a little larger than the button size. For this example I'm using 80x80. In practice, a little smaller will probably work better - this button looks a little large for a web page. (just scale it down, and it looks fine)

2.

Using the ellipse selection tool, select a circle (this will be the outside edge of the button). I find making the working space large and zooming in on the image, then using the grid for accuracy works best to get a round circle. (as opposed to a square one?) It'd be cool if someone with plug-in know-how would modify the ellipse tool to add an option for drawing perfect circles. (hint hint)

3.

Now use the blend tool to fade black to white within the circle. You can use either linear or radial fade, and change the direction/angle of the fade to change the perceived light source. Most any variants I've tried have looked pretty nice. (I'd think other shapes besides circles would look good too, but I've not tried them).
graphics really give this tutorial a better effect.

4.

Now select another circle inside this one. It'll be the middle of the button's border, so pick an appropriate size (about 4 pixels inside the outer border). Fade this circle in the opposite direction.
imagine a double-faded circle jobbie...

5.

Select another circle the same distance inside that last one, and fill it with black. You now have the button border. You'll want to save this image, probably to disk if you're going to be making several buttons of the same size/appearance.
whoa.  a ring!
(we'll call this ring)

6.

Now, while that same inner circle is selected, duplicate this image a couple times (ctrl-d). With the first ring duplicate, fill the selection with white, then invert the selection (ctrl-i) and fill with black. Then select all (ctrl-a) and Gaussian blur this (about 3 pixels in our example). If you're saving images for future use, this is a good one to save, too.
la-di-da...  You really should view the graphics, man!
(we'll call this mask)

7.

With another duplicate of ring, invert the selection (ctrl-i), and clear that out. Then invert the selection again, so you have a circle selection - this is the inside of the button, where you can stick a nifty little image or do text tricks, or whatever. We'll keep our example simple: color fill, and add text.
God Loves You.  Really!
(we'll call this the button face)

8.

Now simply composite ring with face, using mask as the mask. Viola, a simple Button.
I Love You, Jennifer!
Here's what using a radial fade looks like, as a comparison:
But more importantly, I Love You, Jesus!

I think the ring looked a little better in most of my other tries... there's too much white in this one. Actually, I bet it's because I was always using a colored background before now. But you get the gist of it.


I'm working on finding ways to make the button face look more 3 dimensional, too. I think you can get a "raised", yet flat-faced button using shadow effects, but all my attempts have ended too washed-out so far (anyone care to tell me how this should be done?). Another thing you might play with is using the pinch plug-in, like so:
Smile... we're almost done.
It'd look alot better with some lighting effects, methinks. I'll update this tutorial if/when I get that part figured out. Till then, have fun, and God Bless!

big, random number