Utilise Photoshop’s Slice Tool to Slice Web Images

This tutorial demonstrates how to slice an image (or a website design) into smaller sections using Photoshop’s Slice Tool, and is an alternative method to slicing an image using the Crop Tool.  After they have been created in Photoshop, your slices are then ready to export into an HTML editor such as GoLive or Dreamweaver, in your usual manner.

(I am demonstrating this technique using Photoshop CS4 - 342+ Photoshop PDF Tutorials).

Slicing up a large image, or website design - ensures your website doesn’t take an unreasonable time to load, and hopefully stops visitors from leaving your website before your image loads.  In addition, slicing a large image or a website design lets you save different areas as Jpegs, which is the format used to save high-colour photographic areas: or Gifs, which is the format used to save text, navigation buttons or images with a low colour-count.

Slices divide an image into smaller images that are reassembled on a web page using HTML table or CSS Layers.  By dividing the image you can assign different URL links to create page navigation, or optimise each part of an image using its optimisation settings. You export and optimise a sliced image using the Save for Web (& Devices) command.  Photoshop then saves each slice as a separate file and generates the HTML or CSS code needed to display the sliced image.

When working with slices, keep these basics in mind:
You can create a slice by using the Slice Tool or by creating Layer-based slices.
After you create a slice, you can select it using the Slice Select Tool and then move, resize, or align it with other slices.
You can set options for each slice’s such as slice type, name, and URL in the Slice Options dialogue box.
You can optimise each slice using different optimisation settings in the Save for Web (& Devices) dialogue box.

Ruler Tip
Press Ctrl then tap the R Key to display Photoshop’s Rulers.

Quickly Step Backwards
You can quickly undo a step by clicking a previous snapshot in the History Palette. (From the top menu, choose Window then click a tick before History).

Create Slices from Guides
You can create image slices from Guides.  To do so, first apply the guides to your image - View then New Guide.  Then activate the Slice Tool, and click the Slices from Guides tab, circled below.

Note
When creating slices from Guides, any existing slices are deleted.

Create Slices from Layers
A Layer-based slice encompasses all the pixel data in the Layer.  If you move the Layer or edit the Layer’s content, the slice area automatically adjusts to include the new pixels.  Layer-based slices are less flexible than user slices; however, you can convert (“promote”) a Layer-based slice to a user slice.

1. Activate a Layer in the Layers Palette.
2. Choose Layer, and then choose New Layer-based Slice.

Don’t use a Layer-based slice when you plan to move the Layer over a large area of the image during an animation, because the slice dimension may exceed a useful size.

1/
To begin, open an image or website design onto Photoshop’s workspace.

2/
Then from the left-side Toolbar, activate the Slice Tool.

And select your choice of slice Style from the Tool Options Bar.

Now, you are looking to slice your image into smaller, rectangular slices: therefore, left-click and drag out your first (rectangular) slice over your image, as illustrated below.

Tip: Resize the Slice’s Bounding Box
After you have applied your slice you will see the following repositioning handles: this means the slice is active and you can therefore resize the slice’s bounding box, should you need to.

To resize the bounding box, drag out the rectangle’s sides, (one-at-a-time), as illustrated below.

Tip
To activate an inactive slice, press down the Ctrl Key, then simultaneously left-click inside the portion you want to activate.  You can then make any final adjustments to the active portion.

3/
Now, continue slicing (or dividing) your photograph into manageable portions; and when you have completed this, you are ready for the next step.

Note
Each slice will be assigned a numerical value, as illustrated below.

Copy a Sliced Section
If you have areas of your image or website design that are roughly the same size, (for example, navigation buttons or tabs), to save time, you can copy the bounding box and drag it over to slice a different area.  To do this, hover your cursor over the bounding box you want to copy, and then press your Alt Key: and simultaneously drag the bounding box over a different area - as illustrated below.

4/
Now, either double-left-click over a rectangular slice: or click the following tab that is found on the Tool Options Bar.

Then from the subsequent Slice Options dialogue box, give each slice a unique name, and don’t forget to add an Alt Tag, so that your visitors can read about the image before it completely loads.   After you have added your text, click OK to close the Slice Options dialogue box.

(Once you have created your slices, their URLs can then be assigned to them in an HTML editor, for example Dreamweaver or Golive, in your usual way).

Note
When entering a name for your slices, don’t use capital letters or special characters.  In addition, if you are leaving spaces, remember to underscore them _ (as illustrated below).

5/ Saving/Exporting your Image Slices
Now you have created your rectangular slices, it’s time to save them.  Saving your slices exports them into a single folder names Images, where they can be utilised in your HTML editor, in your usual manner.

To save your sliced image: from the top menu, choose File then choose Save for Web (& Devices).  Then from the subsequent Save for Web (& Devices) dialogue box, optimise and save your slices.

(My Optimise and Save Images tutorial demonstrates how to operate the Save for Web (& Devices) dialogue box).

Optimisation Tip
Always save plain text graphics and images that have a low colour-count as Gifs: and save photographs or complex graphics with a high colour-count, as Jpegs.

When you are completely happy with the optimisation settings, click Save.

You will then see the following Save Optimised As dialogue box.  If you would like to save your sliced images as images only, ensure Save as type is set to Images Only, then click Save.  Your sliced images will then be saved to a folder named Images, in a destination of your choice; for example, My Documents.

 

If you would like to save your slices as HTML and Image or HTML Only, then click open the Save as type drop-down menu, and make your choice, as illustrated below.

HTML and Images

 

HTML Only

 

Centre your Work Note
If you select HTML, Photoshop places it into a table for you.  If you would like your table to be aligned to the centre, instead of to the left; then add align=”center” to your code, as illustrated below.

<TABLE WIDTH=300 BORDER=0 CELLPADDING=0 CELLSPACING=0 align=”center”>

Previewing Your Work
To preview your work in a web browser, click the following Preview tab.

Assigning URLs to your slices
Assigning a URL to a slice makes the entire slice area a link in the resulting web page. When a user clicks the link, the web browser navigates to the specified URL and target frame. This option is available only for Image slices. (Note: most designers prefer to assign the URLs in their HTML Editor, and not Photoshop).

Select a slice. If you are working in Photoshop, double-left-click the slice with the Slice Select Tool to display the Slice Options dialogue box.

1. Then from the subsequent Slice Options dialogue box, enter a URL in the URL text box. You can enter a relative URL or absolute (full) URL. If you enter an absolute URL, remember to include the correct protocol (for example, http://www.mysite.com, not www.mysite.com).
2. If desired, enter the name of a target frame in the Target text box:

   _blank Displays the linked file in a new window, leaving the original browser window open.

   _self Displays the linked file in the same frame as the original file.

   _parent Displays the linked file in its own original parent frameset. Use this option if the HTML document contains frames and the current frame is a child. The linked file appears in the current parent frame.

   _top Replaces the entire browser window with the linked file, removing all current frames. The name must match a frame name previously defined in the HTML file for the document. When a user clicks the link, the specified file appears in the new frame.

Congratulations, your sliced image is complete and is ready to utilise in your HTML editor, in your usual manner.

Wendi E.M. Scarth. (5th January 2010).

 

This entry was posted on 05/01/2010 at 01:11 pm and is filed under Photoshop Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

| Print