Glass buttons

Discussion in 'Design and Graphics' started by trainguy77, Mar 18, 2006.

  1. macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #1
    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?
     

    Attached Files:

  2. macrumors member

    hikingnclimbing

    Joined:
    Jan 10, 2006
    Location:
    Gorham, ME
    #2
    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.
     
  3. Moderator emeritus

    Joined:
    Jun 25, 2002
    Location:
    Gone but not forgotten.
    #3
    You should use mixed case instead of uppercase.
     
  4. macrumors 68040

    matticus008

    Joined:
    Jan 16, 2005
    Location:
    Bay Area, CA
    #4
    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).
     
  5. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #5
    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?
     
  6. macrumors 68040

    matticus008

    Joined:
    Jan 16, 2005
    Location:
    Bay Area, CA
    #6
    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.
     
  7. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
  8. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #8
    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?
     
  9. macrumors 601

    Chaszmyr

    Joined:
    Aug 9, 2002
    #9
    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
     
  10. Moderator emeritus

    Joined:
    Jun 25, 2002
    Location:
    Gone but not forgotten.
    #10
    Your gradients need to be steeper to simulate 3D better. There isn't enough contrast.
     
  11. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #11
    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?
     
  12. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #12
    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.
     

    Attached Files:

  13. macrumors 603

    OutThere

    Joined:
    Dec 19, 2002
    Location:
    NYC
    #13
    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...:p). 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. :eek:
     

    Attached Files:

  14. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #14
  15. macrumors regular

    Joined:
    Jun 11, 2005
    Location:
    To Live n Die in L.A. California
    #15
    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...
     
  16. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #16
    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.
     
  17. Lau
    Guest

    #17
    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.
     
  18. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #18
    Here is another shot at it.....with a shadow script run on it. To dark. Maybe I will stick with OutThere's button style.
     

    Attached Files:

  19. macrumors 68040

    decksnap

    Joined:
    Apr 11, 2003
    #19
    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.
     

    Attached Files:

  20. macrumors 68040

    decksnap

    Joined:
    Apr 11, 2003
  21. macrumors 65816

    virus1

    Joined:
    Jun 24, 2004
    Location:
    LOST
    #21
    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
     
  22. thread starter macrumors 68040

    trainguy77

    Joined:
    Nov 13, 2003
    #22
    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?
     

Share This Page