Designs By EBS: Lessons in Photoshop

Lesson 1 > continued

Next we will be saving the images and slices for the web. When you open Lesson1c.psd, make sure you can see the slices: View>Show>Slices.

Download Lesson 1c.psd

Step 9 GIF, JPEG, PNG

JPEG format is designed to preserve the broad color range and subtle brightness variations of continuous-tone images: photographs, gradients, shadows. It can represent millions of colors

GIF format is effective at compressing solid-color images and images with areas of repetitive color: line art, logos, typography, illustrations. this format uses a palette of 256 colors and supports background transparency.

PNG format is effective at compressing solid-color images and preserving sharp detail. The PNG-8 format uses 256-color palette; the PNG-24 format supports millions of color. However, many older browsers do not support PNG files.

Step 10 Save for Web

Both Photoshop and Imageready have image optimization capabilities. In Photoshop, select File > Save for Web, and you can compare what your image looks like in different formats. ImageReady has the optimization displayed in the document window under "2-up" and "4-up." By slicing an image, you can save each unlinked slice in a different format. Areas with text and solid colors can be saved as GIF files. Photgraphs and gradients can be saved as JPEG files.

To optimize files in ImageReady, use the Optimize Palette. In Photoshop, you can change the settings in the Save For Web Dialog box.

Step 11 Save as tables or CSS layers

In ImageReady, you can change the option for the HTML file to be saved as tables or layers. Under File > Output Settings > Slices. You are allowed to choose if the CSS files are ID, Class, or inline elments. In using ImageReady to create CSS, it doesn't solve all issues and is slightly inefficient when creating styles and layers. You can download the source code and CSS of the home page, for more details.

< Previous | CSS of this lesson | Beginning >

lessons . tutorials . links . home