Providing navigation links on your website is good enough but old fashioned and obsolete method. Now a days Web 2.0 sleek and stylish buttons have taken over their place. Web 2.0 sleek buttons look so amazing and give a new life to your website / blog or your web page. There are tons of designs and styles of such buttons. Today at Software Wanted we are sharing a 20 minutes method to design a Web 2.0 Sleek and Stylish button. The tutorial will be explaining step by step process (with image descriptions) to Design and Embed Sleek and Glossy Button (Normal, Mouse Hover and Active phase button) in your websites.
The Assets required in this tutorial are
Adobe Photoshop
Lets Start the Creation of Sleek, Stylish and Glossy Web 2.0 Button
Open Adobe Photoshop and Create a New File (Ctrl+N)
Set dimensions width:175px &Height:150 (Height is set to 150px to adjust the all three "Normal, Hover and Active" states of button)
Make sure that Ruler View (Ctrl+R)is set On.
From the Top "Horizontal Ruler Bar" Click and Drag down the Guideline to 50px and another to 100px. Dividing the height of canvas into 3 equal 50px parts.
Now activate the Rounded Rectangle Tool and set the Radius to 10px
Draw the Rectangle (as shown)in the upper 50px area.
From Layer Palate Select Path and click the circle as shown to Load Path as selection
Now Move back to Layer Section ans Select the Layer 1
Press Alt+Backspace to Fill the Path Selection (Whatever the Color is will be changed later)
Rename the Layer 1 to Normal State
Double Click Normal State Layer to open Layer Style Dialogue Box
From left side, Select Outer Glow and set the color to #4e4e4e and Set the size to 10 as shown in the image
Hold On, Do not click OK
Now Select Stroke and change settings as shown in the image below
Hold On don't click OK
Design Glossy Web 2.0 Button in Photoshop
Requirements:The Assets required in this tutorial are
Adobe Photoshop
Lets Start the Creation of Sleek, Stylish and Glossy Web 2.0 Button
Designing Phase
The button designed in this tutorial will be 175*50px.Open Adobe Photoshop and Create a New File (Ctrl+N)
Set dimensions width:175px &Height:150 (Height is set to 150px to adjust the all three "Normal, Hover and Active" states of button)
Make sure that Ruler View (Ctrl+R)is set On.
From the Top "Horizontal Ruler Bar" Click and Drag down the Guideline to 50px and another to 100px. Dividing the height of canvas into 3 equal 50px parts.
Now activate the Rounded Rectangle Tool and set the Radius to 10px
Draw the Rectangle (as shown)in the upper 50px area.
From Layer Palate Select Path and click the circle as shown to Load Path as selection
Now Move back to Layer Section ans Select the Layer 1
Press Alt+Backspace to Fill the Path Selection (Whatever the Color is will be changed later)
Rename the Layer 1 to Normal State
Double Click Normal State Layer to open Layer Style Dialogue Box
From left side, Select Outer Glow and set the color to #4e4e4e and Set the size to 10 as shown in the image
Hold On, Do not click OK
Now Select Stroke and change settings as shown in the image below
Hold On don't click OK
Say something about article, THANKS!
|
