How to Create a Clean 3D Button in Photoshop

In this tutorial, I`m going to show you how to create a nice and clean 3D download button in Photoshop. Along the way, we`ll use different tools and apply unique styles to layers, in order to obtain a good-looking finished product. 3D buttons are a new trend in web design, made accessible by CSS3. There`s no need to use pictures when coding a button, but only pure CSS, which is really awesome.

Final result:

Let`s get started. First step, open Photoshop and create a new project. Set the canvas to whatever dimensions you want. For your info, mine is 580x400px just because the tutorial pictures are 580px wide. This way, the pictures used in the tutorial are high-quality and offers you the possibility to see the changes from each step to another.

With the Paint Bucket Tool(G), paint the background to gray(#ebebeb). Then select the Rounded Rectangle Tool(U), set the radius to 10px and draw a rectangle of 250x60px. Very important, make sure to set the tool to “Shape Layers” mode and not “Path”(see image below) to obtain a new layer when drawing.

Apply the next layer styles to the new layer. Right-click + “Blending options” or just double click the layer in order to open the styles palette.

We have obtained a beautiful green button you can already use but is not 3D yet.

The 3D effect can be obtained really easy and fast. To do that, duplicate the current layer and place the duplicated layer under the original one. Then transform it by increasing the height from 60 to 68px. To do that, go to Edit->Transform->Scale and drag the bottom line 8px lower. Of course, feel free to play with the dimension, by expanding even more the bottom area.

The shape starts to look like a 3D button. Now apply the next layer styles to the duplicated one but first clear the current layer styles inherited from the original one by right-clicking on the layer and selecting “Clear Layer Style”.

The button looks really good and the 3D effect is obvious.

Let`s add a final touch to the shape. Let`s make the button shining a little bit by adding spots of light in the middle area. Firstly, make sure to create a new layer above all. Secondly, Ctrl+Click the first layer thumbnail to reveal its selection. This way, all we do now will take effect only inside the selection. Get back to the new empty layer just created, select the Brush Tool(B) and with a big Soft Rounded Brush, preferably 200px and white color, paint 1-2 times under and above the button. You`ll see how the top and the bottom areas of the button will become brighter.

The button is almost finished. Take a look at what we`ve done until now:

The last step is adding some text to the button. Being a button built for download purposes and because this is a tutorial, I decided to type in “Download Tutorial”. Again, you can use whatever text you like and for what you need. The font I used is the very popular “League Gothic”.

Before you can actually use it, you have to install it. Download the font and depending on what operating system you`re working, Windows or Mac, drag the font into Fonts Folder located in Control Panel for Windows or System if you have Mac. The font should already be listed into the Photoshop Font list.

Select the Horizontal Type Tool(T), set font-size to 36px and type in:

Stylize the text by adding a smooth gradient overlay and a little bit of drop-shadow:

With this final touches, our download button is finished and ready to be coded. I hope you enjoyed the tutorial and learned something today. As you saw, the steps involved were just a few and pretty simple, nothing too complicated but the final result is impressive. If you have any feedback or didn`t understand something, don`t hesitate to leave a comment below. Also, download the .PSD file to help you build your own buttons.

In the future, I`ll write a tutorial on how to code the button using only pure CSS3, so stay close to us and don`t forget to follow us on Twitter and subscribe to our RSS Feed!


Final result:

Let`s get started. First step, open Photoshop and create a new project. Set the canvas to whatever dimensions you want. For your info, mine is 580x400px just because the tutorial pictures are 580px wide. This way, the pictures used in the tutorial are high-quality and offers you the possibility to see the changes from each step to another.

With the Paint Bucket Tool(G), paint the background to gray(#ebebeb). Then select the Rounded Rectangle Tool(U), set the radius to 10px and draw a rectangle of 250x60px. Very important, make sure to set the tool to “Shape Layers” mode and not “Path”(see image below) to obtain a new layer when drawing.

Apply the next layer styles to the new layer. Right-click + “Blending options” or just double click the layer in order to open the styles palette.

We have obtained a beautiful green button you can already use but is not 3D yet.

The 3D effect can be obtained really easy and fast. To do that, duplicate the current layer and place the duplicated layer under the original one. Then transform it by increasing the height from 60 to 68px. To do that, go to Edit->Transform->Scale and drag the bottom line 8px lower. Of course, feel free to play with the dimension, by expanding even more the bottom area.

The shape starts to look like a 3D button. Now apply the next layer styles to the duplicated one but first clear the current layer styles inherited from the original one by right-clicking on the layer and selecting “Clear Layer Style”.

The button looks really good and the 3D effect is obvious.

Let`s add a final touch to the shape. Let`s make the button shining a little bit by adding spots of light in the middle area. Firstly, make sure to create a new layer above all. Secondly, Ctrl+Click the first layer thumbnail to reveal its selection. This way, all we do now will take effect only inside the selection. Get back to the new empty layer just created, select the Brush Tool(B) and with a big Soft Rounded Brush, preferably 200px and white color, paint 1-2 times under and above the button. You`ll see how the top and the bottom areas of the button will become brighter.

The button is almost finished. Take a look at what we`ve done until now:

The last step is adding some text to the button. Being a button built for download purposes and because this is a tutorial, I decided to type in “Download Tutorial”. Again, you can use whatever text you like and for what you need. The font I used is the very popular “League Gothic”.

Before you can actually use it, you have to install it. Download the font and depending on what operating system you`re working, Windows or Mac, drag the font into Fonts Folder located in Control Panel for Windows or System if you have Mac. The font should already be listed into the Photoshop Font list.

Select the Horizontal Type Tool(T), set font-size to 36px and type in:

Stylize the text by adding a smooth gradient overlay and a little bit of drop-shadow:

With this final touches, our download button is finished and ready to be coded. I hope you enjoyed the tutorial and learned something today. As you saw, the steps involved were just a few and pretty simple, nothing too complicated but the final result is impressive. If you have any feedback or didn`t understand something, don`t hesitate to leave a comment below. Also, download the .PSD file to help you build your own buttons.

In the future, I`ll write a tutorial on how to code the button using only pure CSS3, so stay close to us and don`t forget to follow us on Twitter and subscribe to our RSS Feed!


Final result:

Let`s get started. First step, open Photoshop and create a new project. Set the canvas to whatever dimensions you want. For your info, mine is 580x400px just because the tutorial pictures are 580px wide. This way, the pictures used in the tutorial are high-quality and offers you the possibility to see the changes from each step to another.

With the Paint Bucket Tool(G), paint the background to gray(#ebebeb). Then select the Rounded Rectangle Tool(U), set the radius to 10px and draw a rectangle of 250x60px. Very important, make sure to set the tool to “Shape Layers” mode and not “Path”(see image below) to obtain a new layer when drawing.

Apply the next layer styles to the new layer. Right-click + “Blending options” or just double click the layer in order to open the styles palette.

We have obtained a beautiful green button you can already use but is not 3D yet.

The 3D effect can be obtained really easy and fast. To do that, duplicate the current layer and place the duplicated layer under the original one. Then transform it by increasing the height from 60 to 68px. To do that, go to Edit->Transform->Scale and drag the bottom line 8px lower. Of course, feel free to play with the dimension, by expanding even more the bottom area.

The shape starts to look like a 3D button. Now apply the next layer styles to the duplicated one but first clear the current layer styles inherited from the original one by right-clicking on the layer and selecting “Clear Layer Style”.

The button looks really good and the 3D effect is obvious.

Let`s add a final touch to the shape. Let`s make the button shining a little bit by adding spots of light in the middle area. Firstly, make sure to create a new layer above all. Secondly, Ctrl+Click the first layer thumbnail to reveal its selection. This way, all we do now will take effect only inside the selection. Get back to the new empty layer just created, select the Brush Tool(B) and with a big Soft Rounded Brush, preferably 200px and white color, paint 1-2 times under and above the button. You`ll see how the top and the bottom areas of the button will become brighter.

The button is almost finished. Take a look at what we`ve done until now:

The last step is adding some text to the button. Being a button built for download purposes and because this is a tutorial, I decided to type in “Download Tutorial”. Again, you can use whatever text you like and for what you need. The font I used is the very popular “League Gothic”.

Before you can actually use it, you have to install it. Download the font and depending on what operating system you`re working, Windows or Mac, drag the font into Fonts Folder located in Control Panel for Windows or System if you have Mac. The font should already be listed into the Photoshop Font list.

Select the Horizontal Type Tool(T), set font-size to 36px and type in:

Stylize the text by adding a smooth gradient overlay and a little bit of drop-shadow:

With this final touches, our download button is finished and ready to be coded. I hope you enjoyed the tutorial and learned something today. As you saw, the steps involved were just a few and pretty simple, nothing too complicated but the final result is impressive. If you have any feedback or didn`t understand something, don`t hesitate to leave a comment below. Also, download the .PSD file to help you build your own buttons.

In the future, I`ll write a tutorial on how to code the button using only pure CSS3, so stay close to us and don`t forget to follow us on Twitter and subscribe to our RSS Feed!

[Total: 0    Average: 0/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.