How to Create a 3D Button on Photoshop?

Photoshop is a great tool for creating any web graphics. A lot of 3D button design has been showing up on website like Dribblble and on many other websites. There are various techniques on creating a three-dimensional button and here is our take on it.

To get started download the following resources.

Tutorial Assets

1. Subtle Patterns
2. Font : Planer

Step 1

Go to ‘File’ > New. Create a document 640×480 and fill up with you any color or gradient you like.

Step 2

Using the Rectangle Rounded Tool, draw a rectangle with 5px radius. Keep background color white.

Step 3

I zoomed up on the button so, it looks a little bigger. Next step is we apply gradient. You can double-click on the layer or click on the fx button to bring up the layer style. Here are the settings:

The colors we are using : #e2e2e2 to #f7f7f7 .

This how it should look. Do not worry if it looks light.

Step 4

After that we will add Drop Shadow.

Step 5

Next up is the pattern. This is bring up the texture of the button. We are using a pattern called Groovepaper from Subtle patterns that you should have downloaded earlier. Here are the settings :

Here is what we have so far:

Step 6

Now, we need at Bevel & Emboss to bring out the 3D perspective of the button.

Step 7

After that we add inner glow to have some defined edges. The inner glow will be barely visible but is helps with the overall look.

The colors we used : #636363 to #e6e6e6

Final Result

After that you add the text to your button this how it should look. Also, since this is a shape you can change the size without loosing any quality.

Following are some variations. You can experiment with the buttons to create your own kind of 3D buttons.

About the author

Kawsar Ali is a web designer who also likes blogging. He is the curator of Desizn Tech. In his spare time he walks around with a Nikon D5100 hunting for good textures.

Tags: button, Photoshop