Home arrow Photoshop arrow Page 2 - 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 - Decide Colour Scheme
(Page 2 of 4 )

You'll need to decide a colour scheme before you actually start to create, so think of a couple of strong, contrasting colours.  I've used a rich red as the main body of the nav' bar and a bright yellow for the border, separators and text.  At the left side of the screen there should be a floating toolbar with all of the most useful drawing tools present on it, this is the toolbox.  Near the bottom there should be two boxes that overlap slightly, these are the foreground and background colour pickers (for those of you new to Photoshop).  Click on the left and topmost box and choose your colour. 

Still in the toolbox at the right of the screen, next to the pen icon, there should be a picture of a rectangle; if there isn't, click the little triangle in the bottom left of the icon and select the rectangle tool.  Now, near the top left of your blank canvas, click and drag a long thin rectangle across almost the width of the page.  Let go, and your coloured bar should appear.  At this stage, your shape is classed as, well, a shape.  But to do anything interesting to it, you need to promote it to a layer.

At the right of the screen, there should be several boxes.  If you are using the default set up, the bottom one will be the layers panel.  If for whatever reason this is not the case, panic not; expand the window menu at the top of the screen and select 'Layers'.  Your shape should be listed as the top layer (as we haven't created anything else yet).  Right click it and select 'rasterize layer' from the menu.  The rectangle should now look a little sharper. 

To make your bar stand out from the rest of your page and to give it a bold, striking appearance, a border to set it off should be used.  Double-click the 'shape 1' layer, and the 'Layer Style' dialogue box will appear.  At the bottom of the 'Styles' panel in the left-hand edge of box there is a tick-box called 'Stroke', select it and click OK. 

There should now be an addition to the layer in the layers panel, the Effects list, which will contain your stroke effect.  Double-click the Stroke option in the effects list and the 'Layer Style' dialogue box should pop-up again.  This time, the right pane of the box will contain a set of formatting options centred on the stroke effect.  Now you can change the stroke colour to your contrasting second choice of colour, in my case, bright yellow.  Leave the rest of the settings as they are and we'll deal with the 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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials