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 !!

3 Comments to "Glossy Web 2.0 Button in Photoshop"

Add Comments (+)

1. Fine Food says:

   March 13, 2010 at 2:21 pm

   thanks,

   Reply
2. PSD to Wordpress says:

   March 22, 2010 at 6:20 am

   Gotta take pleasure in your time you add into your blog

   Reply
3. Krankenversicherung Vergleich says:

   August 19, 2010 at 10:39 pm

   Brilliant stuff thanx

   Reply

Trackbacks/Pingbacks

1. Glossy Web 2.0 Button in Photoshop « PSYAG- PhotoShop Yag | Latest … | Drakz Free Online Service says:

   February 21, 2010 at 7:29 pm

   [...] the original post: Glossy Web 2.0 Button in Photoshop « PSYAG- PhotoShop Yag | Latest … Share and [...]

   Reply
2. inset 2 says:

   March 4, 2010 at 6:48 pm

   [...] have a space that contains only Stipple fill! How about using it to quilt the area surrounding a …Glossy Web 2.0 Button in Photoshop PSYAG- PhotoShop Yag …Name (required) Mail (will not be published) (required) Website. Follow Our Updates. Subscribe to [...]

   Reply