Creating a Navigation Header |
| Start by creating a rounded rectangle in a new file. |
 |
| Apply gradient overlay with the settings shown. |
 |
 |
| Enable subtract from shape area at the top bar and draw a circle using elliptical shape tool. |
 |
 |
| Create a light and a dark color line as a divider. |
 |
| Create a rectangle and apply following layer style . |
 |
| Select the rectangle using direct selection tool. Using add Anchor point tool add two anchor points at the each side of the bottom of the rectangle. Delete the corner nodes of the bottom and join the new anchor points using pen tool. This will create a button which is rounded at the bottom. |
 |
 |
| Create a rectangle below the divider lines. This will serve as a button bar. |
 |
| Apply gradient overlay with the settings shown. |
 |
| Place the button over this bar. |
 |
| Duplicate this button 4 times. |
 |
| Scale down the buttons and place it to fit the whole button bar. |
 |
| Create a triangle using polygon shape tool. |
 |
| Press Ctrl+T and squeeze it vertically. |
 |
| Duplicate it and place over all buttons. |
 |
| Type your text links on all buttons. |
 |
| Insert a cutout of a relevant image and move it below all layers. |
 |
| Insert the company logo and place it on the left of the header. |
 |
| Type some categories to the right side of the header. |
 |
Creating a Navigation Header
12 Comments »
RSS feed for comments on this post. | TrackBack URI
i never knew creating such professional headers is so easy. thanks for the gr8 tutorial.
Comment by kory — March 3, 2006 @ 12:16 am
pretty cool, good work!
Comment by diogo — March 7, 2006 @ 8:35 pm
Wow, end product looks great. Very helpful. Thanks
Comment by Sam — March 18, 2006 @ 1:48 am
the tut is great on how to make the look of the buttons but no information is given on how to make them link to anything. If the banner is created simply by this tutorial, all you have is an image of buttons that don’t do anything. How does one go about linking each button to a page on a site?
Comment by Pat — March 22, 2006 @ 11:22 am
uh.. yea what u do is slice each button seperately then in dreamweaver or whatever select the image and in the properties bar select the adress ex: www.jfuca.net
the 2 programs that work well in images turned into a site are dreamweaver and adobe photoshop. try it out and look for tuts
Comment by wrench — March 22, 2006 @ 6:47 pm
Can u make a detailed review on how we make these buttons work on our website ???
Comment by Tsvetan — March 23, 2006 @ 9:36 am
well the tutorial is about designing a header. u can link the btns using any html application.
Comment by kory — March 23, 2006 @ 4:08 pm
Email me at: missteaus@yahoo.com I can get you the coding to do the header and have the wording link to a page…you have to send me the header image along with links to the pages you want.
It’s really easy!!
Comment by Teandrea — March 29, 2006 @ 7:09 pm
thx , really helpful
Comment by Sam — April 5, 2006 @ 12:13 pm
Nice tutorial. Very professional.
Comment by VR88 — April 19, 2006 @ 2:30 am
How do you add anchor point in cs? Ive been tring. Clicked on the rectangle with the direct seletion and it aint do nothing. Then when i select the add anchor tool it does nothing either. :S
Comment by michael — May 28, 2006 @ 11:19 am
WHere can i get that image of them people, its exsactly how i like it
Comment by Terry — July 31, 2006 @ 4:38 pm