How do I make a glossy button...

Discussion in 'Digital Photography' started by Kingsly, May 4, 2006.

  1. Kingsly macrumors 68040

    Kingsly

    #1
    ... like the country flags in iTms, or *gasp* the vista start button, in photoshop?
    I want to make a logo for my website.
    -Thanks
     
  2. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
    #2
    Try googling for photoshop tutorials....................
    Or posting the question in Design & Graphics.
     
  3. Peyton macrumors 68000

    Peyton

    Joined:
    Feb 2, 2006
    #3
    Its all about gradients, just play around with inner shadows, bevel, emboss, you'll find something that works, then refine it.
     
  4. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
  5. iGary Guest

    iGary

    Joined:
    May 26, 2004
    Location:
    Randy's House
    #5
    Type in "Aqua Button" into Google, and you'll get an assload of tutorials.
     
  6. Kingsly thread starter macrumors 68040

    Kingsly

    #6
    Yeah, it should... I screwed up. Just look at the time I posted!
     
  7. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #7
    NP, someone will probably move it... I hope. They'll notice if someone bumps a marketplace thread once or twice, but not stuff like this.
     
  8. Kingsly thread starter macrumors 68040

    Kingsly

    #8
    Mods, pleaassee move this thread!

    BTW, here is the fruit of my efforts...
     

    Attached Files:

  9. grapes911 Moderator emeritus

    grapes911

    Joined:
    Jul 28, 2003
    Location:
    Citizens Bank Park
    #9
    Not bad, but the letters look more like they are on the button, rather than in the button. You are going for in the button, right?
     
  10. jelloshotsrule macrumors G3

    jelloshotsrule

    Joined:
    Feb 7, 2002
    Location:
    serendipity
    #10
    i'd imagine the shadow is the main thing giving that effect, yeah?

    not sure what he's aiming for though of course.

    i have never actually tried to make aqua buttons. maybe i should, just to learn
     
  11. grapes911 Moderator emeritus

    grapes911

    Joined:
    Jul 28, 2003
    Location:
    Citizens Bank Park
    #11
    Maybe. I'm not the foremost expert on aqua buttons. I've only made a few myself (and they weren't too good), but something seems off. I think it could be the shadow.
     
  12. Oryan macrumors 6502a

    Oryan

    Joined:
    Apr 1, 2005
    Location:
    Lincoln, NE
    #12
    It looks to me like the shadow from the letters is going opposite the shadow from the button. :confused:
     
  13. Kingsly thread starter macrumors 68040

    Kingsly

    #13
    I was using Photoshop elements 2 (PS:E 4 is in the mail!) which does not support such goodies as bevel & emboss, channels, or customizing drop shadows, glows, etc. Like I said, Im just waiting for the Fed-Ex truck...

    Would a shorter drop shadow make it appear in button?
     
  14. grapes911 Moderator emeritus

    grapes911

    Joined:
    Jul 28, 2003
    Location:
    Citizens Bank Park
    #14
    It might, try it out. Another idea is add a mostly transparent layer on top of the text. I'm not sure if it will work right though.
     
  15. OutThere macrumors 603

    OutThere

    Joined:
    Dec 19, 2002
    Location:
    NYC
    #15
    Yeah if you duplicate the layer that makes up the button without the text, and put it over top of the text, then make it like 20% opacity or so it will look like the text is within the button.
     
  16. Kingsly thread starter macrumors 68040

    Kingsly

    #16
    Cool, I'll try that now.
     
  17. decksnap macrumors 68040

    decksnap

    Joined:
    Apr 11, 2003
    #17
    I posted this is another thread, but can't remember where. Here's a look at my avatar layers spread out.

    One key is the gradient from black to white using 'screen'.(far right)

    Right is the front-most layer, left is the back.
     

    Attached Files:

  18. decksnap macrumors 68040

    decksnap

    Joined:
    Apr 11, 2003
    #18
    Here's another simpler example with just two real layers I did for one of my logos, solid and spread out.

    The Main shape has a vertical gradient from dark at top to lighter at the bottom, with both an inner glow as well as a drop shadow. Then the reflection is applied for the most part with vertical white (at top) to black (at bottom) gradients using 'screen' mode.
     

    Attached Files:

  19. Kingsly thread starter macrumors 68040

    Kingsly

    #19
    What is the process you go through to get these glossy overlays? i.e. masking, channels, etc?

    Ya wanna help me with my MR widget's graphics?
     
  20. decksnap macrumors 68040

    decksnap

    Joined:
    Apr 11, 2003
    #20
    No masking, no channels.I tried to explain it above, but maybe it didn't come out so straightforward. I draw all the reflections with the pen tool in Fireworks, or sometimes Illustrator and bring them in. My method for getting the reflection correct is to fill the shape with a gradient from white to black, white at top, black on the bottom. Then setting the shape to screen mode. This is the same in Fireworks and Photoshop, but may not exist in Elements, I don't know. In Photoshop, it's a dropdown on the Layers pallette that has a bunch of options like multiply, overlay, darken, screen, etc. Screen mode forces the black to drop out of the graphic, giving you a gradient of translucent white to totally transparent. After that, you just need to fiddle with the gradient until you get exactly what you want.

    I'm sure I could help you on the widget. I do pretty much use Fireworks for this stuff though. I don't know if we'll have issues going back and forth.
     

Share This Page