CEMETECH
Leading The Way To The Future
Login [Register]
Username:
Password:
Autologin:

Don't have an account? Register now to chat, post, use our tools, and much more.
Latest Headlines
Online Users
There are 115 users online: 8 members, 90 guests and 17 bots.
Members: amazonka, APotato, Dianzi tian, gbl08ma, ProgrammerNerd, sonic2000gr, tr1p1ea.
Bots: MSN/Bing (2), Spinn3r (3), Magpie Crawler (1), Yahoo! Slurp (1), Googlebot (10).
RSS & Social Media
SAX
You must log in to view the SAX chat widget
Author Message
KermMartian


Site Admin


Joined: 14 Mar 2005
Posts: 59513

Posted: 18 Dec 2006 09:09:48 am    Post subject: GIMP Tutorial: Trendy Glossy 3D Buttons

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.
_________________


Back to top
allynfolksjr


Kerm Sucks


Joined: 20 Apr 2005
Posts: 1427
Location: Awesometown, US

Posted: 18 Dec 2006 07:26:49 pm    Post subject:

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


Site Admin


Joined: 14 Mar 2005
Posts: 59513

Posted: 19 Dec 2006 06:18:58 pm    Post subject:

allynfolksjr wrote:
Do you know what I do hate?
Having this go over the TI calculator news feed.
/me shrugs. Perhaps one day I shall split it up for ya.
_________________


Back to top
Punker Chick


Newbie


Joined: 02 Aug 2011
Posts: 1

Posted: 02 Aug 2011 01:23:37 am    Post subject:

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

Last edited by Punker Chick on 26 Aug 2011 12:28:00 am; edited 1 time in total
Back to top
comicIDIOT


Mobile Administrator


Joined: 01 May 2006
Posts: 5829
Location: SFBA, California

Posted: 02 Aug 2011 01:25:24 am    Post subject:

*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 Smile
_________________


There are two types of people in the world: those who can extrapolate data from incomplete data
Back to top
KermMartian


Site Admin


Joined: 14 Mar 2005
Posts: 59513

Posted: 02 Aug 2011 08:54:47 am    Post subject:

Thanks for the correction, comicIDIOT. Wink 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.
_________________


Back to top
elfprince13


OVER NINE THOUSAND!


Joined: 23 May 2005
Posts: 11057
Location: A galaxy far far away......

Posted: 02 Aug 2011 09:51:35 am    Post subject:

KermMartian wrote:
Thanks for the correction, comicIDIOT. Wink 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.

Says nothing on her profile except Organic Chemist. I suspect we just picked up a googler looking for glossy buttons.
_________________
StickFigure Graphic Productions || VSHI: Vermont Sustainable Heating Initiative


Back to top
rthprog


Expert


Joined: 21 Sep 2007
Posts: 726
Location: Pittsburgh, PA

Posted: 02 Aug 2011 02:08:35 pm    Post subject:

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...
Back to top
KermMartian


Site Admin


Joined: 14 Mar 2005
Posts: 59513

Posted: 03 Aug 2011 11:38:40 am    Post subject:

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.
_________________


Back to top
TheStorm


NOU!


Joined: 26 Mar 2007
Posts: 2466

Posted: 03 Aug 2011 10:09:55 pm    Post subject:

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.
Back to top
julieth11


Newbie


Joined: 29 Aug 2011
Posts: 1

Posted: 29 Aug 2011 07:05:40 am    Post subject:

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

Last edited by julieth11 on 22 Jun 2013 04:23:55 am; edited 1 time in total
Back to top
KermMartian


Site Admin


Joined: 14 Mar 2005
Posts: 59513

Posted: 29 Aug 2011 10:55:52 am    Post subject:

julieth11 wrote:
Great tutorial, thank you very much, it turned out to be very helpful for me Cool
Most welcome, julieth. I hope that you are not a spambot.
_________________


Back to top
Display posts from previous:   
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

Go to Registration page
   
View previous topic :: View next topic  
Page 1 of 1 All times are GMT - 5 Hours

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

© Copyright 2000-2014 Cemetech & Kerm Martian :: Page Execution Time: 0.042321 seconds.