File Organization - Rollover Lessons

Once you start slicing up your PSD files and creating rollover images, life gets a lot more complicated. Students often ask me how I manage my files during this phase of production. Here is my advice.

1. The first time I slice the images and save the HTML file I create a new directory on my desktop. This allows me to concentrate on the new images I have created and the HTML code. If I place the code and images into the existing project file, it can be difficult to find the new images I have created. After I have tested the code and analyzed the images, I move everything to the final folder.

2. Sometimes beginning students click around and accidentally create rollover effects which are unnecessary. The first way I check for this is by viewing a list of the files in my images directory. If I have 6 buttons which change color in a rollover, then I would expect 12 images. The file names would follow a pattern of "contact.gif" and "contact-over.gif". If I have more than 12 images, I look for the images with extremely long titles, such as "about-contact-over.gif". This indicates that a copy of the contact button has been made, and is loaded whenever the about button is rolled over.

   Since the "contact.gif" and "about-contact-over.gif" graphics look exactly the same, I realize I made a mistake when creating my rollovers. You can solve this problem manually or use ImageReady.

   If you use ImageReady to clean up the code. I usually throw away the entire directory I used as my experimental saving site. Return to the ImageReady file, and select the "about" slice. Throw away the remote rollover icon. Create a new rollover icon. Save again (using a new directory as an experimental saving site), and see if it worked out better this time.

   If you do this manually, remove the "about-contact-over.gif" from the images folder, and find the extra JavaScript found with in the linking code for the about button. Students who are comfortable with HTML can usually make this work with a little practice. Look at the code for the about button rollover. The A HREF link will have lots of new information. Within the ONMOUSEOVER and ONMOUSEOUT commands look for the code which is located between tick marks ('.....') and identifies images which will change. For example 'about--contact', 'images/about-contact-over.gif'.

   Always save a copy of your code BEFORE you begin trying to clean it up.

3. When naming slices for a site, spend a moment analyzing the images for the opening screen and second level pages. Do you have a graphic that links to a "contact" page on both pages? Are these images EXACTLY the same? Many Web sites have a different look for the contact button on the index page and the second level pages. If you name the slice on the index page "contact" and also name the slice on the second level page "contact" you have a problem.

   ImageReady automatically places all sliced graphics into a directory named "images". The contact file from the opening screen and second level pages will exist in the same location. If the slices are given the same name, one file will override the other, causing the contact button for the second level page to show up on your opening screen.

   To avoid this, name the slices on the opening screen with unique names. I often use names such as "contact-index" or "logo-index". I save the shorter names of "contact" and "logo" for the slices on the second level template, since so many pages use these images.

4. Some students avoid the repeat name problem by placing all the images for the opening screen in a different directory than the second level pages. I have even seen some students create a new directory for each second level page because they were afraid of overriding files. The problem with this approach is that if some images are common to several pages, you will have multiple copies of the same file on the Web. This increases download time and makes finding the file more complicated. Finally, if you have 10 copies of the logo in 10 second level directories, and the logo changes, you need to replace it in 10 places. EEK!!

   I encourage you to spend time analyzing your images and use unique names to avoid file overrides.

5. Save a copy of your PSD file before you have sliced it, then save another copy after the slices have been added and the rollover effects added. If you do a redesign you may want to go back to the earlier PSD file and begin slicing again.

6. If you are simply changing the link location for a slice you can do that manually within the HTML code, or use the PSD file which contains rollover information and change the link location within ImageReady using the rollover window.

7. If you need to change the look of the logo and the new image will fit inside the existing logo slice, use the PSD file which contains slice and rollover information, Begin by inserting the new layers which make up the revised logo. Then select that slice, access "Save Optimized As" and modify the settings in the save dialog box as shown below.