Shinny Web 2.0 Button

Tutorial in Advanced, Web

This is a very professional Web 2.0 button. The result is great and you will be able to use it in your site.

Open a new document (300×150px) and white background.
Select ((Rounded Rectangle Tool)), ((radio)) 6, and fill it in with black.

Now let’s apply some ((estilos)). ((Layer))-((Layer Style))-((Blending Options)).

Check out the image below. After you apply the styles, you should see something like this.

Now, let’s write the text on the button. Select the Arial Rounded MT Bold font (31px).

Go back to ((Blending Options)). Now you will aply some ((estilos)) to the text.

After you do so, you should see something like this.

What you need to do now is to duplicate the layer where the blue button remark is, and place it below the other onw. Afterwards, eliminate 1/4 of the button using ((Rectangular Marquee Tool)). Take a look at the image below.

Press Ctrl + Click on the layer you just duplicated in order to activate the selection and create a new layer. Select ((gradient tool)) from White to Transparent and trace the gradient line from top to bottom until you get the following results.

Let’s make the button shine. Press Ctrl + Clic on the layer where the button remark is in order to activate the selection. Now select ((Polygonal Lazzo Tool)) and, by pressing and holding Alt, you will eliminate 3/4 of the button diagonally. Take a look at the image below in order to understand what I’m talking about. Select the ((herramienta degradado)) from White to Transparent and trace the line diagonally in order to create a reflection (the selection must be active).

As you can see, the right side of the button is empty. You can arrange the text; you can place it in the middle or you can add an icon like I did. I added the DesignOwners’ logo.

The tutorial is ready now. What do you think?

Related Tutorials

Deja tu comentario

CaminoCreativo.com & DesignOwners.com is a property of XARUP.