Creating buttons with Photoshop CS3

[Flep]

Here is a Photoshop CS3 tutorial that a lot of Flash CS3 developers need. This is a must.

After seeing how to use the clipping mask with Photoshop CS3, this time Edoardo Gioè shows how to create Web 2.0 sleek buttons.

In this tutorial we will learn how to create simple buttons using only the rounded rectangle tool and custom layer styles.

Through this process you will learn to create your custom buttons which are ideal for website design.

Let' s start by drawing a rounded rectangle with a corner radius size of 5 pixels:

We will now immediately start messing around with the blending options of your shape layer.

Right click on the layer containing our shape and choose "Blending Options".

We will start by adding a gradient overlay to our shape, for this example we will use a light blue for the bottom of our gradient and a standard white for the top:

We will then add a simple outer glow with a slightly darker blue color just like this (be sure to put the blend mode to "normal"):

We will then proceed to add an inner glow as well, this time we will choose a white color.

Keep the blend mode "normal":

Hit "OK" and you should get a rather pretty button ready for your use:

Although it looks good enough already, we can make it even better by adding a glass look to it.

Rasterize the button layer by right-clicking on it and selecting "Rasterize Layer" and then create a shape with the pen tool which curves slightly around the center of our button:

Add a gradient to the shape in the blending options just like this:

Create a new empty layer and merge it with the shape layer.

To do this, simply select both layers in the layers panel and hit CTRL+E on your keyboard.

This will allow us to process the gradient as simple pixels.

Select the layer containing the button shape and use the magic want tool (W on the keyboard) by clicking anywhere on the background.

Move back to the layer containing the shape and delete the contents of the selection by hitting "DELETE".

Now change the layer blending mode to “Overlay” and lower it’s opacity down until you get the effect desired:

And there you go! A sleek button with a glassy look to it.

You can obviously use any colors you want, here are a few examples:

Feel free to use these buttons as you like!

Edoardo Gioè