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.

Create a new document

Step 2

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

Draw a rectangle

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:

Gradient Settings

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

Gradient Colors

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

Gradient Colors

Step 4

After that we will add Drop Shadow.

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 :

Pattern Name

Here is what we have so far:

Result so far

Step 6

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

Bevel and Emboss

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

Inner Shadow Color

 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.

Final Result

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

3d Button Variation

Related Posts