If you are a graphic designer with a background in print design, you may have never used the slice tool in Adobe Photoshop or Illustrator. Why would you? In print design, you have no need of the slice tool. You get to just design your piece, set the crop marks, and send it off to the printers.
In web design… the process is somewhat different.
The purpose of slices
A rendered web page is a montage of elements defined by the HTML and described by the CSS. After you create a web page layout design in Photoshop (or in Fireworks, which is probably better for layout and element placement), you will have a picture of what the final web page will look like.
But you can’t just serve this big huge full-screen image to your site’s visitors. The background images for each element of the design must be separated into individual components in order to make the document interactive. The image of a design must be converted into a working HTML layout design for the website; and usually this HTML layout will be ported into a theme for the end user’s Content Management System (CMS). Also, in order to reduce page load times, large uniform images must be split into very small pieces, often only a few pixels wide, which may then be set to repeat so as to fill the entire element. Element backgrounds that are not uniform are often served whole, which is more bandwidth-intensive, and requires careful slicing so that adjacent objects will line up properly. (Advanced users, see also CSS sprites.)
An Example
When I was working on one client’s website project, I was provided with a finished Photoshop file that had been created by another design firm. By hiding layers and slicing the page as appropriate, I was able to isolate the individual component parts, which were not supplied separately. Using the slice tool, I cut the background into pieces, and exported them for use in the web page: the company name and slogan, as well as the header navigation’s button links, the section backgrounds, and so on. Having exported the images with the “Save for Web and Devices” dialogue, I attached these pieces to the HTML elements with CSS, and created the headerbar, the horizontal navigation menu, and the footer bar. I used a map element with areas to define link regions in the footer: Dreamweaver has tools to make this process easy.
After that, final changes are made to the HTML and CSS, such as to add the dropdown menu, for example.
Tips for designers
In Photoshop, you access the slice tool from the same toolbox menu graphic as the crop tool.
As a graphic designer, you have to get your slices pixel-perfect, or else it becomes very difficult, sometimes impossible, for your CSS designer to get the page’s graphic elements to line up. Whether or not you are your own CSS designer, you want to make their life easy. So that’s one tricky thing about the slice tool: I always find myself zoomed all the way in, when I’m using it.
The other tricky thing is that once you draw a slice, Adobe auto-generates an eye-splitting web of “implied” slices. For this reason, I often slice a copy of my file, so that the original does not have to be subjected to this feature. Once the slices have been implied, when you export the image, the software will split it along the slice lines; which is fantastic, if you’ve sliced everything properly, and a horrible pain in the neck if you aren’t careful. To avoid creating a lot of extra unnecessary files in my images directory, I try to remember to only export the selected slices from the Save for Web dialogue, and to only select the slice that I’m working on at the moment. It’s also very helpful if you name each slice before exporting.
To name a slice, choose the slice selection tool (in the same toolbox menu as the slice tool). Double-click your slice and name it. This makes it easier to deal with after the export.
To edit a slice, use the slice selection tool (the white arrow pointer, under the same menu as the usual black arrow pointer). This allows you to grab the borders and corners of your slice, and move them around. It’s a good thing, too! Otherwise you’d have to be pixel-perfect the very first time.
Best of luck, and happy slicing!