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.

Because of Length of this Tutorial We have divided this Tutorial into 3 Parts 

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

Next Part of Tutorial

Read more

Design Stylish Web Buttons PSD Tutorial

Previous Part of Tutorial

Design Stylish Button in Photoshop: Part 2

Now Select Gradient Overlay
Click the Gradient Color Box to Open Gradient Editor
Double Click Left Color Stop and Set the Color to #1b1a1a
Double Click Right Color Stop and Set the Color to #555252
Click OK on Gradient Editor and OK on Layer Style Dialogue Box

Your Image should be Similar to the Following

Create a New Layer (Ctrl+Shift+N)
Rename it to Glow
Select Rounded Rectangle Tool and Draw the Rectangle on layer Glow with Radius 5, as shown in following image
Fill this rectangle with White Color (#ffffff)
Double Click layer Glow
Select Gradient Overlay
Set Left Color Stop to #383636
Set Right Color Stop to #cbc9c9
Your image should be similar to the following, we are assuming you to follow us step by step

Select Custom Shape Tool
Select any Image you want. In our case we are using Double Down Arrow
Create New Layer Above Glow and Name it to Down Arrow
Draw the selected Auto Shape on this layer. The Image should be similar to the below.
Move to Path Palate and Click Load Path as Selection button. As we did in steps above
Fill the selected path with color #343131

 Now Lets Add Some Text
Now Select Horizontal Text Tool (T)
Add Text Layer Above layer "Down Arrow"
Set the Font Family to Arial / Regularz
Set Text Size to 20pt
 Type text of your Choice. In our case, its Download File
Set the Download Text Color to #ffffff and File Color to #eedb05
The Normal State of button is ready and it should look like the image below.

Right Click on Text Layer and select Rasetrize Type.
Now Select All layers and Right Click and Select Merge Layers.
Select Move Tool (V)
You Image is similar to the image below.

Next Part of Tutorial

Read more

Design Stylish Web Buttons PSD Tutorial

Previous Part of Tutorial

Design Stylish Button in Photoshop: Part 3

Hold from Corners as Drag inside as shown in the image below
So that the border lines fit into canvas as shown

In layer Patel there will be only one Layer
Duplicate this Layer Twice
Set all three layers as shown in the image below
Make Sure
Normal State Layer Image is Placed at Top (0-50px)
Hover State Layer Image is placed in Middle (50-100px)
Active State Layer Image is Placed at bottom (100-150px)

Select Hover State Layer and Adjust Brightness to 60

 Now Double Click on Active State Layer to Open Layer Style Dialogue Box
Select Bevel and Emboss
Change the settings as shown in the image below

 Your Image should be Similar to this one

The Designing phase is finished.
Now Just Save this button as Download Button.PNG 
Upload it to your website or blog and copy the image location

Embed Sleek Stylish Button in your Website/Blog

Copy the following code and paste it inside your website / blog HTML code just above the </head> code.

<!--Download Button Start --> <style type="text/css"> <!-- .buttonD { display:block; width:175px; height:50px; text-indent:-9999px; } .buttonD a { display:block; width:100%; height:100%; background: url(Your Image Link Location) } .buttonD a:hover { background-position:0 100px; } .buttonD a:active { background-position:0 50px; } --> </style> <!--Download Button End -->

Copy and Paste the following code wherever you want your button to appear.

<p class="buttonD"><a href="#null">Download File</a></p>

If you want your button to redirect your viewer to another URL, Replace #null with the Destination URL

Read more