Tutorial: 3. Slicing in Paint Shop Pro
Level: Intermediate. Published on 3 July 2002 in How to slice an image
Walks you through the process of slicing using Corel's Paint Shop Pro.
This page will show you how to produce an image slice from a PSD in Paint Shop Pro. The screenshots are from Paint Shop Pro 7 for Windows, but the technique should be the same for any version of Paint Shop Pro.
In this example, we'll demonstrate how to make a slice from an original, unmodified PageKit PSD file. Of course, in a real-world situation, you would make your modifications to the PSD first, before you sliced the image. For example, you might create a new menu option or add your logo. Then you'd make new image slices from your modified PSD.
It may look like quite a complicated process. Don't worry - it's easy once you've tried it a few times. The reason this page is quite long is because we've explained every single step for you.
There are also other ways to slice images, but we chose to explain this method as it's fairly easy to understand. Once you've got the hang of this method, you can try slicing using an alternative method if you like, until you find the technique that you're most comfortable with!
1. Open the PSD
Open the .psd file that you want to work with. In this example, we're using the PSD supplied with the "Get It On" PageKit, called getiton.psd. You can download this PSD from the "Get It On" PageKit page.
2. Turn on the guides
The Guides enable us to see where the PSD had been sliced originally when the PageKit was made. We can then make sure our new slices follow the same layout, so that they fit seamlessly into the modified PageKit.
Usually the Guides will already be enabled (this setting is stored with the PSD), but if you can't see them, you'll need to enable them by selecting Guides from the View menu:
You should then be able to see the black guide markers overlaid on the PSD image:
3. Enable Snap To Guides
The next stage is to make sure you have Snap To Guides turned on. This will enable you to slice exactly along the guides quickly and easily. Check that Snap To Guides is enabled by selecting the View menu and looking for the highlighted icon next to Snap To Guides:
If the icon is not highlighted, then click on the Snap To Guides option to enable it.
4. Make a copy of the image
We're going to be altering the image in order to slice it, so it's best to work on a copy. To make a copy, select Duplicate from the Window menu, or press Shift+D:
5. Select the area to slice
Now we're going to use the Selection tool to select the area of the image that we want to turn into a slice. To activate the tool, click on the Selection Tool icon in the Tools palette (or press the S key):
Next, make sure that you are creating a rectangular selection by choosing Rectangle for the Selection type in the Tool Options palette. It is also very important that Feather is set to 0 and Antialias is not checked:
In this example we're going to recreate the slice to the right of the "what's goin' on" images, which, in the PageKit itself, is called midright.gif. So the next stage is to mark this slice with the Selection tool. Move the mouse to the top-left corner of the area to slice, and then click and drag down to the bottom-right corner and release the mouse button:
You'll notice that, because we've turned on Snap To Guides, the marquee snaps to the black guide lines very easily.
6. Perform the slice
We're now going to slice the image by removing all parts of the image except the selected area. To do this, select Crop to Selection from the Image menu, or press Shift+R:
You should then be left with just the slice:
7. Save the slice
The next step is to save your new slice as a GIF. (Sometimes the slice images are JPEGs, but usually they're GIFs. Check the original image filename in the PageKit's images folder to determine if it was a .gif or a .jpg.)
To save, select File > Export > GIF Optimizer... (or JPEG Optimizer...):
Choose the appropriate optimization settings in the GIF Optimizer dialog box, remembering to keep the file size as small as you can while still retaining a decent-looking image. (For more information on the GIF Optimizer, see the tutorial called Saving graphics for the Web.)
When you're ready to save the image, click OK or press Enter. You'll see the "Save Copy As" dialog pop up.
The next stage is to find the original midright.gif image file in the PageKit folder, and overwrite it with our new slice. First, find the Get It On PageKit folder that you are working on. You probably downloaded this from the PageKits and unzipped it to your hard drive somewhere.
Once you've found your getiton folder (or whatever you've called it), you'll see an images folder in there:
Double-click on the images folder to open it. In there you'll see lots of .gif image files. Find the file you want to overwrite (in this case, midright.gif), and double-click on the file:
You will then be asked if you want to overwrite the image file on disk. Click Yes:
8. Congratulations!
You've just created a slice! It may seem like there are a lot of steps to making a slice, but it's really quite quick and easy. Once you get the hang of it, you should be able to create slices in a few seconds.
Try practising on a few of the PageKits PSDs, and learn Paint Shop Pro's shortcut keys for each of the commands. You'll soon be happily slicing away!
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!