Home arrow Photoshop arrow Page 4 - 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 - ImageReady
(Page 4 of 4 )

That's the easy part done, now into ImageReady.  You can use the File menu to select Edit in ImageReady to jump programs.  ImageReady is laid out in a very similar way to Photoshop so most things should be pretty familiar.  Go to the toolbox and select the slice tool (the icon with the Knife in it).  Click and drag a rectangle around the first of your buttons, up to but not including the first separator or the border.  Slice out the remaining three buttons in this way. 

One of the differences between Photoshop and ImageReady is the Web Content panel at the right of the screen, after slicing the image, the slices will be listed here.  Select the first button by clicking the bottom slice in the Web Content panel.  Another addition to this program is the Slice panel, located next the right hand panels.  In this panel, give the slice a name, enter the name of your homepage (index.htm in all probability), add some alt text for when the page is loading, and a status bar message.  Repeat this process for the remaining slices. 

Navigation Bar

To give your navigation bar some interactivity, you need to add some rollover states to the sliced buttons; right-click the home slice in the Web Content panel and choose Add Rollover State from the context menu.  An Over state will appear in the Web Content panel, and with this state highlighted, double-click the navBar layer in the Layers panel to open the Layer Style dialogue box.  Check the Colour Overlay tick box and move the opacity slider down to about 50%. 

Repeat this process for the rest of the slices, and if you want, to the text layers, although the process for the text is slightly different.  Starting with the home slice highlighted, right-click the home text layer and select Layer Style; this will open up the layer styles submenu.  I find a glow effect works particularly well in these situations, so select Outer Glow and OK the dialogue box.  Now select the next over state in the Web Content panel and repeat.  When you've added the effect to all of the slices, save it and click the Preview in Browser button in the toolbox; you'll get a web page with your navigation bar at the top, and the source code below it.  See how much work you've saved yourself?  Photoshop even takes care of the JavaScript for you!

To create your web page, you'll need to open the File menu and select Save Optimized As, choose a target directory, (which will need to be the same directory as your linked pages) and give it a filename, preferably index.htm

Browse to the file and open it in the browser of your choice; your fantastic navigation bar will be displayed, but at this stage, the info, products and associates pages will not have the navigation menu on them...The quickest way to overcome this is to open the file with menu displayed on it in Notepad, highlight everything from:

<!-- ImageReady Preload Script (nav.psd) --> at the top of the <head> section, to <!-- End ImageReady Slices --> at the bottom of the <body> section and copy and paste this into each of the linked pages (having first opened them in Notepad as well). 

Looking Forward to Part Two

If you have a basic site, with no more than about seven pages, this navigation bar is ideal, but for more complex sites with many more pages, it will not suffice.  For example, you may have separate pages for Company Info, Delivery info, and Contact Info, in which case, you will probably want the Info section of the menu to expand into a sub-menu containing links to these pages.  Part two of this article illustrates how Photoshop can be used to create this kind of feature.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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