Photoshop Slices

Exporting Web Graphics from Photoshop

One of the useful features that Phototoshop offers to Web designers is the Slice Tool. With the Slice Tool, it's easy to cut up your Photoshop Web page mock-up into individual pieces that you then place in your HTML document.

Slice Selection and Saving:

1. Select the Slice Tool from Photoshop's tool menu and draw boxes around an individual element that you want to export:


2. Continue doing this until you have created slices for every element you want to export. Do not include text or colored divs since you will create those using HTML, not graphics. (In the example below the content has been lightened so the slices are more visible.)


3. By default, every slice is assigned a number and these numbers are visible in the Photoshop window. If you don't like them, you can turn them off in Photoshop's Preferences menu.


4. Before exporting the slices, select each one with the Slice Select Tool and give it a useful name in the Slice Options Dialogue:


Exporting the slices:

5. Open the Save for Web and Devices... dialogue and select the appropriate file type and amount of compression for each slice:


6. In the Save for Web and Devices... dialogue, hit the Save button and the Save Optimized As dialogue will pop up. At the bottom of the Save Optimized As dialogue, select All User Slices and hit Save again.


Photoshop will save each slice as an individual image in whatever location you selected.

You now have all of the graphic pieces necessary to code the HTML part of the site.

Link to class demo site.
Previous | Webwork Table of Contents | Next >

Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
Along the Mississippi River
The Work of Antoni Gaudí

Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

Graphics, sounds, and other ancient
items from the dawn of the Web.


Jay Boersma