GIMP Tutorial: Trendy Glossy 3D Buttons

[KermMartian]

TUTORIAL: Making Glossy Buttons in the GIMP

Normal:


With lighting:


Step 1 Create a new transparent image, large enough that you can see what you're doing. You can always scale it down later. Any proportions work.

Step 2 Use the selection tools or the path tool and path->selection to trace out a closed selection for the shape of your button. Fill this with a solid dark color.

Step 3 Save the selection to a channel (Select-> Save to Channel), then create a new layer called Contents. Put text, images, or whatever you want to be on the button here.

Step 4 Create a new layer above Contents, called Gloss. Set the opacity of this layer to about 50% using the slider in the Layers palette. Load your shape selection from channel (Layers palette -> Channels tab -> rightclick on the channel and choose "Channel to Selection"), then hold [ctrl] and use the rectangular selection tool to remove the bottom half of the selection.

Step 5 Pull up two colors, white for the foreground and a medium gray for the foreground. Set the gradient mode to FG->BG, then drag the gradient from the bottom to the top of the current selection (middle to top of the button). The top of the selection should lighter, and the bottom darker. If they're reversed, Undo, then recreate the gradient in the opposite direction. It may help to hold [ctrl] while dragging the gradient to make it go in a straight vertical line.

Step 6 Now load the selection from channel again, and this time remove the top half of the selection. You should have exactly the part of the selection you didn't have before selected now. For this gradient you should use a very dark gray, even black, and a light gray. Still in the Gloss layer, drag the gradient out from top to bottom. For this gradient, the top of the selection should have turned out darker than the bottom. If not, Undo and reverse. When you finish this step, there should be a noticeable line between dark and darker in the middle of the button.

Step 7 Load selection from channel once more, then Select -> Shrink, Shrink by 2 pixels. Save to channel, load the original selection, then right-click on the channel named copy#1 and choose "Subtract from selection". Clear this area with [ctrl][k], then fill it with solid white. If it looks to stark to you, mellow it by undoing and using a light gray instead.

Step 8 Finally, create a new layer above Gloss called Highlight. Load the copy#1 channel to selection, Select-> Shrink, shrink by 2 pixels, then remove the bottom of the selection up to about 2 or 3 pixels above the midline. Set this layer to about 30-40% opacity, set your foreground color to white, and set your gradient mode to FG->Transparent. Drag from top to bottom of the selection so a lighter area appears at the top. If not, undo and reverse the gradient.

Voila! Enjoy. You can tweak layer opacity, widths, and the colors you use to achieve different effects. You can also blur the Gloss layer, which will produce a more realistic look. Some may prefer to make the light border 1 pixel instead of 2 pixels. Let me know if you found this tutorial helpful.

Lighting Effect
This can be added after the rest of the image is complete. Create a new layer underneath the Contents layer called Lights. Choose the Foreground color, and recall the color you used for the flat background. Use the V slider to get a much brighter value of the color, then choose [OK]. Go to the gradient tool, choose Radial and FG->Transparent, then drag from the center bottom of the image up to about 3/4 of the way to the midline. Tweak the opacity of this layer to ensure it doesn't overwhelm the rest of the image. This effect is better if it's subtle.
_________________

[allynfolksjr]

Do you know what I do hate?
Having this go over the TI calculator news feed.

[KermMartian]

[Punker Chick]

That's a really cool looking outcome. Great find!

[comicIDIOT]

*Great tutorial. Since it was made here.

Also welcome. If you aren't a bot please introduce yourself in the appropriate topic! If you have any graphic art to share we have topics for that as well
_________________


-Alex

[KermMartian]

Thanks for the correction, comicIDIOT. That does indeed look like a bot sort of post, but let's hope not. If not, I second comicIDIOT's request for you to post some work of your own.
_________________

[elfprince13]

[rthprog]

http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php

While I don't fully agree with statements "the underlying secret to beautiful user interface design is realism", he makes some good points.

Also, it's kind of amazing to think that you can do all of that (aside from noise) in CSS now...

[KermMartian]

Some very interesting points too, although a bit muted for me from his blatant fanboyism. I tend to think that like most graphical design trends, this one too will fade, and eventually we'll move on to something else.
_________________

[TheStorm]

We are already seeing a shift towards 2d tile like interfaces, look at the WP7 or the recent increase of Tiling window managers on linux. People are realizing that all this glossy stuff wastes screen realestate and you can have good looking UI's without it.
_________________

"Always code as if the person who will maintain your code is a maniac serial killer that knows where you live" -Unknown

"If you've done something right no one will know that you've done anything at all" -Futurama

"Have a nice day, or not, the choice is yours." Tom Steiner

<Michael_V> or create a Borg collective and call it The 83+
<Michael_V> Lower your slide cases and prepare to be silent linked. Memory clears are futile.

[julieth11]

Great tutorial, thank you very much, it turned out to be very helpful for me

[KermMartian]