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

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 Tutorial: Final Result



Author's URL: Walter Shustikov
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "3D Button"

Only registered users can write comment

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.
comments Snerdey October 07, 2004 says:

I liked this one a lot. Very easy to follow and the pictures say it all.
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. :!:
comments Lensky September 13, 2004 says:
3D Button
It's very useful tutorial. I like it! :D