Making a button look pressed?

Discussion in 'Design and Graphics' started by christapherWayn, Dec 14, 2006.

  1. christapherWayn macrumors newbie

    Joined:
    Dec 14, 2006
    #1
    Hey folks, just wondering if i could get some tips on how to make a button look like its been pressed... i can make 'gel' buttons all day long, but i have a hard time picturing the way to shade them to make it look like its been 'pressed' (ie. making it look curved inward, not outward)

    any tips or know of any tutorials anywhere?

    [​IMG]
     
  2. LeviG macrumors 65816

    Joined:
    Nov 6, 2006
    Location:
    Norfolk, UK
    #2
    tip:
    get a bit of paper and then put a pin through it and pull, will give you the basic lighting, then tweak it till youre happy, or try and find something thats got a dome recessed into it
     
  3. christapherWayn thread starter macrumors newbie

    Joined:
    Dec 14, 2006
    #3
    i dont think i did it right, all i ended up with was a piece of paper with a whole in it :p
     
  4. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #4
    put an inner shadow with the light source coming from the top. you will need a bit of tweaking tho
    btw:instead of making the bright orange a radial gradient, makie it an elliptical gratient and stretch out the sides and put it right at the bottom
     
  5. mac 2005 macrumors 6502a

    mac 2005

    Joined:
    Apr 1, 2005
    Location:
    Chicago
    #5
    All I got was a rock!
     

    Attached Files:

  6. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
  7. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #7
    maybe even change the white gradient to a grey/black one
     
  8. mac 2005 macrumors 6502a

    mac 2005

    Joined:
    Apr 1, 2005
    Location:
    Chicago
    #8
    Ha! Ha! Ha!

    Get it? It plays on the word "holes" because Charlie Brown made too many holes in his ghost costume and the word "hole" because of poking a pin through the image and because of the "All I got was a ..." reference?

    Bwa-ha-ha-ha-ha!

    <coyote howl><cricket sound><lone man coughs></coyote howl></cricket sound></lone man coughs>

    :(
     
  9. MrSmith macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #9
    It'll cost you 25 USD to get a pat on the back for asininity ;) :D
     
  10. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #11
  11. decksnap macrumors 68040

    decksnap

    Joined:
    Apr 11, 2003
    #12
    Well if your doing aqua, just do it the way Apple does it and don't depress it at all. Just change the color.
     
  12. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #13
    That makes more sense anyway. I have a phone with real buttons like that and they don't really look any different when pressed (except that the sides disappear under the surface of course, and my finger's in the way, and… never mind). Anyway, a "backlight" that turns on and off makes more sense than anything.
     
  13. obeygiant macrumors 68040

    obeygiant

    Joined:
    Jan 14, 2002
    Location:
    totally cool
    #14
    you could just "flip" it 180 degrees. Its only "pressed" for an instant so it might work.

    by the way, maybe you could enlighten us as to how you make the "gel" look.
    cuz it looks cool.
     
  14. Killyp macrumors 68040

    Killyp

    Joined:
    Jun 14, 2006
    #15
    I would shade it from top (100% transparency) to around 50 % transparency at the bottom, with black, and then add a shadow along the top rim, fading out before half way down...
     
  15. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #16
    Here is the one mentioned above(hope I got that right :eek: ) and something I came up w/

    I can give you the PSD file for it(both of them) if you want!
     

    Attached Files:

  16. anthony113 macrumors member

    Joined:
    May 24, 2005
    #17
    try an inner bevel in photoshop using the blending options
     
  17. Nym macrumors 6502a

    Nym

    Joined:
    Oct 4, 2006
    Location:
    Porto, Portugal
    #18
    I'd use a Inner Shadow, it gives the feeling that the button is really being pressed down.
     
  18. JasonElise1983 macrumors 6502a

    JasonElise1983

    Joined:
    Jun 2, 2003
    Location:
    Between a rock and a midget
    #19
    i like your second option. Really plays into that gel thing, that only part of it is pressed, just like if you pressed a rubber ball. It only looks pressed where you touched it.
     
  19. OutThere macrumors 603

    OutThere

    Joined:
    Dec 19, 2002
    Location:
    NYC
    #20
    I played around for a while (actually without reading your post), and came up with this, using an inner shadow:

    [​IMG]
     

Share This Page