How do I make a glossy button...

[Kingsly]

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

 

[cookie1105]

Try googling for photoshop tutorials....................
Or posting the question in Design & Graphics.

 

[Peyton]

Its all about gradients, just play around with inner shadows, bevel, emboss, you'll find something that works, then refine it.

 

[jared_kipe]

Should this be in design?

 

[iGary]

Type in "Aqua Button" into Google, and you'll get an assload of tutorials.

 

[Kingsly]

Should this be in design?

Yeah, it should... I screwed up. Just look at the time I posted!

 

[jared_kipe]

Yeah, it should... I screwed up. Just look at the time I posted!

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.

 

[Kingsly]

Mods, pleaassee move this thread!

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

 

[grapes911]

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?

 

[jelloshotsrule]

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?

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

 

[grapes911]

i'd imagine the shadow is the main thing giving that effect, yeah?

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.

 

[Oryan]

It looks to me like the shadow from the letters is going opposite the shadow from the button.

 

[Kingsly]

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?

 

[grapes911]

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.

 

[OutThere]

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.

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.

 

[Kingsly]

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.

Cool, I'll try that now.

 

[decksnap]

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.

 

[decksnap]

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.

 

[Kingsly]

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.

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?

 

[decksnap]

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.