Cutting Images for the Web

This tutorial will cover the basics of cutting an image for the web. One reason we cut images for the web is to decrease the load time of our web pages. Another reason is to create unique navigation elements. You could create the same effect by using image mapping but the load time of the image may be increased because of the size of the image.

With image mapping and image slicing you can create your whole design instead of making pieces and fitting them together.

Below is a screenshot of the start of my image. I created a new layer for the circle line. I'll use that to line up my buttons.

A new layer was created to place the buttons on.

A new layer was created to place the logo on.

A new layer was also created to place the link text for the buttons.

To cut the image into manageable pieces go to File>Export>Image Slicer.

You'll find several tools to help you cut the image. The knife tool is what I used and a little bit of the eraser tool. Glad they put that in there.

After you're done slicing, select the arrow tool and then select each button cut and add the URL you want it to go to. You can preview how things are going to look by clicking on the Eye button.

When you are satisfied with the cutting click the save button and save it to a folder on your hard drive.

You can also get fancy and create Rollover effects and add them by using the Rollover Creator button.

Paint Shop Pro 8 creates all the html for you when you save the file from the save button.

That's all there is to it.

You can also use the cutter to cut photographs into more manageable sizes and may even get them to load on your web pages faster. This technique is good for any large size images. Give it a try and see if you can save some load time on your web pages.

Have fun!

Copyright Vikki Olds, All Rights Reserved