Design Glossy Web 2.0 Button in Photoshop

Looking to design some glossy looking Web 2.0 button? Here’s a simple Photoshop tutorial that gives you step by step how to get a nice looking red glossy button.

Step 1 – Creating the base

Fire up a new canvas and adjust the following settings (marked in yellow) according to the image below. The rest should come as default. You might want to double check with the defaults too.

web2.0 buton

Create a new layer call ‘Button’

web2.0 buton

On layer ‘Button’, select the Rounded rectangle tool

web2.0 buton

Give it a radius of 7px

web2.0 buton

Draw a rectangle similar to the image below.

web2.0 buton
Step 2 – Red button

Right click on the Blending Options for ‘Button’ layer

web2.0 buton

Tweak the following settings for

Drop Shadow

web2.0 buton

Inner Shadow

web2.0 buton

Bevel and Emboss

web2.0 buton

Gradiant Overlay

web2.0 buton
web2.0 buton

Your button should look something like this

web2.0 buton
Step 3 – Create glossy effect

Create a new layer call ‘Glass’

web2.0 buton

Select Retangular marquee tool, make sure you are selecting ‘Button’ layer. HOLD your ctrl key and click on layer ‘Buttons”s layer thumbnail. Your button should now be highlighted.

Select ‘Glass’ button now, hold the Alt key with Retangular marquee tool selected. Draw(cut) across the lower half of the button like the image below.

web2.0 buton

Fill the selected area with white color #ffffff using Paint Bucket Tool

web2.0 buton

Adjust the opacity to 18%

web2.0 buton

You should have glossy button looking like this.

web2.0 buton
Step 4 – Pattern Overlay

Let’s give the button some slight pattern overlay. I’ll be using the custom stripe5px created earlier. Create a new layer call ‘Pattern’ in between ‘Button’ and ‘Glass’ and proceed with Blending Options.

web2.0 buton

Select Pattern Overlay, choose Stripe5px (or any pattern you’ve created) and click OK then close the dialogue.

web2.0 buton

Make sure you are still on Rectangular Marquee tool, hold <ctrl> and click on Button’s layer thumbnail to get the buttons shape. Fill up the selected area in ‘Pattern’ layer with Paint Bucket tool and adjust the layer opacity to 5%

Step 5 – Inserting Text

Throw in some random text in white #ffffff color with the following settings

web2.0 buton

Use the following blending effects on my text’s layer.

Drop Shadow

web2.0 buton
Step 6 – Final Output

You should get an image like this.

web2.0 buton
Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail