Animation in Tables - Giordan on Graphics | 9

Step 8-
Slicing the Image

I didn't want to shrink this one down too much in size, because of the detail in the image. I also knew that keeping it full size with 8 frames of animation would result in a very large file.

I checked this by using the Imageready optimize palette, which is located at Window>Optimize. This palette lets you set optimize parameters such as file type, number of colors, as well as color palettes. With the settings the way you want them, click the optimize tab at the top of the image window and Imageready gives you a preview of what the optimized image will look like. You can then click back and forth between the original and optimized versions, comparing how much detail will be lost when the image is optimized. The Optimized state also shows you the new, reduced file size at the bottom of the window. The idea is to modify the optimize settings to arrive at the smallest possible file size, while maintaining as much detail as possible. This is a tightrope walk sometimes, but Imageready makes it easier than most applications.

By setting the optimize palette to a gif file type, with 8 colors and transparency checked, my fears were confirmed by an 83.1KB optimized file. To address this, I decided to slice up the image and rebuild it on my page in a table. Slicing an image in Imageready is easy. You drag guides out from the rulers to indicate the cut lines, as shown by the red guides in the image above. With guides in place, select File>Optimize As... The dialog that appears allows you to check Slice Along Guides, as shown in the figure at left.

Click OK and Imageready will divide the image into separate files, corresponding with the rows and columns created by the guides. In this case, four separate files are created, with the suffixes 01-01, 01-02, 02-01, and 02-02 added to the file name.

In this case, I set the guides to isolate the larger piece with all the animation. The smaller pieces without the animation will be compressed way down in the next step.

 

Next Page...

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both