Glass buttons

[trainguy77]

What do you think of this button? Something is wrong with it. I made it in GIMP. I am a noob at making buttons.(or anything) So what can i do to make it look better?

 

[hikingnclimbing]

I'd try using a font other than Times. Something san-serif (without the tails on the letters, i.e. Arial-esque fonts) would probably work better. Or at least that's been my experience with buttons. Also try switching the color of the font to something with a bit more contrast. Because of the darker color on top and the lighter on the bottom, both black and white can blend in a bit with either of those shades. Or maybe just a more prominent font (something bold, for example) would work better with black and white.

Just my 2 cents.

 

[bousozoku]

You should use mixed case instead of uppercase.

 

[matticus008]

You should also send the text a few layers back. The glass look works best if you don't have anything floating on top of it. If you don't have any transparent layers behind the text, create two or three on top of it to "soften" the look of the text (and also change the text as others have recommended).

 

[trainguy77]

You should also send the text a few layers back. The glass look works best if you don't have anything floating on top of it. If you don't have any transparent layers behind the text, create two or three on top of it to "soften" the look of the text (and also change the text as others have recommended).

Right now it goes
Glass
text(transparent background)
background(transparent corners)
transparent layer

So you say I add layers behind the text?(In between text and background)
Why would you do that?

 

[matticus008]

Right now it goes
Glass
text(transparent background)
background(transparent corners)
transparent layer

So you say I add layers behind the text?(In between text and background)
Why would you do that?

Not behind the text, in front of it. Right now the text just looks pasted on top. Your glass effects are contained in a single layer? Since your glass isn't particularly "glossy," you might also consider just altering the text to look engraved, which would improve the tactile feel of the button.

 

[trainguy77]

I followed this to step 7: http://www.squaregear.net/gimptips/glas.shtml

 

[trainguy77]

How would I get them to be more 3d? Like the tabs at the top of the page. I know how to put a shadow on it. Thats not what I am looking for. The lighter Colors how do you do this?

 

[Chaszmyr]

I don't want to be rude, but I think it's pretty bad. The font is unexciting, plain black to plain white is pretty unappealing, the button is just too big, and the rounded edges arent very smooth at all. Maybe some shadows might help

 

[bousozoku]

How would I get them to be more 3d? Like the tabs at the top of the page. I know how to put a shadow on it. Thats not what I am looking for. The lighter Colors how do you do this?

Your gradients need to be steeper to simulate 3D better. There isn't enough contrast.

 

[trainguy77]

I don't want to be rude, but I think it's pretty bad. The font is unexciting, plain black to plain white is pretty unappealing, the button is just too big, and the rounded edges arent very smooth at all. Maybe some shadows might help

I want your honest opinion, because I will admit it I am a noob at these kind of things. So thank you. You were not being rude at all. Now on to the button. Here is the site it will be on just so you see the colors. For the first of the two I kind of like how it fades in.
http://www.southcalgary.org/youth/newsite/index.shtml
and another set of buttons:
http://www.southcalgary.org/youth/newsite/index_2.shtml
On the second set I set the DPI to 150 from 75 to try fix the edges. It helped a little but not that much. The second one also has some shadows. But I don't like the way they look. I am not sure how to make shadows that are part of the image.(not behind) I will try re-make them smaller and with the gradient going throughout the whole image.(if that’s what you mean) Right now it only "transitions" about 10 px.
Any other suggestions? How do you make the shadows/button more 3d?

 

[trainguy77]

I created one a little different. I think it came out to small. But if I stretch its going to look bad. But here it is. I used a different style in making the shape. Is it any better? I zipped it so I could include the GIMP file.

 

[OutThere]

I played around with it a bit.

The button itself is the same as your original one, but I erased your text, played slightly with the levels to adjust the appearance and make it a little gentler, and then put in my own text (20pt Futura Med.) I also put in a 2 pixel grey "stroke" or border around the button, and a very slight grey outer glow. (Sometimes the cheesy photoshop effects can look good...). It's semi-transparent in PNG format, and shows up well against the blue color you showed for your site, and white.

If I knew anything about GIMP, I'd explain what you could do better...but my knowledge ends at Photoshop.

 

[trainguy77]

The one you created is on the second one.
http://www.southcalgary.org/youth/newsite/index.shtml
http://www.southcalgary.org/youth/newsite/index_2.shtml

I am not sure if I like it. Its better then mine. But I am not sure. I have never had an eye for colors. What does everyone else think?

 

[hookahco]

try giving the letters an inner shadow and bevel to make them look like they actually go into the button... its hard to explain but those of you who know photoshop will know who im talking about...

 

[trainguy77]

Do you have an example? I tried the bevel, it did nothing. But its a script so that may be why. Maybe no one has documented this in GIMP because it is hard to explain.

 

[Lau]

I am not sure if I like it. Its better then mine. But I am not sure. I have never had an eye for colors. What does everyone else think?

I'm not sure exactly what style website you're trying to create, in that there's nothing else on that page. But as glass buttons go, I would say OutThere's is really clean looking, and fits in with the glass theme really well, certainly better than with the serif typeface you posted above.

 

[trainguy77]

Here is another shot at it.....with a shadow script run on it. To dark. Maybe I will stick with OutThere's button style.

 

[decksnap]

These things can be more complicated than they look. Here's the layers of mine split up as an example. Most notably, I think you're missing some inner shadowing around the edges.

 

[decksnap]

Also... your buttons are HUGE!

 

[virus1]

give me your email, and i will email you the png/psd to my 'tar. nice and glassy if you ask me. then you can mess with them techniques till you got a button shape.

otherwise: anti-alias (if gimp can), and shrink it to a good size

 

[trainguy77]

Does anyone know any good books about this? Any good webpages that could help me out with GIMP? As this might take to long teaching me on these forums. I do want to learn, however this may not be the way. How did you guys learn to do this?