VCIM 1570 – Web Publishing I

Cuyahoga Community College | Fall 2011

Imaging Slicing [& Dicing] with Tables

It’s easier than you think...

---

Why slice images?

These are some of the benefits of slicing images:

• Improve image optimization
• Increase in dowload speeds (potential)
• Add interactivity

---

Why use tables?

Don’t. Tables are only meant to present tabular data. They should no longer be used for layout. Pre-CSS, there wasn't much else, but now we have CSS and positioning. So unless you’re creating html emails or doing it for a class assignment like this don’t use tables.

---

How is it done?

Using Adobe® Photoshop®, the process is quite simple:

• Use guides to map out the areas you want to slice
• Select the Slice tool, and click Slices From Guides in the options bar.
• Using the Slice Select tool, hold down shift and merge your rectangles (the fewer the better)
• Use Save for Web and Devices, optimize your image slices, and hit save.

Photoshop does the rest! It's that simple.

---

Sliced image example

Here's and image that we sliced into 9 pieces, optimized for quality/file size, and added some links.

More information: video tutorials

Okay, maybe it’s not that simple. For detailed instructions, we highly recommend these excellent video tutorials:

• Part 1 of 2: How to slice an image using Guides and Slices from Guides as well as using the Slice Tool.
• Part 2 of 2: How to optimize and save a sliced image using Save for Web & Devices. (In an HTML table).

©2011 David Windahl. All rights reserved.