14
Feb
2013

Glossy Web 2.0 Button in Photoshop

Posted in: Photoshop , Comments Off

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

Below is the preview of final image.
glossy-button

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

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

And fill the layer with color #6f200b
after filling color

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

Apply following layer styles.
gradient layer style

After applying layer style, it will looks like this.
after gradient style

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

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

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

inner glow

gradient style

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

This will load the rectangular shape.
load shape

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

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

And make selection like shown below.
90
Fill the selection with #ffffff color and set opacity to 20%.

Now our image looks like this:
91

Step 7:
Right click the green rounded rectangular shape layer and select duplicate layer. This will create a duplicate layer.
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.
gradient

Now our image looks like this:
94

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

Below is the final image of this tutorial.
glossy-button

Download PSD file of this tutorial FREE !!

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
Both comments and pings are currently closed.

Comments are closed.