Wide's World

Slice and dice

by

Widearea

Strapon Cash

Slicing and optimizing graphics

When you have an adult graphic that has been painstakingly designed, and you are ready to serve it up on your adult website, there's nothing worse than having its size bloated unnecessarily, causing your whole page to load slow, thus costing you lost sales. Slicing a complex graphic can offer you more flexibility with your file size. With some decent software you can accomplish pure web magic and get your load times down while maintaining the quality you want in your graphic files. This week we will look at using Macromedia's Fireworks to slice and optimize a piece of web art.

Tools From the Toolbar
You will need to use two simple tools for this action. The constraining arrow tool will allow you to adjust the constraining points of the slices you create with the slicing marquee tool, shown below.

Setting up the slices
1. Select File -> Open and locate the image on you local drive that you want to slice.
2. Select the slicing tool from the toolbar.
3. Click and drag on your image areas to define the slices. Portions of graphic images may be output as GIFs, which will save bytes over other portions which need be JPEGs. All this depends on the design you have. Type elements should be GIFs, while images should be JPEGs. Determine what portions are to be slices and draw them with this tool. You can see the slices as red boxes below.

4. By using the constraining cursor, you can adjust the sides of your slices as necessary. When you select a slice with this tool, you can set the optimization preferences using the optimization palette.

When a slice is selected, you can choose whether it is exported as a GIF, animated GIF, JPEG, etc.
5. When you have created all the slices and set their export individual export preferences, select File -> Export Wizard... to bring up the dialog. The beauty of this app is that you can define your export file size. Enter that value and select "Continue."

6. At the next dialog window, simply select "Export," bringing up the save file dialog.

Choose the location on your drive where you want to save the html file generated by the program, as well as the name of the subfolder (if any) to where the images will be written.
7. The html generated is fairy clean, but you may want to edit it to your liking. That's all there is to it!

Slicing up large graphics is well worth the extra work. It greatly enhances the load of these elements as they load in smaller chunks. We hope you enjoyed your adventures in graphic creation for the adult web. Good luck in your further adventures in graphic design. Thanks for travelling to Wide's World.