Using the Selection Tool
was created for some friends of mine who wanted to begin learning
more about PSP. It is intended for advanced beginners to learn
how to slice up pictures. If you have any questions, please feel
free to email me.
To do this
tutorial you will also need Paint
Shop Pro. I used Paint Shop Pro 8, but the steps used may
also be done in Version 7 or 6. You may download a free trial at
uses the selection tool that come with PSP, and a image of your
1. Open up the
image that you want to use. On keyboard, press Shift +D, to
duplicate the image. Close the original.
2. If you don't have rulers turned on, turn
them on. In top menu, click on View > Rulers
3. Think about how you want to divide your
picture. Below is how I want to divide my picture. I
drew some yellow dashed lines to show you. I want "Poetry",
"Home", and "Happy Valentine's Day" to be buttons that link to
other pages. Please don't draw lines on your picture!
We will do the horizontal slices first.
4. You need to know the dimensions of your
image. In the top menu, click on Image > Image Information .
I've circled my dimensions. The first number is the width,
the second is the height.
5. Choose the Selection Tool from the right
tool menu. Then in the tool box settings, click on Custom
Selection (circled) button (In PSP7, all you have to do is
double-click on the Selection Tool from the tool menu).
6. Now study your image. I want the
bottom of my first section to be sliced right above the word
Poetry. Look at the left ruler and see what number that is.
Mine looks to be at 110.
7. Since we are only making the horizontal
cuts, we will only be changing the top and bottom margins.
Set the Left = 0 and the Right = to your width of your image.
Then set the top = 0, and the bottom = to the number you picked in
8. Click ok, and a selection box will appear
around the top part of your image. I felt that my selection
bottom could be lowered a little to make it closer to Poetry.
9. So I clicked on Custom Selections again,
and changed the bottom = 115.
The new selection box lowers the bottom a little,
but still does not cut through the word Poetry.
10. In top menu, click Edit > Copy.
Then click Edit > Paste > as New Image
11. Now save this new image as the Row
number. This was Row1, so I saved it as Row1.jpg
12. Return to the original image.
Click on the Custom Selection. Now change the Top number to
be the same as the last bottom number. (in my case 115), and
change the bottom number to be the new bottom number for the next
row (read from the ruler, like in Step 6 --I chose 180)
13. Now save this new image as the Row
number. This was Row2, so I saved it as Row2.jpg
14. Now repeat Steps 12 & 13 until you have
completed all your horizontal slices. I will have 4 slices,
so I have two more to do:
15. Ok, now we are ready to do any vertical
slices. In Row 2 of my image, I need to slice so that Poetry
and Home become individual pieces. So click on Row 2 image
so that it is selected.
16. Click View > Image Information to get
it's width and height.
17. Click on Custom Selection box. For
vertical cuts you keep the top = 0, and the bottom = to the height
of your image. You will only change the Left and Right
numbers. For this cut Left = 0, and Right = a number from
the ruler to the right of Poetry (use top ruler. I chose
18. Now save this new image as the Row
number a. This was Row2, so I saved it as Row2a.jpg
19. Now repeat Steps 17 & 18 to complete the
vertical slices for this image:
middle section (not shown): Left = 110, and
Right = 375 (save as Row2b.jpg
right section (Home): (save as Row2c.jpg)
Then repeat these steps for any other image that
you need to make vertical slices for.
I needed to slice up Row 4:
Don't forget to view the image information:
Left slice: (save as Row4a.jpg)
Right slice (not shown): Left = 265, Right =
475 (Save Row4b.jpg
Now to put the image together on a webpage:
1. Make a table with border = 0, and cell
padding = 0, and cell spacing = 0.
2. The table should have the same width as
your original image.
3. The table should have the same number of
rows as your sliced image.
4. The table should have 1 cell per each
5. For the rows that have multiple images
(like Row 2 for mine) just put the image pieces side by side.
You can view the source for this page to see the
table code for the sliced graphic at the top of the page. To
do this, in your browser click on View > Source.
Please do not remove this tutorial from my site. Share my url.