Part 12. Building Web Files

Task

1. How to Preview Files in Browsers and Platforms

2. How to Slice Images for the Web

3. How to Build Imagemaps

4. How to Build Filter-Based GIF Animations

5. How to Build JavaScript Rollovers

6. How to Build a Web Gallery

Adobe has done an excellent job transforming Photoshop from an advanced image-editing tool into an advanced Web-production tool without losing the image-editing features along the way. Using the ImageReady feature set, users now can build tables, create JavaScript rollovers, and slice an image into multiple images with custom optimization for each piece.

Note: Much of the work in the tasks in this part will be done in ImageReady and not in Photoshop itself. It is extremely easy to move back and forth between the two programs, calling on the strengths of each as necessary. In fact, the two programs are closely linked, and you can open one from the other and move files back and forth between the applications.

Photoshop and ImageReady automatically optimize, rename, and generate solid HTML code on-the-fly, supporting a wide variety of Web tasks. The code is saved as a separate HTML file that can dovetail with an existing page or, in the case of tables, be used on its own.

Be sure to set the HTML settings in both Photoshop and ImageReady to make sure that the code being created is optimized for the platforms and browsers for which you're developing. In addition, you should check out the file-naming conventions in the ImageReady and Photoshop Preferences boxes to make sure that the autonaming schemes are compatible with your overall process. See Part 1, "Getting Started with Photoshop," for details on setting these preferences.