How To Design A Glossy Web 2.0 Button in Photoshop

0
147

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.

/READ MORE // How To: Install WordPress Locally

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.

newcanvas

Create a new layer called ‘Button’

create-new-layer

On the layer ‘Button’, select the Rounded rectangle tool.

select-rr-tool

Give it a radius of 7px,

radius 7px

and draw a rectangle similar to the image below.

raw-button

Step 2 – Red button

Right click on the Blending Options for ‘Button’ layer

select-blending

and tweak the following settings for:

Drop Shadow:

b-drop-shadow

Inner Shadow:

b-inner-shadow

Bevel and Emboss:

b-bevel-and-emboss

Gradiant Overlay:


b-gradiant01b-gradiant02

Your button should now look something like this:

red-button

Step 3 – Create glossy effect

Create a new layer call ‘Glass’

create-glass-layer

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.

cut-button

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

paint-bucket-tool

Adjust the opacity to 18%

opacity18

and you should have glossy button looking like this.

glossy-button

Step 4 – Pattern Overlay

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

b-patternoverlay

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

b-patternoverlay2

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

I’ll throw in some random text in white #ffffff color with the following settings

textsetting

and the following blending effects on my text’s layer:

Drop Shadow

b-drop-shadow2

Step 6 – Final Output

You should get an image like this.

output

For more How To’s and Tutorials, follow us
on TwitterGoogle+, Tumblr, Instagram and on Facebook

Have something to add? Join the discussion!