Using the Slice Lines in a Template or Producing New Slice Lines

Tutorials   ·   March 30, 2009

The Photoshop documents (.psd) that come with your template package consist of large number of layers that are embedded into a design giving the look of a single image. This design is cut up into individual .jpg or .gif images which are put back together again using HTML coding to create your web pages. Using slices creates individual, flattened (no layers) images for your web pages without altering the original .psd file and all its editable layers. Photoshop’s Slice tools and Save for Web capability facilitate this process immensely.

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 (one created by the designer); dotted lines indicate that the slice is an auto slice. Auto slices automatically fill in around user slices as you work.

Slice colors

Differentiate user slices from auto slices. By default, user slices slices are blue, while auto slices are gray.

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 in Photoshop’s toolbar has two options.

Holding your mouse down on its icon in the toolbar 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.

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 user 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

To delete a slice, click on its number with the Slice Selection tool and hit Delete on your keyboard.

See also:

Using Guidelines as an Alternative to Slice Lines
Appropriate Naming Conventions for Saving Your Sliced Template
Optimizing Website Template File Size when Saving for Web
Changing Photos that Are Part of the Template Layout
How to Add a Repeating, Solid, or Stretched Background to a Template

Table of Contents