Home arrow Photoshop arrow Page 3 - Navigation Menus in Photoshop

Navigation Menus in Photoshop

The aim of this article is to show you how simple it can be to create a visually pleasing, functional navigation menu using nothing but Photoshop and its sister product ImageReady

Author Info:
By: Dan Wellman
Rating: 3 stars3 stars3 stars3 stars3 stars / 30
August 02, 2004
  1. · Navigation Menus in Photoshop
  2. · Decide Colour Scheme
  3. · Separators
  4. · ImageReady

print this article

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.


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.

blog comments powered by Disqus

- Photoshop Text Techniques: Transformers
- 3D Text in Photoshop
- Photoshop Text Tutorial: Creating Indy Text
- Photoshop Productivity Tips and Tricks
- Photoshop Keyboard Shortcuts
- The Critically Important Color and Gamma Cal...
- Using Adobe Photoshop CS, Part 2
- Using Adobe Photoshop CS, Part 1
- 20 Things About Photoshop You Have to Know
- Photoshop Tricks, Part 2
- Photoshop Tricks, Part 1
- Keeping Up Appearances: Techniques for Retou...
- Navigation Menus in Photoshop
- Slicing and Saving Graphics in Photoshop for...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials