Facebook Facebook Facebook Facebook

ANDROID

Design Stylish Web Buttons: PSD Tutorial

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.


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

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
 
Mr. Android © 2011 Design by Army Boots