[Photoshop] Simplistic Web Header & Navigation Bar Tutorial
This is juts a little tutorial on how to make a simplistic Website Header & Navigtion bar.
Create this simplistic Website header and navigation bar which is similiar to the once used in Bonxa-Designs Version 2.
1) Create a new document (754 x 181).
2) Create a new layer set called ‘BG Colours’.
3) Add a new layer inside the layer set you just created.
4) Select the rectangular marquee tool. On the top bar where it says ‘Style:’ press the drop down arrow and select Fixed Size. In the width input type : 800 px
In the height input box type : 35 px
http://www.bonxa.com/wordpress/wp-co.../2006/07/1.jpg
5) Now click on the canvas and a dashed line should appear. This is the rectangular marquee in case you are new to photoshop. Place this at the bottom of the canvas area.
6) Now fill it with the colour : #A3C159
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
7) Now press Ctrl+Shift+I. Or Select >> Inverse to inverse your selection.
8) Now create a new layer inside the ‘BG Colours’ layer set. You should still have the dashed line on the canvas. Fill the selection with the colour : #F0F9F9.
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
9) Now create a new layer set called : Text
10) Select the text tool and type some text make sure your text layer is in the Text layer set. Type with the following settings:
Font : Arial
Font Style : Bold
Font Size : 48pt
Anti-Aliasing Method : Strong
Font Colour : #27BCBC
Place this text towards the left of your canvas.
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
11) Now select the type tool again and use the following settings:
Font : Arial
Font Style : Regular
Font Size: 18pt
Anti-Aliasing Method: Smooth
Font Colour : #FFFFFF
Type the name of your pages. This will be your navigation bar. You should then have something like below.
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
12) Now select the pencil tool with a thickness of 1px and draw a line down the middle of each of the words.. You may need to zoom in.
Zoomed In Screenshot:
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
Completed Step 12 Image:
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
13) Now, if your navigation doesn’t fit all the way along the green section, select the rectangular marquee tool and then on the top bar on the style option, choose ‘normal’. Now draw the selection along the green at the right-hand side but make sure there is a little room between it and the navigation bar. Fill the selection in with the colour: #FEC42D.
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
You may put what you want here, im going to place a search system here like in Version 2.0. This is just a graphic, if you were to use this on your website, you would actually have to code it.
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
14) Finnaly, you may add some sort of logo here if you wanted.
http://www.bonxa.com/wordpress/wp-co....thumbnail.jpg
And there you have it, a simple like stylish looking Web Header and Nav bar. Please comment on this tutorial if you wish.
