PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Fire Effect Tech Site Layout Modern Layout Complete EZ rounding brush Fresh Tutorials:
Last Update: 2.14.2007
Online: 72 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com Tutorials Web Layouts Stylized Glossy Navigation

Stylized Glossy Navigation

This tutorial will explain how to create a stylized glossy navigational buttons for a webpage. This technique

can also be applied to create great application buttons, as well as web buttons. The main focus of this tutorial is

to teach you the power of layer blending options, and how to apply multiple blending options to get great looking

results.

Download File Download Stylized Glossy Navigation Source Package


Page 1 of 1


Step # 1
Open a new document of any size, for this tutorial l'm using 722x162.




Step # 2
Create a new layer.
Set your foreground color to #D7D7D7. Using the rectangular marquee tool make a square selection in the

center of the canvas, and fill this selection with the flood fill bucket.

Press CTRL + D on your keyboard to deselect the area.

Result:





Step # 3
Double click this layer, and apply the following blending options:
Drop Shadow:


Inner Shadow:


Bevel And Emboss:
Don't forget to apply the Gloss Contour in the Bevel and Emboss Blending Options


Stroke:


Press Okay




Step # 4
Hold CTRL on your keyboard and click this layer to select everything within this layer. Go to

"Select->Modify->Contract" with a setting of 10 pixels:


Your canvas should look similar to this:





Step # 5
Press CTRL + J on your keyboard to duplicate this layer. Next double click this layer and apply the following

blending options, or choose an alternate color:
Color Overlay:


Stroke:


Result:






Step # 6
Get out the Polygon Lasso Tool () hold down the ALT key, and deselect a section of the selection as

pictured bellow:


Tap 'Delete' on your keyboard to delete this portion of the image.

With the selection still active, click once on the layer bellow this, and tap 'Delete' on your keyboard once again.

At this point you can add some text to the header buttons. There are several great designer font downloads in

our downloads section, or

use your own.

Here's how these buttons might look in a vertical navigation system:



Download File Download Stylized Glossy Navigation Source Package



Author: mnkey
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
SourceCrave - Quality Webmaster Resources Best Photoshop 6.0 - 7.0 - CS - CS2 Tutorials - Max Tutorials BladeWorkz - Photoshop Tutorials
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page