Slicing Images for Optimization Using Photoshop
Step-by-step Instructions
In Photoshop:
- Take a screen shot (see image above) of the image to be sliced (CMMD, SHFT, 3). The screen shot will automatically save as a PNG file.
- Open Photoshop.
- Click and drag screen shot to Photoshop.
- Press and hold Crop tool to locate the Slice tool in the Tools palette. (The Slice tool looks like a dagger.)
- Select the Slice Tool.
- Turn on Rulers (select View, Ruler or select CTRL+”R”).
- Click and drag a guideline from either the top or left-side Ruler.
- Surround that part of the image with guides where a slice is desired.
- Once all desired slices using guides have been created, click the oval-shaped Slices from Guides button in the toolbar at the top of the workspace. A numbered, blue icon for each slice will be revealed. Some slices may be need to be drawn.
- Use the Slice tool to click and drag a border around each desired area not already sliced. The numbering of slices will be changed to include the additional drawn slices.
- Combine like slices or similar areas to wind up with as few slices as possible.
- Choose the Slice Select tool. Click the first section of the slice by clicking and pressing CMMD at the same time.
- To include additional horizontal areas to be included in the same slice, click, CMMD, SHFT simultaneously on each additional desired section to combine into a single slice. The additional sections must be horizontal to the first selection and abut one another.
- Right mouse-click and select Combine Slices to create a single slice from the selected areas.
- Repeat the step of combining slices until satisfied with the sliced images.
Slices are ready to be optimized and saved.
- Select File, Save for Web & Devices.
- Select the Slice tool from the far, left toolbar.
- Slices are numbered with a blue icon. Select a slice one at a time.
- Determine which file format and settings work best without artifacting (mottling) the slices. Obtain the best looking image while reducing the file size as low as possible. Repeat this step until all slices have been optimized.
- For photographs or areas with a good amount of detail and many colors, select JPG will be the best file optimization format. Set JPG quality to 51% and adjust until satisfied with the image quality and file size.
- For slices with fewer colors or solid colors select the PNG format.
- Select Save.
- On pop-up screen at Save As, name the file as “index.html.”
- Select file location at left-hand side of screen.
- At bottom, left of same screen, select New Folder. Name folder. Select Create.
- Back at previous screen, select Format: HTML and Images.
- Select Settings: XHTML.
- Select Slices: All slices.
- Select Save.
Locate where the folder has been saved.
- Open the folder. There will be two items inside the folder: the index.html document and an images folder. All slices with their extensions reside inside the images folder as well as a spacer.gif file.
- To check whether slices have been properly formatted, drag the index.html file to Firefox.
- Using the Web Developer Toolbar, select Outline, Outline Tables, Table Cells.
- Each slice on the index.html page will outline in red (see image below).
- When each section is clicked and dragged, a shadow of the slice briefly shows.
The file has now been optimized.