Photoshop Tutorials:  Using Slices

The Photoshop documents (.psd) that come with your template package consist of large number of layers that are embedded into a single design giving the look of a single image.   This design is cut up into individual .jpg or .gif images and put back together again using html to create your web pages.  Photoshop's slice tool and Save for Web capability facilitates this process immensely.

You can view slice properites in Photoshop, the Photoshop Save for Web dialog box, and ImageReady. The following characteristics can help you identify and differentiate between slices: (see Fig. 1 below)

Slice lines
Define the boundary of the slice. Solid lines indicate that the slice is a user slice or layer-based slice; dotted lines indicate that the slice is an auto slice.

Slice colors
Differentiate user slices and layer-based slices from auto slices. By default, user slices and layer-based slices have blue symbols, while auto slices have gray symbols.

Slice numbers
Slices are numbered from left to right and top to bottom, beginning in the upper left corner of the image. If you change the arrangement or total number of slices, slice numbers are updated automatically to reflect the new order.

   Fig. 1

The slice tool has two options.  
Holding your mouse down on its icon in the tool bar will give you the flyout list of the two choices.

The Slice tool allows you to create new slices, the Slice Select tool allows you to select an existing slice to modify it.

With the Slice Select tool, right-click on a user slice (blue) to get these options:   Fig. 2

Right-clicking on an auto slice (gray) gives you these: Fig. 3

You may resize an existing user slice by clicking on its number with the Slice Select tool and dragging the small boxes in its boundary, two of which are circled in Fig.4:

  Fig. 4

Adding a new slice can sometimes be done simply by choosing the Promote to User Slice option (Fig. 3) - if an auto slice happens to fit the area where you want your new slice.

You may also draw a new slice onto the document using the Slice tool:  Click and drag to cover the area you wish to become a slice. (Fig. 5).  Let go of the mouse and the new slice boundaries will appear, as well as its surrounding auto slices. (Fig. 6)

Fig. 5

Fig. 6

Naming and Saving Slices

Naming your slices is important because the names you give your slices will be the names of the .jpg or .gif images that will go into your web pages.

Double-click on a user slice's number to open the Slice Options window:

Fig.7

The Slice Options window (Fig. 7) allows you to name the slice, give it a link (if it is to be a button in your web page), and change its dimensions.

You may also wish to customize the way your slices are named and saved.

Choose File>Save for Web from Photoshop's top menu. The Save for Web window will open.  Click the Save button on the upper right and the Save Optimized As window will open.  At the bottom of this window, choose Images Only for the Save as type: option.  Then click on the Settings arrow and choose Other from the dropdown list. (Fig. 8)

  Fig. 8

The Output Settings window will open. (Fig. 9)

Fig.9

It is recommended to set up your slice options as pictured in Fig. 9, as the default names (what you get when you do not do any customization) can be very long and confusing. When slices are saved using the settings in Fig. 9, your saved image will simply bear the name you gave it in the Slice Options window (Fig. 7) plus its file extension, i.e.: welcome.gif.  Sliced images will also be placed in an images folder, to keep them separate from the html files in your template.

Table of Contents