Designs By Mark - Photoshop Tips - Pushed in Buttons



















Pushed in buttons This tip gives the illusion of a web button being pushed in. We will make the up state and the down state of the button. This is perfect when using Java Script. This tutorial can be a little tricky and it does help if you know Layers well and the Gradient Tool. First we will make a button. I have tutorials on my site to make other buttons too, such as the Rounded end buttons, and square buttons. This tutorial works best with the rounded end buttons. I will use both types so you can see the result. Firstly make a new layer. Next make the shape of the button with the Marquee tool, then fill the selection with light blue to black using the Radial gradient tool. Name this layer "button off" Click on the Background layer and then make a new layer, this new layer should now be right under the layer named "button off" like shown. Next, while the selection is still active, go to Selection>Modify>Expand, enter 3 and click OK. Now fill the selection from white to black using the Gradient Tool, white being the foreground. Start at the bottom and dragging up just passed the button. This creates an inset behind the button. Now deselect (PC: Ctrl- D. Mac: Command-D). Now would be a good time to add some text on the button. Duplicate the "Button off" layer by dragging it to the New Layer icon. Name the duplicate layer "Button On". Hide this new layer by clicking on the "eye" next to it. Now click back on the "button off" layer and make a small drop shadow with the Layer Effects by going to Layer>Effects>Drop Shadow. A distance of 3 and a blur of 3 works well. This shadow is optional but it does give a better illusion of the button being popped up.   Make the "Button Off" layer invisible. Now make the "Button On" layer active. Go to Layer>Effects> Inner Shadow. The default setting worked on my button. Click OK. Now move this layer down 1 pixel and to the right 1 pixel using the arrow keys on the keyboard. If you have text, move the text layer(s) down 1 pixel and to the right 1 pixel. Now you are finished with both Off and On states of the button.










 



Home

| Site Map | Search
| Tips | Store |
Free |
Resources | Community | About |
Email
Designs By
Mark.com. © 1997 - 2000 Mark
Monciardini All Rights Reserved.