Webwork
/
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:

slice01

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

slice02

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.

slice02

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

slice04

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:

save4web01

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.

save_as02

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.

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

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma