Slicing Files into Pieces
From Chapter 13 of The Non-Designer's Web Book, 2nd Edition, by Robin Williams and John Tollett
This article is provided courtesy of Peachpit Press.
Why would you want to slice a perfectly good JPEG or GIF into two or more separate pieces? Just two reasons (if you don't count "because it's fun"). First, some animated GIFs can be split into sections so that only a small portion of the file requires animation; this keeps the file size so much smaller, which means it will download so much faster. Second, slicing a graphic into sections can create additional layout and design options.
Slicing a GIF file for animation
In this example, the client wanted to animate his logo by having a shooting
star move across the sky. We wanted the graphic to be fairly large, but an animated
GIF this big would be much too slow to download because each frame of the animation
would be as large as the entire graphic. A solution was to slice the file into
sections and animate only the area that required movement. Then we placed the
separate pieces into the cells of a table to hold them seamlessly together.
-
We opened the original illustration file in Photoshop at the desired size and resolution.
-
We created a new Photoshop layer for each frame of animation.
-
We set the "Airbrush Options" dialog box to "Dissolve." In each frame, we used the airbrush tool to paint the star's trail.
-
With all of the layers visible (so we can see which parts of the file to separate), we dragged guidelines across the image to mark the places where we will cut it apart.
At this point we saved the file so later we'll have the guidelines in exactly the same place.
-
We made a copy of every section that was to be cropped and turned into a separate file. This graphic was being sliced into four sections-three smaller pieces across the top, and one bigger piece across the bottom. So we made three copies of it (from the "File" menu, select "Save a CopyŠ"). So now we had four identical files, counting our original one.
-
We cropped in on a different section of each file, according to the guidelines, and saved each file as "section1," "section2," etc., so we'd know what they were later. We turned on "Snap To Guides" under the "View" menu to ensure perfect alignment later.
-
Three of the sections will not be animated (the top left, top right, and bottom), so we flattened those and exported them as GIF files.
-
In the remaining file (the top middle section), we made each layer visible, one at a time, and exported each individual frame of the animation as a GIF89a file. Now we had four separate GIFs, each one showing the star in a different position.
-
We placed these four GIFs into BoxTop GIFmation to create one animated GIF file.
-
We created a table in our web authoring software and placed the GIFs into the proper cells. We set the borders, cell padding, and cell spacing to zero.
In preview mode, the pieces of the graphic in the cells probably won't match exactly- look at the file in a browser to see how it really appears. If the pieces still don't fit seamlessly, look at the HTML code and make sure the sizes of the table cells are identical to the sizes of the GIF files within them. If not, change the table cell sizes to match the GIF file sizes (you'll probably have to do that directly in the code). Then view the file in a browser and the table should be holding the pieces of the file together seamlessly.
 |
 |
On the left is the split graphic as displayed in the web authoring software. On the right is the same graphic in the browser window.