Create a button in Web 2.0 style in PhotoShop

In this lesson I'll show you how you can make a simple, but at the same time beautiful, Download-button in the modern and all loved Web 2.0 style. Download - as an example, you can use this method for anything, even for the menu on the site. So, to the point.

1. Create a new document or open a layout design for the web page, if you want to create a menu of these buttons. I created a document of 400x110px size, just for the button.

2. Next, use the Rounded Rectangle Tool (U) to create the button shape.

Create a button in Web 2.0 style in PhotoShop

In the settings, set the radius to smooth the corners of 10-15px , you can choose other values, depending on the size of the button.

Create a button in Web 2.0 style in PhotoShop

Now create a form on the canvas, the color of the shape now does not matter.

Create a button in Web 2.0 style in PhotoShop

3. Now set the layer styles for our shape. Go to the properties of Blending Options (double click on the layer next to the name in the layer palette or through the Layer> Layer Style menu .> Blending Options ) and set the values ​​as shown in the screenshots:

Inner Shadow:
Create a button in Web 2.0 style in PhotoShop

Gradient Overlay:
Create a button in Web 2.0 style in PhotoShop

You can use whatever color you want, but the button should look like a 3D, like this:

Create a button in Web 2.0 style in PhotoShop

4. Now it's time to add a nice glossy effect to our future button. Create a selection in the form of our button, you can do this by holding down Ctrl by clicking on the layer icon on the layers palette. Next, reduce it by about 5 pixels from all sides. To do this, go to Select> Modify> Contract and enter 5 in the window that appears. This is how it should look:

Create a button in Web 2.0 style in PhotoShop

Now create a new layer and fill our selection of gradients from White to transparent from top to bottom. Like this:

Create a button in Web 2.0 style in PhotoShop

Next, we need to make a curve using the Pen Tool, make a curve directly over the selection by enclosing the bottom of the white gradient of the button in it and delete it. Here's what I got:

Create a button in Web 2.0 style in PhotoShop

I also used a large soft brush to remove some of the edges (softening), so they look much better.

5. Now add the text to our button. We take the Horizontal Type Tool (T) and write the desired text.

Create a button in Web 2.0 style in PhotoShop

For the top text I used the font Black Italic, 24 pt, Sharp, #fff , for the bottom - Semibold Italic, 12 pt, Sharp, #fff and added a shadow in the Blending Options properties:

Drop Shadow:
Create a button in the style of Web 2.0 in PhotoShop

This is how it looks:

Create a button in Web 2.0 style in PhotoShop

In conclusion, I added a reflection and a gear for beauty. If you want, you can download it here

Create a button in Web 2.0 style in PhotoShop

And the red version :)

Create a button in Web 2.0 style in PhotoShop