Glossy Web 2.0 Button in Photoshop

In this Photoshop tutorial, we will make a glossy web 2.0 type button. It is very simple and will hardy take 10 minute to complete this button.

Below is the preview of final image.

Step 1:
Create a new document in Adobe Photoshop (File New).

Step 2:
Create a new layer (Layer >> New >> Layer)
Select “paint bucket tool“.

And fill the layer with color #6f200b

Step 3:
Right click the layer and select “Blending options” as shown in below image.

Apply following layer styles.

After applying layer style, it will look like this.

Step 4:
Create a new layer (Layer >> New >> Layer).
Select “Rounded Rectangle Tool” and set radius to 8px.

Set color to #9ea709 Press and hold shift key and draw a shape as show below.

Step 5:
Right Click rectangular shape layer, and select “Blending options”. Apply following layer style.

Step 6:
Pres and hold ctrl key and click on the rounded rectangular shape layer.

This will load the rectangular shape.

Now go to Select >> Modify >> Contract
and contract by 2px

Create a New layer (Layer >> New >> Layer).
Select “Elliptical Marquee Tool” and set to “Intersect with selection”

And make selection like shown below.

Fill the selection with #ffffff color and set opacity to 20%.

Now our image look like this:

Step 7:
Right click green rounded rectangular shape layer and select duplicate layer. This will create a duplicate layer.

Drag the duplicate shape just below the original shape. Right click duplicate layer and select “Blending options”. Remove all previous layer style and apply only below layer style.

Now our image looks like this:

Step 8:
Create a new layer. Select “Text Tool” and type some text.

Below is the final image of this tutorial.

Download PSD file of this tutorial FREE !!