thumbnail

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:

final button How to Create a Clean 3D Button in Photoshop

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.

canvas How to Create a Clean 3D Button in Photoshop

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.

shape How to Create a Clean 3D Button in Photoshop

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.

gradient overlay How to Create a Clean 3D Button in Photoshop

inner shadow How to Create a Clean 3D Button in Photoshop

stroke How to Create a Clean 3D Button in Photoshop

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

shape button How to Create a Clean 3D Button in Photoshop

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.

8px How to Create a Clean 3D Button in Photoshop

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”.

color overlay How to Create a Clean 3D Button in Photoshop

shadow drop shadow How to Create a Clean 3D Button in Photoshop

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

3d How to Create a Clean 3D Button in Photoshop

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.

light How to Create a Clean 3D Button in Photoshop

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

almost there How to Create a Clean 3D Button in Photoshop

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:

download How to Create a Clean 3D Button in Photoshop

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

text gradient How to Create a Clean 3D Button in Photoshop

text shadow How to Create a Clean 3D Button in Photoshop

final button How to Create a Clean 3D Button in Photoshop

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!

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • http://www.win7wallpapers.com avinash

    the tutorial is just simple and easy to understand and i have created one for my site, following your simple and easy tips to create a download button.

    very simple, great and helpful tips.

  • http://www.desinghrajan.in desinghrajan

    OMG ! Thanks a lot..Now time to learn photo shop :)

  • Steven

    Thank you so much! It helps alot in building a professional looking button for my little food blog. :)

    Cheers!

    from Malaysia.

  • http://www.seo-analytics.pl/ pozycjonowanie

    I have just search for a tuts like this. Thanks.

  • td

    Great Tutorial,
    i just dont know how to draw a rounded rectangle
    with an accurate custom size?

    • http://www.OurTuts.com Madalin Tudose

      Thanks for your comment. When drawing, in the right-top area, Photoshop has a tab called “Info”. Here you`ll see how the dimensions are changing when drawing.

  • http://thetechaddicts.com Aman Arora

    Very nice tutorial simply loved it, very easy to implement thanks.
    I guess I will be able to create some good buttons for my theme now :)

    • http://www.OurTuts.com Madalin Tudose

      Go for it, man! Let me know what you`ll come up with. I love to see what you`ve done with this button! :)

      Regards,
      Madalin

  • http://www.thewebprograms.com Fareed khan

    I have learned Thank you very much, this is great tutorial

    • http://www.OurTuts.com Madalin Tudose

      I`m glad I could help you, Fareed!

  • http://www.logodesignnewzealand.co.nz/ Linda

    Thanks for this tutorial.This will help me to create button for my website as I am a new learner for photoshop