How do I make this button graphic look "Depressed"

[nipsmg]

I know there's some talented photoshop people on this board, so I figure it's the perfect place to ask.

I'm starting on my jukebox software, and I'm creating the graphics for the controls.
I need to learn a proper technique before I can really start accomplishing what i need to accomplish.

Basically, I've got the following graphic as a logo.



I've got the outer ring and the inner part separated into different layers in photoshop.

I basically want to know how I can make the center of this button look as if it was pressed inward, while leaving the silver ring static.

Any ideas on this?

Thanks in advance.

--NipsMG

[walls83]

its the Bevel option in Photoshop.

[nipsmg]

?? Anything more specific.  Bevel and Emboss make this look a bit like the edges have changed, but you don't get the effect that the entire button is being depressed inward.

[nipsmg]

Nevermind, i figured it out.  Shrinking the interior "button" part by 2% and flipping the reflection vertically and moving it to the bottom of the button makes it look like its being depressed.

See:




Unless someone has a more convincing method (I hope)..

[RayB]

Nope, you got it. The only other way you could make it depressed is to tell it it's a loser, girls hate it, and it will never amount to anything ever!

[PoDunkMoFo]

Nope, you got it. The only other way you could make it depressed is to tell it it's a loser, girls hate it, and it will never amount to anything ever!

Jeeze man are you ever going to let me live that one down.  I was mad when I said it and I already apologized. 

[Nannuu]

EDIT: Nevermind, now I'm on a computer that actually shows the animation.  Duh.  At work, nothing moves so all I saw was the original image as your "depressed" button.  Sorry about that.

[M3talhead]

 How do I make this button graphic look "Depressed"

--NipsMG

Easy, like this.......

[brain21]

The thing is, a REAL button like this does not get depressed like that.

IOW, the button is a hard surface, that just gets pressed in.  What you have there is a button that changes from convex to concave.


To make it more realistic, where the button is still convex but pressed in, you need a shadow or inner-glow layer.

1) Duplicate your image.

2) trace around the button (inside the bezel) on a new layer.  Fill that with black.  OK, now you basically have a mask. which you will use later. (You may already have this done, or have an layer that perfectly fits anyway)

3) Make sure that the (glass) button layer is lower than the bevel around the button layer

4) Hold down the (PC) control key, and in the layers palette click on the layer with the glass button MASK that we created in step 2 (in CS2 you actually have to click on the layer thumbnail, not just the layeras in all previous versions of PS).

5) At this point you should have a selection marquee fitting perfectly around the glass button.  Now in the layers palette, select the blass button layer (do NOT ctrl+click that layer or you will lose the selection, just regular click it).

6) OK, if on this layer there are any graphics OUTSIDE the selection marquee then you should delete them, OR hit Ctrl+C & then Ctrl+V.  This should make a layer right above the glass button layer that is ONLY the glass button, and nothing outside that selection marquee

7) Go to Layer->Style->Inner glow & create a black inner glow that will look like a shadow.

Once that is done you may want to select the entire layer (ctrl+a) and then nudge or offset it a bit unless you want to the button to look like you are looking at it head-on.  Since the button is BELOW the bezel layer, it should be able to be moved/offset w/ the bezel remaining in the same spot, and you will probably not move it enough for it to poke out from underneath the bezel.  THis provides the most realistic look.

If you want not quote as realistic, but pretty close and easier to do, then do this:

duplicate the glass buton layer,  Anything outside of the bezel (including the bezel itself) delete, so you just have the actual glass button.

Goto Layer->layer style-> Inner shadow.

Now since the button is pretty dark, you are really only going to see the shadow effect in the white highlight area.  so we want the angle to be 0* so you can see it the best.  Play with the size & distance sliders till you get it where you like.

I'm attaching an example that I threw together in about 5 secs using the inner shadow method.  Not perfect, but it gives you an idea...

You also might want to think about fading that highlight  when pressed as well, but just ever so slightly.

Brain21

[Havok]

Actually, it's very simple:

[jopenner]

Brain21,

Thanks for the quick tutorial.  I am giving it a try now.
Cheers.

John

[Crowquill]

I think adding the shadow definitely helps. Had you thought about changing the color of the power icon in the middle when the button is depressed? Maybe make it amber, red, or even a brighter "lit" green. This might indicate more action going on when it's pressed.

I've never understood why technically buttons are depressed but in everyday language they're pressed.