Re: 5 minute web design tutorial - Rollovers Method 1

From: KWalter
Date: 22 Jun 2004
Time: 13:27:22
Remote Name:


There are two ways to handle rollovers. The first is actually inside Photoshop. What I do is create a new layer set that has copies of the layers my buttons are on, then change the effects until I have my rollover states. Slice the image so that each button has its own slice, then click "Jump to ImageReady" at the bottom of the toolbar, or press Shift + Ctrl + M. (Note: Imageready installed automatically with my copy of Photoshop 7, if that wasn't the case with yours, you may have to skip to method two.) In Imageready, there will be a pallete marked Rollovers, usually in the middle on the right side. You should see a list of your slices there, as well as a thumb of your entire image labeled "Normal". First select the normal state, and set up the layer visibility so that your rollover effects do not show. Then select the first slice that contains a button, and click the "new" icon at the bottomn right of the pallete: this will create a rollover state. Now adjust the layers so that your rollover effect becomes visible for that button (and only that button). Move to the button slice, and repeat. When you are finished, you should be able to click through the various states of your image in the Rollover pallette, and watch the rollovers turn on and off as appropriate. This is the time to fix anything. You can also name the slices in the Slice bar usually at the lower left (if you don't see it, turn on Window > Slice). This will make sorting your images a little easier on the outside. When everything is ready, go to File > Save Optimized and save HTML and images (probably in a new folder). Voila! The whole page with rollover effects will be generated for you in a table, and you can open it in any editor to adjust things like background color, adding text, or changing the alignment of the table. I'll post a new reply for method 2, the Web Page Editor Only method.