Home / Articles / Adobe Photoshop / Slicing Images for the Web with Adobe Photoshop CS5

Slicing Images for the Web with Adobe Photoshop CS5

Contents

  1. Working with the Slice Tools
  2. Optimizing Image Slices for the Web
  3. Saving Your Image Files
  4. What's Next?

Article Description

Using the Slice tools in Photoshop, you can carve images into smaller pieces that are easy to use on the Web. Adobe Certified Instructor Rafael Concepcion shows how to work with the Slice tools, optimizing your website's images to improve the site's performance.
Optimizing Image Slices for the Web

Optimizing Image Slices for the Web

Once your graphic is complete, it's time to take it over to the Web via the File > Save For Web & Devices command. The Save For Web & Devices dialog is a great tool, in which you can take the individual slices that you made in the original layout and optimize them for the Web.

When working with web graphics, every kilobyte helps. If your graphics have a limited amount of color, you may be able to use GIF settings for the slices to reduce the file size (see Figure 7). In situations where you have more colors or photographic elements, JPG format may be a more prudent option. The Save For Web & Devices dialog lets you select individual slices and adjust how Photoshop exports them. Sometimes you may be unsure about which setting is best for a given graphic. The dialog provides two-up and four-up views, allowing you to make comparisons (see Figure 8).

Figure 7 Save For Web & Devices dialog.

Figure 8 Comparing image settings in the two-up view.

One of the hidden gems of the Save For Web & Devices dialog is located in the flyout menu in the upper-right corner. Select Optimize to File Size, and you can specify a desired file size for the slice (or series of slices), as shown in Figure 9. When you click OK, Photoshop adjusts the settings for the slice(s) to get to the file size you indicated.

Figure 9 The Optimize to File Size dialog is great for making small files.

3. Saving Your Image Files | Next Section Previous Section