Using the guidelines as above just try and make the expandable content area.

Until now, these are the images that you would get by using Guillotine or Web-o-tine. I've spaced the slices for reference.

This would be the text area. Notice that using it this way would not allow you to go across the cells smoothly

This wouldn't be a problem if you just wanted to load the full image and just broke it up to load faster. However if you wanted to create a Home and a Search button, then use the text area to hold your site's content.

This is what the slicing SHOULD look like is only six slices.

With slicing done like this, one can create a single cell graphic that spans across the entire image and expands with the website's content.

HOW TO SLICE THE IMAGE

This is VERY easy and, in fact, I discovered it by accident and now I'm going to show how it's done.

The first thing you need to do is draw out your lay out as I've done in this example.

Then save as an XCF file to preserve the layers.

Now, once you've created your XCF file, flatten the image and save it again as an XCF file under a different name. (This is the file you will be working with)

Now, working with the flattened website template you're going to need to start creating slices. In the example above I would insert the guidelines just as they were. The guidelines will be used for EXACTLY that – Guiding.

Now that you've inserted your guidelines open the layer box (CTRL+L) While the background layer is selected, choose the square selection tool like such:

Now go back to your image and select an area you want to make slice of. Such as the logo portion of the site.

Once this selection is made, (again while the background layer is selected) Copy and Paste it.

In the Layer's Box you should see a “Floating Layer” . If you see this then click the “Add New layer” button (The far left button)

You've now successfully made your first slice. Rename the slice to keep track of it.

Now for the slice that Guillotine and Web-o-tine cannot do.

Following the sames steps as before. Select the background layer then select your slice.

Again, Copy then paste the selection. Once it's pasted and you see the floating layer, add the new layer.

Repeat these steps for the rest of the slices thus creating a new layer for each slice.

Once you have all of the slices the way you want them, now it's time to save the images.

This is the easiest part.

Open the layer box (CTRL+L) make sure all of the layers are visible.

Now select one of the layers by simply highlighting it like so:

Now that the layer is selected (it's actually one of your slices).

Go to File>Save a Copy>

Save image as homebutton.png.

If you've done everything correct, you should see this warning:

Select IGNORE and save the file as you normally would.

Repeat these steps with each layer. When you're finished you will have all of the slices the way you need them. Now all you have to do is place them into an HTML table and you're set to go.