Glossy/ Shiny button creation

[lwr]

Hi guys,
Shiny buttons and things seem to be the way to go at the moment. Everything looks glossy, and I think it's great. But try as I might to immitate such glossiness, I've been unable to get anything to look good. A great example of what I'm on about are the icons on the Quit... menu. Can anybody point me to a good guide on how to create such images? I've got the GIMP and Inkscape installed - do I need any other tools?
Thanks for your help.

Luke

[smartalecks]

do you have an example of the kind of glossy-effect you want?

[lwr]

Unless you've changed it, when you to System>Quit..., the log out, swith user, hibernate and restart buttons are good examples of what I'm hoping to achieve. There are lots on the Apple website too, such as this big 'X' (http://www.apple.com/uk/macosx/leopard/).

[smartalecks]

Those would be made in Inkscape. They could be done in the GIMP, but in Inkscape they are made "vector," so that they can be englarged without pixelization.
I am having trouble finding a specific tutorial for glossy icon creation in Inkscape, but this overview (http://www.deviantart.com/deviation/14703295/) shows the process well.

Some Gimp tutorial sites:

http://gug.sunsite.dk/?page=tutorials
http://www.pixel2life.com/tutorials/Gimp/All/

[lwr]

Thanks for that. I need to practice a lot, but I think I'm getting the idea. thanks for your help.

[themediamage]

I have written a tutorial for making glossy looking buttons with Inkscape.

Take a look here:
http://www.themediamage.com/content/view/77/55/

Thanks! :KS

[maruchan]

Check out the gradients on the X that Apple's got on their website. When you look at it, you see "shiny," but really it's just two gradient fills. One is in the background. It's black in the center and dark grey on the bottom of the X.

Then there's a shape (the "reflection" shape) overlaid with a simple gradient: light grey at the edge where it meets the background, going a bit darker as it moves away from that edge toward upper left.

That sharp edge - if you make it a softer edge you will get a less-shiny feel.

Anyway, same deal with the beveled outlines of the X - just shapes with gradient fills. You'll get the hang of this stuff with some practice. It's easy if you just focus on the fill colors and shapes, and what they're doing.

Required software: Anything that lets you draw stuff on the screen...

PS if you work in the GIMP, you can try this script too: http://registry.gimp.org/plugin?id=4705

[Unterseeboot_234]

I had to mention XaraLX on this topic. See attachment. The transparancies are just so real-time and interactive in Xara that 3D stuff is a pleasure. Moreover, the text can be attached and when the graphic gets resized, the text follows along. There are limitations to this free XaraLX (Linux) version but I prefer it over Inkscape. Just wished Xara would export SVG. It does do pdf, png, bitmap and .ai.

[themediamage]

Check out the gradients on the X that Apple's got on their website. When you look at it, you see "shiny," but really it's just two gradient fills. One is in the background. It's black in the center and dark grey on the bottom of the X.

Then there's a shape (the "reflection" shape) overlaid with a simple gradient: light grey at the edge where it meets the background, going a bit darker as it moves away from that edge toward upper left.

That sharp edge - if you make it a softer edge you will get a less-shiny feel.

Anyway, same deal with the beveled outlines of the X - just shapes with gradient fills. You'll get the hang of this stuff with some practice. It's easy if you just focus on the fill colors and shapes, and what they're doing.

Required software: Anything that lets you draw stuff on the screen...

PS if you work in the GIMP, you can try this script too: http://registry.gimp.org/plugin?id=4705

I'm not sure which X you mean, couldn't find it. It does ring a bell though. I agree, you give the illusion of shininess very easily, with just 2 gradients.

The Shrek plugin for GIMP looks good, I'll have to have a play with that.

[maruchan]

The 'X' is the one lwr referred to earlier in the thread. There's a link up there too. :)