PI5 Image Slicer

Slicing a large image (like a navigation graphic)  into smaller pieces can make download time seem shorter for visitors to your site. PI 5.0 includes a very handy new feature, the Image Slicer, which allows you to slice images without leaving the PI work space. You can slice evenly, or perform custom slicing, as we'll do in this tutorial. The Image Slicer exports the HTML for reassembling the pieces of the image in a web page.  It also exports all of the individual slices of the image to a folder called images.  

In this tutorial I'll show you how easy it is to use this handy utility to slice 'n dice a header graphic for a fictitious pet supply store. I know the drawings are kind of primitive, but I'm practicing using my drawing tablet! We'll save the slicing "pattern" as a .USS file so that we can apply it to a second image which has rollover effects.

original header graphic

Our fictitious pet supply store sells puppies, dog food, dog houses and extras/accessories. We'll be slicing the image so that the top portion that says "The Dog House" is in the first row by itself, and the the four subtopics underneath will be in another row of four columns.

Open up the image in the PI 5.0 work space and select Web, Image Slicer. When the Ulead Image Slicer box opens, click on the icon for slicing (shown outlined). If you hold your mouse over it without pressing down, a popup box will appear that says "Add sliced line mode." Click just under the black line at top left, and drag slightly to the right to create a slice, as shown below. If your slice isn't just where you want it to be, click on the eraser icon (immediately right of the slice tool) then click on the sliced line to erase it. Since I'm going to save the slices of this black and white image as GIFs, select GIF in the Optimizer section in the lower left corner of the dialog box. Type in Alt Text for that slice, e.g., "The Dog House."

making the first slice

Notice that the header, which says "The Dog House," is highlighted in the Cells portion of the box. It's named Row1XCol1. Everything beneath it is now Row2XCol1. If you want to target a particular frame from this slice, you could choose one from the Target dropdown list. I'm not using frames, so I left it blank.

Next we'll slice the second row into 4 columns. Use the slice tool to click and drag downward so that only the "Puppies" portion is sliced. Repeat for each of the 3 remaining sections of Row 2, adding Alt Text and a Target if desired.

slicing 2nd row into 4 columns

Notice that in the Cells box, when the Puppies slice is selected, Row2XCol1 is highlighted. Use the pick tool immediately to the left of the slice tool to click on each of the columns in Row 2 to understand how the cells correspond with their names in the Cells box. When a cell is highlighted, so is its corresponding cell in the preview window.

Later we'll want to slice a copy of this header graphic with rollover effects exactly the same way that we sliced this one.  First,  we must save the slicing pattern with the .USS file extension by clicking on the Export button. When the Export Sliced Table File box opens, save this slicing pattern to a folder on your hard drive.

export button

Now that you've saved it, we can proceed to save the header graphic to an HTML page and save the GIF optimized slices.

To save the images with the Image Optimizer (which replaces SmartSaver you're used to from earlier versions of PI), click on the Row1XCol1 slice first, then click on the Image Optimizer button:

When the Ulead GIF Image Optimizer box opens, the cell with "The Dog House" (Row1XCol1) on it will be in the Preview window. Make sure all the settings are the way you want them, e.g., 256 Indexed color, etc., then click Next to apply the settings to the "Puppies" cell (Row2XCol1). Keep clicking the Next button until you have applied the GIF optimized settings to every slice. Click OK to return to the Image Slicer box.

Now click on the Save As button to open the Save HTML Code and Associated Images As dialog box. It's important that you save the HTML table data and images to the same directory where you keep your other HTML pages and images for your web site. Name the HTML file "petstore" and click OK. Doing so saves the HTML table data to a page called petstore.html and creates a folder (subdirectory) called "images." In the images folder are the slices, named for their associated rows and columns, as shown below:

saved names of slices 

Next we have to dice the second pet store header graphic, the one with the rollover effects on it. Open this image up in the work space.

rollover effects graphic

Choose Web, Image Slicer. When the Ulead Image Slicer box opens, click on the Import table data icon.

 Import table data icon

When the Import Sliced Table File box opens, select the petstore.uss file which we saved earlier. Click OK.

By choosing the petstore.uss sliced table file, you should see your image sliced just like the first header graphic, right in the Ulead Image Slicer box, as shown below:

uss file applied to 2nd rollover graphic

Enter Alt Text and Targets for the cells as before. Just as you did for the first header graphic, click on the Row1XCol1 slice, then click on the Image Optimizer button to open the Ulead GIF Image Optimizer box. Make sure you apply the same GIF settings as before and keep clicking the Next button to apply GIF optimization to each slice. Click OK when you've done them all.

Click the Save As button. This time when the Save HTML Code and Associate Images As box opens,  name the HTML file "rollovers," and click OK. The rollover effect slices will be saved to the images folder, just as the petstore slices were saved to the images folder. These images will be called "rolloversRow1XCol1," etc.

rollover slices added to images folder

You can leave these default names or change them by right clicking and renaming them. I ended up changing my rollover slices' names so I'd remember what they were, but do whatever works for you. Also, I created an animated GIF out of petstoreRow1XCol1 (the "Puppies" cell) for the rollover effect, so I ended up not using rolloversRow2XCol1.

Now comes the fun part part. Open your HTML editor and then open the file called petstore.html.  The page will open with the sliced image reassembled in a table.

opened up in HTML editor

If you'd just wanted to slice a large image for reassembly in a web page, your job would be done now. But if you want to do rollover effects, like I did in this tutorial, now is the time to do so in your HTML editor. It's beyond the scope of this tutorial to show you how to create the javascript rollovers. I made mine in Macromedia's Dreamweaver, which automatically generates the code for the rollovers.

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage