Slices
Slices are a web-based feature of Photoshop that cut up a document into different parts. Each part, or 'slice', gets saved as a separate image when you perform a File>Save for Web & Devices. You can identify some slices to be text blocks where whatever text you desire can be added later. The save function can be used to also save a web page that includes the slices for further tweaking in a web design program. Slices aren't used much anymore, but just in case, here's a basic introduction.

One handy use for slices is to be able to mock up a complex web page in Photoshop and to be able to export it as a complete html web page without much trouble. Another use for slices is to create advanced navigational bars where all the graphics are contained within one Photoshop document for simplicity and consistent style. One advantage to using slices is that the slices, if repeated on each page of the web site, need to be downloaded only once. They get "cached" in the web browser. Subsequent displays of the same graphics on other web pages are quicker because the graphic has been saved to the web browser's cache.

To use slices, create or open a document in Photoshop, and click the slice tool from the Tools palette.

(for the in-class example, use the file slice_me.psd from Exercises 7)

Click and drag the slice tool in your document to create a rectangular slice.  Photoshop will automatically number the slice and the current slice will be surrounded by a brown outline. You can drag the slice handles to resize them if needed. If you make additional slices, the slices you are not working on will be shown with a blue outline. If you have guidelines present in your document, you may choose Slices From Guides on the Options Bar to automatically generate them. Some slices will be automatically generated depending on where you created the first slice. For example, if you start the corner of your first slice well inside the picture, the other parts of the picture will be automatically divided so that your slice will fit in a grid. To choose between slices, use the Slice Select Tool. NOTE: In CS5, the Slice Tool is grouped with the Crop tool. When the Slice Select tool is chosen, you may set slice options by clicking on the lined folder icon on the Options Bar (at the top of the screen) or by double-clicking on the slice. This will allow you to individually name your slices for when they get saved as separate images as well as changing other options (i.e., converting a slice into a text box, etc).

When you are satisfied with the way the slices are arranged, File>Save for Web & Devices will open a dialogue box where you can select which kind of file you wish to save each slice (GIF vs. JPEG) and other web options. Individual slices may be saved different ways -- i.e. a block that contains mostly simple graphics and display type can be saved as a GIF file, while a photograph included in the design can be saved as a JPG file.

To align text to the top of a slice, double-click the slice containing the text in the Save for Web and Devices dialog box, and choose alignments you desire. (NOTE: I've noticed that carriage returns are not honored here, and that you have to open the resulting file in a web page editor to insert line breaks.)

When you click Save, another dialog box opens where you can choose between "HTML and Images", "HTML Only", and "Images Only". Save as "HTML and Images" so you can edit the page itself in a web page editor later on. Save the documents into a new folder you create to capture all the pictures and HTML code generated.

The result of this slicing exercise can be found on the web here. It's just one demo page, and most links are not active.

Picture Size for Slices
Web designers target either an 800x600 pixel screen (~20% of users have this) or sometimes a larger 1024x768 pixel screen ( ~80% of users have this) for professionals in the visual fields (i.e. you are going to design a portfolio to be seen by graphic designers who typically have larger screens than general users.)

In order to accommodate scroll bars and menus, one notable web designer says to create a 760x420 pixel page for users that have 800x600 screens, and to create a 955x600 pixel page for1024x768 screens.

The introduction of high-pixel count screens like Apple's Retina displays will complicate things. There is some scaling that can be done in code to accomodate this issue, and development will continue. Read this page for more information.