Expert: LizaL - 11/15/2004

Question
Hi, thanks for helping...  I'm having problems exporting the .gif files... of my web page.  When I preview in local mode the rollovers work fine. I know my web page needs the html and the corresponding gif files.  So when I 'export' the 'layers as files', I get 20 files - all the same, and they're the whole page, not the individual layers... Could you tell me the proper procedure to save the gif files.  I looked in the settings menu for 'files' and it does show the 'rollover' name....
I have Photoshop 8 on the PC...
Here's my procedure in ImageReady:
File/Export/Macromedia FlashSWF (html)
Then I export the gif files:
File/Export/Layers as Files.
Then when I look at these files they're all the same file - the whole page.  
This did not happen on previous projects.  This is the first one....
Thanks for the help, Jim

Answer
Hi Jim,

Thanks for the details on your workflow -- that helps a lot. But I'm wondering if this might be where your problem lies.

If I understand you correctly, you're generating HTML from ImageReady, and in particular, pages that contain rollovers that were created in ImageReady.

Try instead this workflow:
1. Create your layers that contain the text and/or graphics for your rollovers -- either in Photoshop or ImageReady. I very often create my rollovers in Photoshop, then jump to ImageReady, but either way will be fine.

2. Use the slice tool, and slice the area you want to use as your rollover. You can also trim your document beforehand, if you only want to use a small portion of it for your rollover. But you'll need to make that area into a slice in order to create a rollover.

3. Now use the Slice Select tool and select your sliced area, and open the Web Content palette. Go ahead and set up your rollover states -- and I'm assuming here you're doing layer-based rollovers.

4. When it comes time to export, don't use the Export command. Unless you've created an animation, you don't want to do this, because this will just result in a static .SWF file.

Instead, from the File pulldown menu, select Save Optimized As... and navigate to where you want to save your rollover. This generates the HTML for your page, along with the Over, Down, Hit, etc. states of your rollover (which will be in a folder called 'images'.) Now all you have to do is open the HTML in an HTML editor like Dreamweaver, or copy the code and the Images folder to the root of your Web site, if you don't plan to do anything else, and are going to upload it. But make sure your HTML and the Images folder you generated when you used the Save Optimized As... command are together. That Images folder contains all the states of your rollover, and without it, the rollover won't move.

Hope this helps! And please post back if you need more assistance.

Lisa