Navigation Menus in Photoshop - Separators
(Page 3 of 4 )
Click the little triangle in the bottom of the rectangle icon in the toolbox and select the line tool. Imagine that your site has four main pages; we will therefore need to divide the navigation bar into four sections. Make sure the colour you've picked as the stroke colour is still selected as the foreground colour and that the weight of the line is set to 2px (this is set in the tool properties bar just below the menus at the top of the program window). At about a quarter of the way across the rectangle draw a straight, vertical line, leaving a space at the top and bottom. You'll notice that a new shape is listed in the layers panel at the left of the screen; rasterize this shape as well. To really make the separator stand out, right-click the shape 2 layer and select 'duplicate layer' from the menu. Next, open the Layer menu at the top of the screen and choose 'Merge Down'.
To save yourself from trying to draw a line exactly the same height, right click the shape 2 layer again and select duplicate layer once more. Go back to the toolbox at the left and select the top left icon. Now click and drag the line across to about halfway through your rectangle. Release the mouse button and repeat the above process once more, this time dragging the line to about three quarters the width of your rectangle. Your navigation bar should now have four distinct sections.
The best way to make your separators line up is to use a guide; in the View menu at the top of the screen, select New Guide, and in the dialogue box choose the horizontal radio button and set the starting point to about 50 pixels. A dotted line running the width of the canvas should now be displayed, click and drag it to the point that you would like the top of your separators to be aligned to and, if necessary correct the positioning of your separators.
When you are happy with positioning of your lines, open the Layers menu and choose Merge Visible. This will change the name of the layer to shape 4, so right-click the layer in the Layers panel and select Layer Properties. Change the layer name to 'navBar'. This keeps your layers panel as tidy as possible; now for the text.
Text
Around the middle of your toolbox, there is a T icon; click it, select "Horizontal Type Tool" and choose a nice looking font. The great thing about using images is that any text on them will be displayed properly and not dependent on the visitor to your site having the font installed on their system. Click in the first section of your nav' bar and type the word Home. Click in the next section and type Info, then type "Products and Associates" in the remaining sections. Use the guide that should still be present to make sure the text lines up. The text should be the same colour as the border and separators.
Next: ImageReady >>
More Photoshop Articles
More By Dan Wellman
