Saving the sliced images in Image Ready

Now that the banner and team pages are complete, you'll save the optimized image slices and generate an HTML file that contains an HTML table of the sliced image.

ImageReady also lets you save slices in a cascading style sheet rather than a table. To set up the file for cascading style sheets, choose File > Output Settings > HTML. For Slice Output, select Generate CSS, and click OK. You can also change the output settings from the Save Optimized dialog box.

1 With the 15Start.psd file active, choose File > Save Optimized.

2 In the Save Optimized dialog box, enter Banner.html as the name. On the Format pop-up menu, choose HTML and Images, and choose All Slices from the Slices pop-up menu. Designate the Lesson/Lesson15/15Start/Architech Pages folder as the location, and click Save.

Save Optimized

Save As: Bariner.himl

Format: HTML and Images

Seitin^i: Custom i '

Slices All Slices T]

The Replace Files dialog box appears for the four button images you saved earlier in Photoshop.

3 Click Replace to save the new versions of the images.

ImageReady saves the HTML table of the entire sliced image in an HTML file and saves the optimized images for all of the auto slices, user slices, layer-based slices, and rollover states inside the Images folder. The filenames of the images are based on either the names you specified for the slices or the default names and numbers of the slices.

4 Choose Window > Documents > Team.psd to switch to the Team.psd file, and repeat steps 1 and 2, but this time enter Team.html as the filename for the saved optimized version.

5 To test the URL links that you assigned to the slices, start a Web browser and use it to open the Banner.html file. Again verify the behaviors of the rollover states of the various slices, including clicking the blue circle to open the linked Team page and testing the behaviors of those rollovers.

6 Close the browser, and then close the files and exit ImageReady and Photoshop.

You have finished your work on Lesson 15. To learn more about using animations with your slices and rollovers, see Lesson 16, "Creating Animated Images for the Web."

Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment