*Please note that I use Paint Shop Pro 7 for these tutorials*
The good thing about using PSP's Image Slicer is that
it makes an html page for you, so when you are done all you
have to do is upload it and the images and it's done. You can even make your
links active with Image Slicer (we'll get into that as the tut progresses).
Some people may have to edit the file paths for their images though,
if you put your images into a folder in your directory on your site
rather than in your public directory, you will have to edit the file paths.
This image doesn't have links. I will do a tut with links at a later time.
I'm using an image supplied for me for this tut.
The image was supplied by Lissy and she has given me
permission to use it for this tutorial. The tubes in the
image are from Elf Expressions and Tanya
has graciously given me permission to use it as well.
Click on the image below to save the full size image.
Now...open PSP and open the istutimage.gif image.
Click on File/Export/ImageSlicer and a new window pops up like this.
I have already hightlighted certain tools in the red boxes.
Zoom Out until your image looks like mine in the box.
Click on the Image Slicer tool so we can get started.
Your first slices should define where your iframe is going to be.
I'm going to assume that you are going to use an iframe because
it's the best way to do this sort of layout.
*A NOTE ABOUT SLICING*
To make a line for slicing just put your mouse (with the +) where you
want to start your line and hold down on the left button on your mouse.
To make a horizontal line you will drag your mouse left or right.
To make a vertical line you will drag your mouse up or down.
I Zoom in and out alot when doing this....using my box mover to see different
parts of the image while zoomed in. Just click on the box mover tool and move
your mouse around and you will see a box appear that the window and move around.
What is in the box is what you will see zoomed in.
If you make a mistake and don't like where your line is...don't worry
just click on the little Eraser Tool right next to the Image Slicer Tool
and place your + on that line and click...and it's gone. Then click on
your Image Slicer Tool to re-do that line until you are happy with it.
Here are the lines I defind first. I tried to get as close to the images as possible to maximize the area for the iframe without getting any of the
image into the box. Getting any of the image into the box will knock the
whole thing out of whack when you put your iframe in.
The green box is your ACTIVE box. We don't need to worry about that yet.
Now...since the side images are so big we are going to slice them down just
a little bit to make for faster loading on your site.
As you can see...I made 8 seperate lines to break it up a little bit.
Now you are ready to save it....but first we need to set the Optimization
so it looks nice...and not all gritty.
The first thing you need to do is make sure that Apply Optimiztion
To Whole Image is selected like I have below with the arrow pointint to it.
Then click on Optimize Cell.
When you click on Optmize Cell a new window will open.
The first thing you want to do is to use the Box Mover Tool to a part of
the image with graphics on it...so we can get an idea of what it's going to
look like when we change the settings. The preview box on the right is the one
that we want to change...and will be the one that is saved. You will notice that
it looks all gritty right now...but we are going to change that.
Notice the tabs in the red box?
Use the settings like I have in each one/
You will notice that the image in the right hand box has changed and is more clear.
That was what we were going for.
If it didn't change and isn't more clear then re-check the settings.
Now just click on OK and the Optimiztation Settings box will close.
Now we are going to save it.
Make sure you know where you want to save it because it not only saves
ALL the images...but the html file too, so for this one it will save
a total of 12 images and one html file.
Just click on Save As....and save it....and You're Done!!!
When you are ready to upload it and look at it.....just upload ALL the
images AND the html file to your directory and have a look see at what you did.
I hope you had fun with this tut!!!!
-Heather-