Slicing Images

Using the Selection Tool

 

This tutorial 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 Jasc.

This tutorial uses the selection tool that come with PSP, and a image of your choice.

 

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 Step 6.

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:

Row 3:

 

Row 4:

 

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 110)

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 row.

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.



 

Email

Tutorial Index

Home

 Please do not remove this tutorial from my site.  Share my url.