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
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.
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)
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)
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).
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.
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.
(we'll call this ring)
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.
(we'll call this mask)
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.
(we'll call this the button face)
Now simply composite ring with face,
using mask as the mask. Viola, a simple Button.
Here's what using a radial fade looks like, as a comparison:
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
me how this should be done?). Another thing you might play
with is using the pinch plug-in, like so:
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!