Slicing an Image Using PSP 7 Image Slicer Tutorial


Start with the image that you want to slice.

Think about the areas that you want to map later.

You will want these areas to be completely within the areas that you slice.

For the image to the left you want each picture in the gallery to be mapped.


Click on the image slicer icon

If the icon isn't visible go to view toolbars and click on web tool bar.









The image Slicer window will open.

Areas of the window are marked with numbers:
  1. Grid - slices the image into a grid of rectangles based on the number of columns and rows that you input to a pop up box. YOU CANNOT MOVE the lines after they have been positioned on the image.
  2. Slicer - used to draw horizontal and vertical lines on your image.
  3. Delete - I refer to it as an eraser, if you draw a line and don't want it you select this tool to erase the line.
  4. Pan - I refer to this a the mover tool. You position it over drawn lines and move them.
  5. URL - I love this part. Type in your web page address and PSP will create the a href code when it saves the sliced images. Makes coding sooooooooooooo much easier.
  6. Alt - You can type these in now but they are all the same (but if you don't type something you won't get an alt tag added to your image code.
  7. Save Setting - This is very useful, just like a psp. If you want to add something and not have to redraw all the sections. You can add to your psp, open the slicer and load the previous settings.
  8. Load Settings - If you have several rooms that are exactly the same you could load setting from your first room to the next room. Saves work in the long run.
  9. Save - When you click this botton, psp dissects your image, and saves the html code and all the image slices to the folder that you select.

Lets begin and go through the steps one by one:

Type in your website address, include the http:// part and your a href coding will be easier to update.

You can type in you web page name in the alt tag and later you can change these tags to the image names or add the image name to the tag.


DO NOT USE THE GRID!!!


If you use the grid you will get rectangles
which are evenly spaced across your image.

While this may be easier, the results are not what we are looking for.

Your views might not click exactly in the middle of your pictures. If you look closely the tops and bottoms of the images are not in the same sections as the centers of the pictures.


We will use the slicer. It lets us determine where to put our slices.

Note: The slicer may take a few tries to get the hang of but it is not difficult.

Place it to the left of your image, click and move to the right to create a horizontal line. Place it near the top and move it down to create a vertical line.








Slice your image both horizontally and vertically. The image to the left is how mine came out. You can move your lines with the Pan (mover tool) to get them to line up better.



Notice that each picture is completely within a separate section, you will see later that this makes coding the sections much easier..



Now click on save settings, and name them.






Then click Save and PSP will do all the work (well most of it!) for you.

Type in the name for your file.

You can save it as an .htm or .html file.















If you open the file folder in my computer you will see that psp created all the files you need for your page.

DO NOT DELETE THE BLANK.GIF file if there is one there.


PSP adds blank gifs to align sections if needed.







The following two images are screen prints of the html coding from my page.







In order to link your images, you will need to open the html coded page in you editor.

I preview the page, and right click on the section to determine the sections image name.



In this case, my image section name was blueroom_2x2.jpg.

This is the section that you need to find in your html code.






The image below shows a section of my html code.




You need to add your image name to the end of the a href statement

(note my image was called gaylesshadow.jpg.
I added the name to the a href statement and to the alt tag.
The result of these changes is show to the left.



If you have enjoyed my tutorials and learned from them, please give me a vote and get my listing higher on links site by clicking the link below.
Vote for this Site!


Email Me  Page Updated December 1, 2002.

Web Design by: Pysmatic Services