Slicing Your Image

Although you can use any graphics software to create your image, I recommend using Photoshop because it will make slicing your image much easier. Packaged with Photoshop is ImageReady. This software can be used to save images for the web, to create gif animations and my favorite feature slicing. Now slicing an image means we are going to make smaller individual images out of the larger one you created to place it in an HTML table. You could just have a large image as a page in your website, and make image maps over areas you want to be links. The problem with this is that it will seem like forever before it downloads. As you will see in this example when you slice a large image you can optimize each section individually to make the total file size smaller. Also as in this example some slices are duplicated so you need to only use one of them. This will make the file size even smaller. The example image I created for this is only 26.1k. What this means to you is that this page will only take 9 seconds for a person to download with a slow 28.8 modem speed. Are you starting to see the benefits?

Here we have our image still in Photoshop (refer to top image on the right). By looking at the larger view you can see that there are blue lines placed on the image. These are guidelines you can simply drag out of the ruler area in Photoshop. These guidelines are where we are going to slice the image. It helps to have a working knowledge of HTML. You must know how tables work, so you can slice your image in a way that will work with tables.

After you import your image into ImageReady go to the top of your screen and choose "Slices". From the drop down menu click "Create Slices from Guides". Your image should look like this (refer to bottom image on the right).

You should notice that all the slices have been created from the guidelines and are numbered. The numbers are merely the default way that ImageReady names the sliced images. We will change those later.