Appropriate Naming Conventions for Saving Your Sliced Template

Tutorials   ·   March 30, 2009

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

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

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, click the dropdown arrow for “Save as type:” and choose “Images Only” Then click on the “Settings” dropdown arrow and choose “Other” from the dropdown list. (Fig.

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 bear the name you gave it in the Slice Options window (Fig. 7) plus its file extension, i.e.: welcome.gif. Putting a check in the “Put Images in Folder: images” area at the bottom of the window will ensure that your sliced images will be placed in an images folder, to keep them separate from the html files in your template.

See also:

Using Guidelines as an Alternative to Slice Lines
Using the Slice Lines in a Template or Producing New Slice Lines
Optimizing Website Template File Size when Saving for Web
Save for Web Produces Different File Names than Expected

Table of Contents