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."

Learn Photoshop Now

Learn Photoshop Now

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.

Get My Free Ebook


Post a comment