Learn how to create a Navigation Bar in Adobe Photoshop CS3.
Tags:adobe,adobe cs3 web design,creating navigation bar,total training,tutorial,web design
Grab video code:
Now that we are done with the header, we are going to move on to the Navigation. So for our navigation we are going to select the navigation background layer. Press W to select the Magic Wand and click on the navigation fill to select it. What I want to do is also create a gradient effect in my navigation fill. So I am going to select the Gradient tool again and this time we are going to use our default colors. So black and white and go ahead and create a new layer on top of our background and press the Shift key.
We will hold that down and just drag the Gradient tool down and that adds a little bit of shadow. That's a bit of a hard shadow that we will go ahead and Undo that and we will try that one more time and I think I am just going to change the Opacity down to about 50 and that gives us a pretty good effect that I was looking for.
The next thing we have to do is bring in some text, and for the text what I have done is created a text file which has all of the site copy that I am going to be needing for my Photoshop layout. So we are going to minimize Photoshop for a second and on your Desktop in the Project Files folder under Lesson 3, I want you to open up a file called site_copy.txt and you will see that has all of our site copy on it.
The first one being our navigation text. So we will go ahead and copy that and I will press Alt+Tab switch over to Photoshop and I am going to press T for my Text Tool and click anywhere on my canvas and just press Ctrl+V to paste that text. So now this text a little bit larger than I would like. So I will press Ctrl+Enter to accept it anyway.
We will go ahead and reduce the Font Size from 14 pixels down to about 11 pixels. It's little too small so we will go to 12 and for our Anti-aliasing I am actually going to set it to None and I like to do that when I am working on web layouts, because the end results is going to match what you are going to see in a web browser, your text is not anti-aliased. So we will keep anti-alias for the navigation text.
I am going to go ahead and select the Move Tool and just move this layer. Well, that looks about right. Actually, I will use my arrow keys to fine tune that. I move it to the right a little bit, I move it down and that looks about right.
The last thing I am going to do on the navigation is add some divider lines. So I will go ahead and create a new layer and we will just rename it. We will call this now nav_div_lines and we will go ahead and select the our Pencil Tool which is currently hiding under the Brush Tool and select right before our foreground color. We will click OK and actually before I draw out the div lines, I am going to make a quick selection. So I will press M key to bring up the Marquee Tool and I will draw a selections around my navigation bar.
And now we are going to select the Pencil Tool again and we will just go ahead and start drawing out the divider line and I am going to hold the Shift key down and that will create straight lines for me and I am just going to click-and-drag down and let go of the Shift key and release the mouse button and come over here we will just click hold Shift down and draw down again and we will continue to do that for the rest of the divider lines.
Almost there. A couple of more to go. Perfect. So that's looking pretty good for now. Later on when we are creating additional markups for internal pages and marking up the navigation dropdown menus, we will come back and we will add a few other elements to our main navigation bar.