Post by VanillaOrchids on Jul 15, 2008 12:22:23 GMT -5
I wrote this tutorial back in 2006 for someone on PBS who had created a signature image that they then, in turn, wanted to cut into sections so that each section contained a different clickable link. But once he cut them apart, they no longer lined up right.
Since Rubber Ducky requested a tutorial on Slicing, I thought this might help. The Slicing portion of the tutorial is at the bottom though.
Create your image however you want. For this example, this is my image.
So you have your image and you want to cut it apart into 4 images. Take your selection tool and make a selection around what you want to be your first image. Like so:
Now CROP the image.
Go to File > Save for web.
UNDO the crop, then INVERT the selection. It will look like this:
At this point, you will crop the selection again.
Select what you want to be your second image.
Crop the image once more.
You will repeat the same process as you did with your first selection (yellow) until you have each of your four images saved.
Now, for the quick way of doing it.
Start off with your image.
Take the SLICE TOOL.
Make slice selections on your image, like so:
Now all you have left to do is SAVE FOR WEB. When you do so, you will see the following:
If all you want are the images saved, you will select IMAGES ONLY from the SAVE AS TYPE drop down menu. If you wanted an HTML file plus the images then of course you would chose HTML and IMAGES, etc.
When you do it this way, a new folder called "images" will be created inside the folder you go to save the files in. That's normal and not a big deal. Just remember when you go looking for them, look inside the images folder. LOL
Here are the 4 images put together and linked to 4 different areas of Proboards Support.
Since Rubber Ducky requested a tutorial on Slicing, I thought this might help. The Slicing portion of the tutorial is at the bottom though.
Create your image however you want. For this example, this is my image.
So you have your image and you want to cut it apart into 4 images. Take your selection tool and make a selection around what you want to be your first image. Like so:
Now CROP the image.
Go to File > Save for web.
UNDO the crop, then INVERT the selection. It will look like this:
At this point, you will crop the selection again.
Select what you want to be your second image.
Crop the image once more.
You will repeat the same process as you did with your first selection (yellow) until you have each of your four images saved.
Now, for the quick way of doing it.
Start off with your image.
Take the SLICE TOOL.
Make slice selections on your image, like so:
Now all you have left to do is SAVE FOR WEB. When you do so, you will see the following:
If all you want are the images saved, you will select IMAGES ONLY from the SAVE AS TYPE drop down menu. If you wanted an HTML file plus the images then of course you would chose HTML and IMAGES, etc.
When you do it this way, a new folder called "images" will be created inside the folder you go to save the files in. That's normal and not a big deal. Just remember when you go looking for them, look inside the images folder. LOL
Here are the 4 images put together and linked to 4 different areas of Proboards Support.