Menus with Beauty and Brains 4 pg 3: Production Graphics with Wendy Peck at webreference.com

		Menus with Beauty and Brains 4: Saving Single Rollover Images
		Although ImageReady is really the best tool to create rollovers, there are times when you require a single image. For that scenario, and for anyone using Photoshop 5 or earlier, this is the only way to create the final rollover images.

		To create rollovers without ImageReady, you must go through the save process once for every image you are creating. The concept is simple: make any layers that are not part of the desired image invisible and then save. Repeat for every image you require. I will work through step-by-step for saving exact size images, and run quickly through saving an entire menu with different areas for users of version 5 and lower.

The Save for Web screen (set for 2-up) saving the original image. Normally, this image would have a transparent background, but for clarity, I have left the white background showing.		Create your original and rollover image as described on the previous page. To save the original image, turn off the rollover effect layer(s). Version 5.5 or above: Select Save for Web and optimize the image. Select a name for the image that makes sense, and is relatively short (long image names in a repeating elements add unnecessarily bytes to your page). Remember, you will be adding to this name for your rollover image. Save the image. To save the rollover image, turn the visibility on for the rollover layer and off for the original layer. Select Save for Web and assign a name that will be easily identified as the "over" image for your rollover. Repeat for more rollover states. The optimization settings are usually the same for each image, unless you have effects like shadows or 3D on some layers but not on others. Version 5 and lower: Follow the above instructions, but since you do not have Save for Web, you will have to save each image using the normal save routes as a GIF or JPG image.

		Creating a Menu without ImageReady The method above works fine when you have only and exact size image as the base for your saved files, but what if you want to save separate areas of a menu? The answer for most situations is ImageReady, but if you do not have access to it, or have other reasons not to use it, you can still create individual images. The method is a little tedious, but it is quick to create once you are familiar with the method.

Menu prepared, guides set and selection in place to copy for individual images. Original selection shown with resulting file that is saved to create the final image. The rollover effect is shown here, with the sample above showing the original.		Create your graphics as explained on the previous page, but with all the menu items in the same document. You must save each menu item individually, which means you must crop the unnecessary parts of the image away. You can accomplish this through using snapshots and returning the image to the original state every time, but I find it just as fast to select and copy the images, create a new image and then save as usual. With the graphics and rollover layers or effects ready, pull guides to the exact spot that you would like to divide the menu. Make sure that the Snap to Guides feature is activated. Select the are for the first menu item area, using the guides for precise placement. Select Edit>Copy Merged. You will now create a new image. Select File>New and accept the default size. Paste the copied image into the new file and Save for Web, or save as a JPG or GIF (when Save for Web is not available). Repeat for each menu item. Activate your rollover effect layers and go through the process again. With the exception of your main document, there is no reason to save a PSD file of the images you create through this process. Although for the sample above you would create six separate documents, the process is fast. However, ImageReady is a faster, more accurate way to accomplish the same effect. If you have ImageReady, you should use it. Carry on to complete the same process in ImageReady.

		Next page Menus with Beauty and Brains 4: Tutorial Index Photoshop and ImageReady Rollovers Creating Rollover Images in Photoshop Saving Single Rollover Images Slicing Images with ImageReady Saving Rollover Images

Created by Wendy Peck,
URL: https://www.webreference.com/graphics/column47/
Created: May 14, 2001
Revised: May 14, 2001

Find a programming school near you