Page 3 - Navigation Bar

6. Smarten up the navigation - The best way of making a good looking navigation bar is with gradients. A good gradient will bring the bar to life and make it look a lot more interesting. Open up your Blending options, on your Navigation bar layer, you do this by Right clicking on the name of the layer in your layer window, and then going to blending options. Then go to Gradient, and apply similar settings to these.



Now that you have your gradient set up nicely you can save the Style of the gradient so that we can use it again if we need to, simply click on the "Styles" tab within the Blending Options window, and go to Create New, this will bring up a box for you to name the settings you just applied to the navigation bar, this will prove handy later.



Your navigation bar should now look something a little like this:


Now to make the navigation look a little more special we can add an extra gradient to it, for this you need to draw a box over the top of the navigation bar, which is the same width but only 12px high, about 1/3rd the size of the bar itself. To do this you need to get the Rectangular Marquee tool, which can be found on your toolbar.



You need to draw it from the middle, downwards about 12 pixels.



Then you need to go to Layer >> New Fill Layer >>> Gradient. Give it any name.



Then make sure that your angle is on "-90"

Now we need to edit the ?gradient, make sure both ends of the gradient are black, but make sure one of them is Transparent, you can do this by clicking the Slider at the top of the gradient (within the gradient editor)And moving its opacity down to 0%. Click image to enlarge.



Now move this new gradient to the middle of the bar, and within the layers panel select Overlay as the blend mode and turn the opacity down to 25%. Your gradient should now look like this:



7. Adding text & buttons to your bar - This stage is very easy, just add the word "HOME" to your Navbar with the text tool, then in the blending options give it a drop shadow, with these settings.



Now to make this look more like a button, simply draw a line with your line tool, that is the same height as the bar. Make sure this is black, and give it a drop shadow as before, but this time make it white and have the Blend mode set to overlay. Now set the Blending mode of the actual line to Overlay (in your layers panel) and set it to 25% *hint for using line tool: Hold Shift while drawing to draw a straight line.



Place the line next to the text, duplicate the text, then edit the text on the new layer, move that to the right, then duplicate the line and move it to the right, making sure you leave enough space either side of the text. You can see how the lines on each side make it look like a button. So now you should have something that looks like this:



Now just repeat the copying all the way across the bar until you have all your buttons, you can then go back and move the text and lines to make it look neat and tidy.
*hint for moving objects: Hold Shift while moving an object to move it across in a straight line.



Is it cool yet? Well move on to get it finished! ;)