Tutorial: 2. Slicing in Photoshop
Level: Intermediate. Published on 1 May 2002 in How to slice an image
Learn the specific techniques for creating slices in Adobe Photoshop.
This page will show you how to produce an image slice from a PSD in Photoshop. The screenshots are from Photoshop 5.5 for Windows, but the technique should be the same for any version of Photoshop.
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, such as using the Slice Tool, Crop Tool or ImageReady, 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 one of these alternative methods, 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 Show Guides from the View menu:
You should then be able to see the blue 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 check mark next to Snap To Guides:
If there's no check mark, then click on the Snap To Guides option to enable it. Also, if you're using Photoshop 6 or later, make sure that the Snap option in the View menu is enabled too.
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 Image menu:
and just click OK or press Enter when the dialog pops up:
A quick shortcut here is to press Alt+I followed by D (Windows) or Option+I then D (Mac) to duplicate the image. (This also has the advantage of not bringing up the dialog box, which saves time!)
5. Select the area to slice
Now we're going to use the Rectangular Marquee tool to select the area of the image that we want to turn into a slice. To activate the tool, click on the Rectangular Marquee icon in the Tools palette (or press the M key):
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 Rectangular Marquee 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 blue 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 from the Image menu:
Alternatively, press Alt+I followed by P (Windows) or Option+I followed by P (Mac) to crop the image.
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 GIF's. Check the original image filename in the PageKit's images folder to determine if it was a .gif or a .jpg.)
To save, select Save for Web... from the File menu:
Choose the appropriate optimization settings in the Save for Web dialog box, remembering to keep the file size as small as you can while still retaining a decent-looking image. (For more information on Save for Web, see the tutorial called The Save for Web feature.)
When you're ready to save the image, click OK or press Enter. You'll see the "Save Optimized 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 Replace or 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 PSD's, and learn Photoshop'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!