Part12.Building Web Files

Part 12. Building Web Files

Task

1 How to Preview Files in Browsers and Platforms 240

2 How to Build GIF Files for the Web 242

3 How to Optimize GIF Color Sets 244

4 How to Create a GIF Transparency 246

5 How to Build JPEG Files for the Web 248

6 How to Optimize Files with Variable Compression 250

7 How to Slice Images for the Web 252

8 How to Build Imagemaps 254

9 How to Build Filter-Based GIF Animations 256

10 How to Build JavaScript Rollovers 260

11 How to Build a Web Gallery 262

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.

In addition, file optimization has never been easier; both Photoshop and ImageReady save and optimize files in a range of Web-ready formats such as JPEG and GIF. These controls allow real-time previews, transparency adjustments, and more.

Note: Some of the work in the tasks in this part will be done in ImageReady and not in Photoshop itself. Moving back and forth between the two programs is easy, 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 ensure that the code being created is optimized for the platforms and browsers for which you're developing. In addition, you should check out the filenaming conventions in the ImageReady and Photoshop Preferences dialog boxes to ensure that the autonaming schemes are compatible with your overall process. Refer to Part 1, "Getting Started with Photoshop," for details on setting these preferences. •