» Blog Archive » Professional web 2.0 button design

Professional web 2.0 button design

Posted by Samy | Filed under Web Graphics

Now I am going to show you how to create professional looking web 2.0 button design for your website. For that I am going to use shape tool, blending options, erase tool and brush tool. In few steps you will get high quality web 2.0 button design.

Final web 2.0 Button Design

Step 1

To start with , open new file. 500×500 pix

Set background color to #050505 (dark gray).

Step 2

Select rectangle tool. Create rectangle shape with this color code (#0b5060).

Step 3

For creating shadow effect to rectangle shape ,insert new blank layer .Then change foreground color to full black. Now select brush tool > soft round brush > change size to 90 pix. And start painting around to rectangle shape as shown.

Step 4

Duplicate the rectangle layer. Change the color of it. Make sure the color should lighter.(#7edcf2).Convert layer to rasterize layer.

Step 5

Our next step is to remove corners from rasterize layer. For that go to eraser tool and start removing corners ,like in image shown.

Step 6

Go to rectangle tool again, draw new rectangle shape .(4pixel smaller then the old rectangle shape).Place it inside the older shape ,like in image shown.

Step 7

To give gradient color effect. Right click on smaller rectangle shape .Select blending options > checked apply gradient overlay effect > click to edit the gradient > change black color to #45b5d0 and white color to #0f7c96 .Then click OK to close both windows.

Step 8

To give reflection effect .Select all layers (except shadow effect layer )make a copy of it by dragging all layer on create new layer button .After that press ctrl + E for flatten all selected layer for making vertical .Go to edit > transform > flip vertical . Then remove unwanted shape .To remove it select rectangle selection tool ,select unwanted area and press delete . Now move that shape to bottom .Like as shown then take eraser tool and start removing half side area from bottom. After that change fill values 100 to 34 .

Step 9

To give some more feel . Top corner need to make darker . For that insert new blank layer , change foreground color to (#17505c). Then go to soft round brush tool , increase brush size to 150 pix ,then paint spot on top corners As shown .

Next we need to remove outer side spots . For that select rectangle selection tool (marquee tool), select the area which we need to delete .And press del button on keyboard .

Step 10

next step is to give glossy effect to button . For that select rectangle tool > insert new rectangle shape ,like shown .
Go to blending options by right clicking. >Check apply gradient overlay effect > click on edit gradient > then select foreground to transparent > under gradient editor change location to 30% of “opacity stop” .And change opacity value to 35 .Click ok for closing both windows.Next change fill values 100 to 0 % .Shown as in image.