Home Icons Photoshop


Create Proffesional Web2.0 Buttons Photoshop Tutorial.

Let’s create some professional web2.0 buttons like this …..

First you must read The Best Way To Make Reflections In Photoshop.

probutton11.gif

Step One

Draw a square like this

Create Proffesional Web2.0 Buttons Photoshop Tutorial.

Then

Layer => Layer Style => Blending Options …

Inner Shadow

Create Proffesional Web2.0 Buttons Photoshop Tutorial.

Gradient Overlay

Create Proffesional Web2.0 Buttons Photoshop Tutorial.

The Gradient

Create Proffesional Web2.0 Buttons Photoshop Tutorial.

Stroke

Create Proffesional Web2.0 Buttons Photoshop Tutorial.

Result

Create Proffesional Web2.0 Buttons Photoshop Tutorial.

Step Two

Draw 1px line [black].

Then

Layer => Layer Style => Blending Options …

Bevel and Emboss

Create Proffesional Web2.0 Buttons Photoshop Tutorial.

Result
Create Proffesional Web2.0 Buttons Photoshop Tutorial.

Add arrow from shapes or add your logo and write on your button .

Then apply what you learned from The Best Way To Make Reflections In Photoshop tutorial

Final Result

probutton11.gif

Download the PSD

probutton.zip

2 Responses to “Create Proffesional Web2.0 Buttons Photoshop Tutorial.”

  1. Kevin Says:

    Thank you! I’ve been a Photshop “wannabe” for a couple of years, and can do the basics for web graphic design (drop shadows, gradients, etc.). But I’ve looked for this very info many times, but this hit home. Tomorrow I’m going to have some sweet buttons on my site. Thanks! Great work. Keep it coming.

  2. raees Says:

    Il like the WEB 2.0 effects in photoshop & i saw ur button has given above

    nice its class i like the effects

Leave a Reply