Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout 3D Button

3D Button


1. Make a new layer, select Ellpitical Marquee Tool , hold down the Shift key ( Mac : Option key) and draw a cirlce.

image 1

2. Select the Gradient Tool , set it to radial gradient and make sure your foreground color is white and background is black . Drag the gradient as illustrated.

image 2

3. Create a new layer, name it " Button Shade ".Draw a smaller circle. Use the same radial gradient tool, and drag another gradient, this time in the opposite direction.

image 3 image 4

4. With your " Button Shade " layer still active go to Selection>Contract and enter 2px for the value, click OK.

image 5

5. Make a new layer, name it " Inside Button ". Use same radial gradient tool to draw yet another gradient as in step 2.

image 6

6. Make a new layer above all your other layers, name your layer " Color ". Press Ctrl+Click ( Mac : Command+Click) on your " Inside Button " layer. Fill the selection with any color you like and set the layer mode to Color .

image 7

7. If you want you may also type some text for you botton, I typed " ok ".

image 8

8. Now we need to make a Layer Set . First, Link all your layers together. Now press on the little arrow just above your layers and select " New layer set from linked ". Name this layer set " Button Off "

image 9

9. Right click on your layer set and choose " Duplicate Layer Set ", Name the new layer set " Button On ". Now we need to make an illusion of a button being pressed down.

Select " Inside Button " layer and using your arrow keys move it down 1px and 1px to the right. Also do the same to your text layer if you have one.

image 10

10. With your " Inside Button " layer still selected go to Layer>Layer Style>Inner Shadow... leave the values default and press OK. You're done! Check out the effect when the button is pressed.

3D Button



Author's URL: Walter Shustikov
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments Daemon October 08, 2004 says:
To a4hire

Of course, user will have to use some javascript code on it's page to such a pseudo-3D button. But wat is more effective - to put some sentences in JavaScript about that button, or to write an entire program in Flash ?
IMHO, JavaScript + plain images is may be a bit old way to create an animated button, but still effective one.

Reply
comments Snerdey October 07, 2004 says:
I liked this one a lot. Very easy to follow and the pictures say it all.
Reply
comments Max Cabba September 13, 2004 says:
I like it too!
I never knew I can create cool 3d Buttons in Photoshop and not ot use 3D Max or somt. :!:

Reply
comments Lensky September 13, 2004 says:
It's very useful tutorial. I like it! :D
Reply
Add comments to "3D Button"

Captcha