<class home>  <graphics>   <back  

Graphics: slicing

Photoshop


1. Prepare you layout file preserve all layers, especially type layers. Save the file as a PSD file. The final sliced layout file should be saved for all time.

2. The slice tool is in the tools window---it looks the same in all 4 programs (Illus., Fireworks,etc.)

3. To use it, select it and draw a box for you slice around the object on the page you want to cut out.

4. Each slice is numbered by Photoshop, starting with 01.

You can name them if you want, just double click on the blue number and you will get the slice option dialog box.

5.To modify you slices (the size), you can choose the Slice Select Tool and hover over the squares of the slice click down and stretch or squish.

6.You can use a fixed size for your slices to keep them all the same. Choose this in the options panel on top of Photoshop and enter in a width and height:

7. You can also clear all your slices to start over or lock them if you know that you don't want anyone to accidentally change them.

8.You can also create slices from guides. First make some guides by pulling them from the top or left rulers. To see rulers, go to view>rulers.

when you are done with your guides, go to the slice tool and the slice tool options on top of Photoshop and choose to make slices from guides:

Then you can select and delete slices you don't want with the Slice Selection Tool, and stretch out some other slices.

9. When you are done, Save this file, do not delete the slices, save it with the slices so you can go back into it and change things to reslice later, if you have to, like text changes. DO NOT FLATTEN TEXT, KEEP IT AS TEXT. If you are scared that someone may not have the font, include it in a REFERENCES folder with this photoshop LAYOUT file.

A sample folder system:

references>

fonts>fonts used in psd file
layouts>psd file
slices>sliced psd file

10. When you are done saving, choose SAVE FOR WEB.You will be taken to the Save for Web optimization area. Note the slice tool on the left side, with it selected you can individually select slices and in the optimized side, set specific optimization settings for each slice. Or select multiple slices to optimize all the same, holding shift down should work. Command-A (mac) to select all, or Control-A (pc).

when done optimizing, hit Save. You can choose to have Photoshop save all slices or just the slices that you have selected. You can also have Photoshop make you an html page to hold and organize your slicing by putting it in tables.


downloadable photoshop sample files>>>