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.
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%.
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.