Last month we looked at how Adobe ImageReady could help us slice up an image for use on the Web. We sliced it into various pieces in order to apply individual optimization characteristics to each slice: Text was best optimized as a limited-color GIF, where pictures were best optimized as JPEGs. This month we’re going to look at another application of slicing: when we need to change information within an image area.

A very typical use for this technique might be, for example, the top weather banner on a newspaper or television station’s Web site. We may want to display live, changing weather data in a particular zone on this banner, but don’t have an application like Adobe AlterCast or Macromedia Generator that would pull the fresh data from a database and reconstruct the entire banner on-the-fly. With the slicing technique, we have a few restrictions placed on us: The text will have to be straight HyperText Markup Language, with no effects like drop shadows or the like, and the background immediately surrounding the data will have to be a fixed color.

In the figure above, we have taken a multi-layered Photoshop document (PSD), and we wish to replace the number “6” describing the UV reading for the day with live weather data that will be in the form of HTML text. Our first step is to confirm that the color immediately surrounding the number is Web-friendly and will be able to be saved out as a GIF without any color dithering. In this case the color is R255, G0, B0. Next, we go to the menu item View and select New Guide and create four guides: two horizontal and two vertical. We grab those guides and position them so that they surround the number six, leaving a bit of breathing room around the number so we can vary the text size later if we so desire. If your graphic had several numbers or other data that you wanted to replace with live HTML, you would create more guides in the identical manner and isolate the areas you will be replacing.

Once the guides are in place, we are ready to optimize the image and do the actual slicing. Go to the File menu in Photoshop and select Jump To>Adobe ImageReady 3.0. This will engage ImageReady and automatically transfer the image we are working on to that application. Once there, we will go to the Slices menu and select Create Guides From Slices. This will create numbered slices on the screen, and the next step is to choose the Slice Select Tool, click on each slice individually, and choose the desired optimization depending on the type of image. This image was somewhat problematic due to the cloud photograph background: Normally a graphic type of image like this would be best saved as a GIF due to the large areas of solid colors, but the photo background made a higher-quality JPEG a better choice in this instance.

When it comes time to export from ImageReady you can export just the image slices, or have the program generate the HTML to reassemble the images into a table. Generally I will use the HTML feature, since ImageReady generates very clean code that is already commented if you choose that option in the Output Settings menu item. Once output, you will have the sliced images contained in an Images folder and the HTML code sitting separately. From there, you can input the folder and the raw code into your favorite HTML image editing application such as Dreamweaver or FrontPage.

The table will assemble with no spacing between cells, so the graphic will look exactly as it did in Photoshop and ImageReady. Identify the cell that has the number six in it, and delete that image but NOT the cell of the table. Now, since the area surrounding the number that you just deleted is a Web-safe color, go into Photoshop and get the numerical values of that color. Make the cell background the same color, which will match the cells immediately around it. Now you can replace the graphic number that was deleted with the desired HTML. This can include the code that is calling your database connection or any other straight code element.

This technique can be as simple as one number as in the illustration above, or much more complicated with many more image slices. In any case, slicing again allowed us to get the job done without resorting to regenerating the entire graphic every time the value changes.

Hays Goodman is the Webmaster for Newspapers & Technology and GMToday, a Milwaukee-area portal. He has been involved in professional Internet development for four years, and welcomes your comments, feedback and suggestions for future Tips & Tricks columns. Write to him at webmaster@conleynet.com and include your contact information.