Slices

Before we move on to the next subject, I want to talk a littl bit more about slices and the slice tool in Photoshop. Last week we sliced up our web page into bits and pieces that we could place into our HTML tables for our web site. We used Image Ready to make slices out of guides. What happens if you don't use guides? Let's talk about that.

Just as a reminder, the slice tool is located in the main toolbar in PS6. Take a look above. Have an image open and grab the upper tool in the flyout menu. This is the slice tool.

In the image here, I have swiped a slice just as I would a rectangular selection with the marquee tool. Take a look at the white arrow I have provided in the image. This is the direction I made the slice by holding down the button and moving in this direction, then letting go of the button. This makes one slice called a User-Slice. Photoshop automatically fills the rest of the image with slices called, strangly enough... Auto-Slices. These auto slices are basically just filler, but if you want to actually use them, you can turn them into User-Slices by doing the following:

Select the other tool in the slice tool flyout menu. This is the Slice-Select tool. Select the box in the upper left-hand corner of an Auto-Slice. Then in the upper options bar push the Promote to User-Slice button.

You can now save this image as you would any other user slice. We did this last week, so no need to subject you to the same information twice. You can jump back to the last article for more info on saving slices.

Once you have some User-Slices, using the Slice-Select tool, you can adjust the size of the slice, move (while holding the Shift Key), and rename it. You can also add HTML to it, hyperlinks, etc...

Above I have changed the size and shape of my single User-Slice a bit.

To save your slices, all you have to do is hit File -> Save for Web, and you can select any or all of the slices you have made in the pop-up Save for Web dialog box. Then you can use the slice like you would any other image.

Prior to the slice tool, (just to let newcomers in on how powerful this tool is), we had to select portions of our image with the marquee tool, copy them merged, open a new document, paste it in there and then save it individually. You can imagine, if you've never had to do this, that this can take a long time! The slice tool, which started with Image Ready, effectively eliminates all this work. It's a great tool that really makes things a lot easier, so use it often.

This ends our series of articles on the overview of laying out web pages in Photoshop. To learn more, keep coming to Planet Photoshop and also READ YOUR USER MANUAL. Is it a boring document? Absolutely. But it also contains a ton of information on the technical aspects of the software. You should pick it up every once in a while and read a few sections. You'll be amazed at what you retain! Talk at you in seven days! Have a great week and enjoy your slice tool.