Slicing an image
Lesson 5, Graphics, Color, and Transparency 107PNG-8 versus PNG-24
Many software packages allow you to save an image in PNG-8 or PNG-24 format. The 8 and
24 represent the number of bits each fi le format contains. The one you choose depends on the
type of image and how you want it to appear. The PNG-8 format uses an indexed color palette
similar to GIFs, which makes this format ideal for images with areas of solid, even colors. Use
the PNG-24 format when you want variable transparency or many gradients in your image.Slicing an image
In this section, you will learn to slice an image in Adobe Photoshop. A slice is a part of an
image, cut from a larger image. These pieces are held together by an HTML table or Cascading
Style Sheets (CSS). In this example, you will use CSS to create the fi nal navigation bar.
An example of a sliced image.
Slices are useful when your web page contains large images, because downloading several
smaller packets of information on the web is faster than downloading one large packet. Slices
are also helpful when you need to save parts of an image in diff erent formats. In this exercise,
you will use existing layers to create slices. Note that you can also use guides to determine
where the slicing of your image occurs.
Viewing the completed fi le
Before starting this lesson, you’ll use your browser to view the completed image with
navigational links that you will create in this section.
1 Open your web browser.
2 Choose File > Open, or the Open fi le command appropriate for your specifi c browser.
This page is created using CSS; you can export pages built from tables of CSS from the
Photoshop Save for Web & Devices window. Find out more about CSS at w3.org/Style/CSS/.