| |
|
Often when designing a web page you may wish to have a large graphic
of some sort either by a large header image or even your entire page.
At times like these you'll want to cut your image into smaller pieces
so that people viewing your page don't have to wait for an extremely
large image file to load. Also you may want to use an image in a table
and break it up or just for the hell of it so here is how you accomplish
imamge slicing.
|
| |
|
Here is my image I have opened up in psp ready for slicing.
You should only be slicing an image when it is pretty much a final
product or else you will have to edit multiple images later on.
|
| |
|
The image slicer is located on the web toolbar. If you right click
on your standard toolbar at the top of psp you can select web toolbar and it
will appear under your standard toolbar. The image slicer is the first
option on the left.
|
| |
|
Once you have clicked the image slicer button a new window opens revealing
your image and the slicer options. In this tutorial we are only concerned
with slicing the image so most of the options will not be used.
|
| |
|
I've chosen the tic tac toe looking icon at the top and clicked on my
image, it then asks how many columns and rows I wish to slice my image
into. I've selected 2 for each, now you can select any one of the four
cells of the picture to be the active section which will be highlighted
in green. You can use the arrow tool at the top left to click on your image
and select another cell.
|
| |
|
You may not wish to have your image sliced into a perfect grid so you
can use the hand tool to move the lines in different directions. Or you
can use the knife and eraser tool to add or remove slices on your image
to make the image fit your needs.
|
It is now time to save your images
at the bottom left choose the file format in which to save your images
and click save or save as. The image slicer will now ask you for a single
name which seems odd considering you are saving multiple images. What is
going on is an html file is being made for you and all of your images will
be numbered and put into a table so that when you load that html file it looks
as though your sliced image is on unsliced image. You can now simply take the html
code or the images and use them as you want.
|
|
|
Here is what the html looks like if I cut and paste the table
into my own page. To see the exact html document that is produced
click here.
|
| |
|
|
Here is what the html looks like if I add change the cellpadding attirbute
to 1 on my image.
|
| |
