Web 2.0 Buttons

With the world wide web evolving on a day to day basis, it is important to keep up with the current web trends. One modern web trend is the use of web 2.0 styled buttons. These buttons are often shiny and attractive, but how are they made? Well to start off we will be deciding on the basic function of the button, what it does, what shape it will be, what style we wil use, and most importantly what color. In order to receive the desired effect you must have very clean and eye-catching colors in your button, otherwise people are likely to overlook them. The example to the right displays green, red, and blue glossy web 2.0 buttons.

 

 

Alright so let's get started in the creation of our web 2.0 buttons. You are going to start by loading up your Adobe Photoshop software. I personally used Adobe Photoshop CS4 for this tutorial. Once you have your software loaded, go head and create a new document by hitting file, and then new... (or ctrl+n). A window should pop up on your screen prompting you to input variables on document size and resolution. Since we are developing a button for the web, we want it to be relatively small in length and file size. I used 300px wide by 150px tall, with a screen resolution of 72 dpi (dots per inch). Hit ok.

 

Now that you have your document created, lets get to work! Start off by labeling your first layer "button". Next hit "u" on your keyboard. This is the shortcut key for shapes tool in your toolbar. Notice how the shapes tool lights up on your toolbar, so click and hold on the icon that lights up and choose the option "Rounded Rectangle Tool". With the Rounded Rectangle Tool selected, you have an abundance of options. But we want a very specific look, so on the top toolbar you should notice some options that were not there before. Where it says radius, input a value of "10 px". To the left of the radius option is a dropdown arrow. Click the arrow to reveal 4 more options, unconstrainer, square, fixed size, and proportional. We are going to select the fixed size option and input a width of "250 px" and a height of "100 px".

 

The next step is very simple. What you will do is simply click your mouse over the center of your document and release your mouse. The rounded rectangle should appear with the default color in your pallette. Congradulations, you've now created the base shape of your button!

In the example below is the first stage of my button. For those of you who are curious I am using #496c90 as my starting color. Make sure your button looks simliar to mine in shape, and also double check that the corners are rounded.

 

The next step is very important. What you are going to do is double click your button layer so that the layer properties window pops up. Next you will closely follow the example images below, just click the links to display the image examples.

 

By the end of this proccess you should have something that looks like the example image below.

 

What we want to do next in our button is get the coloring just right, so as to achieve that web 2.0 glossy look that you see all over the net today. Once we have achieved this look, we will begin to create our text and other minor details.

So we have the base shape and color of our button. Now to add the details. Hit b on your keyboard to bring up the brush tool, and click the options in the top left of your screen to resize your brush and to set your brush hardness to 100%. Next hit ctrl+shift+n to creat a new layer on top of your button layer. Name this layer "shine". Then choose color white #ffffff in your color pallette, and ctrl click on your button layer to select the button on your shine layer. What you will now do is simply brush in the corner of your button, you should have something that looks like the example below.

 

Next set your shine layer to blending mode "soft light", and set it's opacity to around 25%. Then select your button layer, and use the hotkey "ctrl+j" to duplicate it. Set this button copy layer to blending mode "hue" and double click it to go into the layer properties. We are going to unselect everything except for the gradient overlay, then we will set the parameters for an inner glow effect. Follow the image model below for the inner glow effect.

 

You should now have something looking similar to the example in the image below.

 

Now we want to sharpen the color of our button. Duplicate (ctrl+j) your button layer and bring it to the top. Name this layer "color". Now go back into the layer properties and click off everything except for gradient overlay. You are going to change the blending mode to normal, and then create a gradient using these 2 colors. #2b3d58 and #91acc5. Set the darker color on the bottom of your gradient, and set the scale to 150%. Now set the blending mode of this color layer to saturation, with an opacity of about 80%.

 

Ok our button is basically complete, but it doesn't have much effect as simply a colored pill shaped object, so lets add some text!. I am using myriad web pro as my font, with a size of 40 pt. So create whatever text you want and put it in the center of your button. Now follow the image examples below to get the right text effect in your text layer properties.

 

You should now have something that looks similar to the image example below.

 

And there you have it, your button is complete. In my final version I did a few other little effects such as a reflection and a background, but that is only for the purpose of this tutorial.