MASTERING IMAGEREADY

Creating Transparent JPEGs

Suppose that you want to cut out the foreground of an image and see the web page's background, but you want to keep the image as 24-bit color. I suggest that you rethink your intent. Why do you need 24-bit color? You can, of course, save it as a PNG-24 if you feel that you really need every possible color available on a computer screen. Although it produces larger file sizes than JPEG, it natively supports transparency. Remember that some older web browsers can't display PNG files. That is rarely a problem, however.

Alternatively, you can get the benefits of the JPEG format's smaller file size and wider compatibility by simulating transparency. Here's how:

1.	Make a copy of the image.
2.	Merge all layers. If the image is flattened, convert the Background layer to a regular layer by renaming it.
3.	Make a selection of the area that you want to be transparent and delete it. (The area should actually become transparent in the image.)
4.	Open Save for Web.
5.	Select JPEG as the file format and choose your Quality setting.
6.	In the Matte pop-up menu, choose Other.
7.	Select the web page's background color. For best results, the web page (and the matte color) should use a web-safe color.
8.	Save the image.

This technique is not recommended for use with web pages whose background is a pattern or tiled image. It's difficult to ensure that the pattern will be properly aligned. To get the best possible color match, do not save an ICC profile with the JPEG.

Creating Letters by Pixel

Why does type look so bad on the web? Type doesn't have to look bad on your web pages. Keep in mind one simple concept as you design and create, and you'll get excellent quality. In a nutshell, you need only remember that everything on the web is reproduced with square pixels.

Because web pages are generally viewed on a computer monitor, everything is created from pixels, and every pixel is square. Trying to use square, evenly spaced pixels to show the subtle variations and curves of a script font or an italicized type, for example, can be difficult. And the smaller the type, the fewer the number of pixels that can be used for each character. Here are some suggestions:

• Use the largest type size possible. The more pixels you have for each character, the better they reproduce.

• Sans serif fonts are typically easier to show onscreen. They have uniform stroke sizes throughout the letter and lack the fine details at the end of strokes that often get too fuzzy to see properly.

• Sharp anti-aliasing is designed for use with type. It's especially effective for smaller font sizes.

If you use a video monitor, you can elect to change the shape of the pixels by applying the corrections available on the Image, Pixel Aspect Ratio menu. The Help screen in Photoshop explains them very well.

Understanding Pre-optimization

What do I need to do to get an image ready for Save for Web? What color mode? What resolution? What else?

Actually, you don't have to do anythingSave for Web automatically converts CMYK to RGB and 16-bit to 8-bit. Layers are flattened, type is rasterized, and blending modes are applied. Save for Web handles all the conversions necessary for the selected file format.

Remember, too, that there's no resolution on the web. All raster images are displayed according to their pixel dimensions. You don't even need to use Image Size to adjust those dimensions. Instead, leave your original as is, and use the Image Size tab in Save for Web to resize the image. You can use the same resampling algorithms as in Image Size, so there's no worry about additional image degradation.

ImageReady, on the other hand, requires 8-bit RGB images. Use the Image, Mode command if necessary before jumping to ImageReady.