TECHNICAL SUPPORT | Slicing and Optimizing
* Refer to this PDF
for Slicing overview and this PDF
for extra help on Slicing.
* Refer to this PDF
for extra help on Optimizing.
- Open your document in Image Ready and save your file to a new folder and call it mydocument_slices.psd
- Make sure the following palettes are open by going to Window > Show Slice, Show Layers, Show Optimize, Show Color Table. Also have visible the rulers and guides by going to View > Show Rulers, uncheck Lock Guides and Snap.
- Click on the tab in the upper left corner of the document window > Original
- Click on the black arrow in the Tool Palette and drag guides out from the rulers to block off areas you plan to save out as individual images (banner, section headers, bullet, etc.)
- Click on the knife tool in the Tool Palette and click and drag your mouse all the way to the bottom of the flyout to release the Slice Tools tearoff. Go to View > Snap, to make sure snap to guides and slices is turned on.
- Click on the Slice Tool. Click and drag a bounding box around the images to be sliced. Use the guides as reference.
- Once you have drawn out all of your slices, click on the Slice Select tool (next to the Slice Tool on the Slice Tools tearoff). Now go through and name each slice you want to save using the Slices Palette (lower case, short names, no spaces). Notice that other slices have been created, don't bother with these.
- Once you have named all of your slices go back and select each slice. Select the Optimize tab at the top of the document window.
- Using your Optimize Palette, optimize your slices by choosing either
GIF or JPG Settings from the pull down menus.
- Optimize by balancing the quality of the image preview and with the file size.
- Start with the preset settings and make adjustments to the number of colors (GIF) or the quality settings (JPG)
- If you are making Transparent GIFs remember to change the Matte color to your site background color and make sure Transparency is checked.
- For further information on Optimizing, refer to these links:
- Once you have optimized all of your slices you are now ready to save out your slices. Use the Slice Selection tool plus the Shift Key to select all of the slices you want to save. Then go to File > Save Optimized as...
- From the Save Optimized as... choose Images Only and Selected Slices from the pulldown menus. Save by selecting your root directory. Image Ready will look for an images folder in your root directory. If you don't have one, it will create it for you.
- Now you are ready to open Dreamweaver and create or add to your Cascading Style Sheet. Make sure you define your site with the folder that contains your images and your html files.