 |
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 Stylized Glossy Navigation Source Package
Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/coastalw/public_html/photoshopforce/tutorials/simple-glossy-buttons/index.php on line 212
Warning: include(http://www.photoshopforce.com/inline-tut-inc.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/coastalw/public_html/photoshopforce/tutorials/simple-glossy-buttons/index.php on line 212
Warning: include() [function.include]: Failed opening 'http://www.photoshopforce.com/inline-tut-inc.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/coastalw/public_html/photoshopforce/tutorials/simple-glossy-buttons/index.php on line 212
Page 1 of 1
Open a new document of any size, for this tutorial l'm using 722x162.
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:
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
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:
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:
Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/coastalw/public_html/photoshopforce/tutorials/simple-glossy-buttons/index.php on line 302
Warning: include(http://www.photoshopforce.com/inline-inc.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/coastalw/public_html/photoshopforce/tutorials/simple-glossy-buttons/index.php on line 302
Warning: include() [function.include]: Failed opening 'http://www.photoshopforce.com/inline-inc.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/coastalw/public_html/photoshopforce/tutorials/simple-glossy-buttons/index.php on line 302
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 Stylized Glossy Navigation Source Package
Author: mnkey
Discuss this tutorial on the PhotoshopForce.com Forums
|  |
