Web Design Tutorials osCommerce Template Tutorials
New osCommerce Templates osCommerce Specials osCommerce Forums Search Our Site Contact Us Resources Web Design Tutorials
Web Designers Library- Tutorials and Articles
Tutorial Search
  Advanced Search
 
Tutorial Menu
 
 Video Tutorials
  · Dreamweaver
  · osCommerce
  · Installations
 
 Photoshop
  · Tutorials
  Photoshop Basics
  Special Effects
  Text Effects
  3D Effects
  Textures & Patterns
  Web Layout
  Drawing Techniques
  Color Management
  Photo Editing
  ImageReady Animation
  Miscellaneous
  · Articles
 
 Web Design Basics
  · Design Principles
  · Website Usability
  · Color Theory
  · Templates & Tuning
 
 osCommerce
  · osCommerce Knowledgebase
  Catalog Area
  Installation and Upgrades
  Administration Tool
  General Information
  Developers Section
What's New
Latest Tutorials and Articles
Video Tutorials
osCommerce Tutorials
Template installation with cPanel and Ipswitch
Photoshop
Photoshop CS3: Output Sharpening
Change Color on an Object
Sunlight Effect
Autumn Effect
Eyes in Green Pea Pod
Web Design Basics
A To Z About RSS
Elements of Great Websites
The Next Generation Website Model
Why Use a Web Design Template?
Web Site Templates and Their Benefits
osCommerce
SSL - This page contains secure and non secure items
Post-Installation
Security - .htaccess
SSL - This page contains secure and non secure items
Tax Proposal
Photoshop : Tutorials : Web Layout Last Updated: Apr 15th, 2008 - 18:38:37


Creating a Cool Navigation Header
Author: Fiery Darts
Authors Website: www.fierydarts.com
Sep 27, 2006, 08:10

Email this article
 Printer friendly page

Start by creating a rectangle to the size of the header.


Using custom shape tool draw some random size circle thin frame shapes.



Change layer mode of this layer to overlay.



Using pen tool draw some wave shapes. Don't bother to get the right shape. We're going to distort the shape in coming steps anyway.


From filter menu select liquify. From liquify window select forward warp tool.


Drag the tool on wave shape to distort the edges.


Press Ok once you're finished with the output.


Change layer mode to screen.



Draw a rectangular selection at the top using rectangular marquee tool.


Apply a linear gradient in this selection.


Duplicate the layer. Enable lock transparent pixels.


Apply another linear gradient to this layer.


Change layer mode to screen.



This top bar will serve as a place holder for text links. Draw a thin line below the top bar to divide this from the rest of the header.


Place an image of the company product.


Apply following layer style using settings shown.




Similarly insert more pics and apply same layer style to frame the additional images. Rotate as per your chois. Overlap the images slightly and place all on right side of the header.


Insert company logo to the left of the header.


Type links text over the top bar and fill the empty space with some punchline using a nice font.




Top of Page

 
Level Ten Hosting