Photoshop, Tutorials

How to Create a Clean Web 2.0 Style Button in Photoshop

Modern web 2.0 style buttons are very popular these days. In this tutorial I will be showing you how to create a clean web 2.0 style button in Photoshop within a few minutes. This is a very easy tutorial and only requires some basic Photoshop knowledge and I hope you have got that.

Before we start lets see the final result. This this how our buttons gonna look like. Now lets get started.

Open Photoshop and create a new document with a dimension of 500px wide and  300px high. This is not the actual button size. We will be creating the button on a bigger canvas to have a good overview. Once we are done, we can simply crop the button and get the actual size.

Now select the Rounded Rectangle Tool from the toolbar and set the Radius to 8px from the settings bar just below the menu bar.

Then create a new layer and draw a rectangle with the dimension of around 160px wide and 40px high. The dimension doesn’t need to be same. Just a rectangular button like shape should be okay.

Afterward, double click on that layer to add some blending options. Add a Gradient Overlay. Set the colors from darker blue to lighter blue.

Afterward, add an Inner Glow. Set the color to white and opacity to 50%

Finally add a Stroke of 1px and change the color to dark blue.

Now the button should look something like this.

Lets add some text now. We will make it a download button. Create a new layer and name it to ‘Button Text’. Now select ‘Horizontal Type Tool’ and write the text ‘Download’ using Arial Bold font.

Now select the button text layer and double click on it to add some blending options. Click on Drop Shadow, set the color to black and opacity down to 66%. Set the distance 2px and size 3px.

At this stage we will add a down arrow to make the button more professional. I have used the custom shape tool, where you can simply find an arrow icon and add it to your button. Once you have added the arrow, add the same blending options that we have added to our button text earlier.

At last we will give a lighting effect to the download text. Simply create a new layer and name it to ‘lighting’ and select a 100px soft brush. Now click on the middle of the download text using that brush.

Well that looks horrible! But we have got a fix. Double click on lighting layer and turn the opacity down to 25%. It should give the button a nice lighting effect.

We are all done 🙂 Now you can simply change the button text to make other call to action buttons. Even you can simply play with the colors, just like I did.

Did you like this tutorial? How can we improve more? Share your opinion below.