The BoxedArt Guide to Using Website Templates

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

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.

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

Table of Contents

Copyright © 2007 Big Resources, Inc. All Rights Reserved