How to slice a document for use on the web in PhotoShop

PhotoShop CS3 Designer series

How to slice a document for use on the web in PhotoShop

This tutorial will show you how to slice a document for use on the web in Photoshop

This tutorial assumes you already have your template open in Photoshop

Slicing a document tells Photoshop which parts you want to save into separate image files

1) Select the Slice Tool

2) Click and drag around a section you want to save

3) Make another selection

Notice that the selections we made are blue while the rest are grey

4) Continue selecting the parts you want until you are done

Now we’ll save the selected slices as separate images

5) Go to File…

6) …and click Save for Web & Devices

This is where we’ll name the image files and choose what format each image will save in

7) Double click a slice

8) Enter a new name for the image

9) Click OK

10) Continue until all of the slices have been named

It is recommended that you save the images as PNGs unless they are grayscale or have few colors

11) To change the format of a slice, select it

12) Choose the new format

13) When you are done, click Save

14) Browse to the folder where you want to save your images

15) Change the Slices to All User Slices

16) Click Save

We can see our files by opening the directory where we saved them

As you can see, all of the slices were saved

This is the end of the tutorial. You now know how to slice a document for use on the web in Photoshop

Leave a Reply