adv banner
Photoshop  Home Photoshop Web Layout 3D Button
rss

3D Button

Author: Walter Shustikov More by this author


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



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Read/Add comments to "3D Button"

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  a4hire October 07, 2004 says:
That is a nice tutorial for making a mouse over button in Photoshop. It shows you how to make the 2 different images for the button. For that purpose it is good. But it is really not a 3D button. Photoshop will only make a raster bitmap image. I am not trying to say anything bad about the article or the author. But the tutorial is a bit incomplete. If you wanted to add a button like this to your web site how would you do it? The last step says to check out the effect when the button is pressed. How do you make that happen ? That is usually done with a Java Script in your html. But maybe this is addressed in a different article or forum on how to make a mouse over button on your web page. Idea
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. Exclamation
comments  Lensky September 13, 2004 says:
3D Button
It's very useful tutorial. I like it! Very Happy