Photoshop CS Timesaving Techniques For Dummies [Electronic resources] نسخه متنی

Web Graphics Considerations

When creating an image for the Web, I use a basic formula:

Create an RGB image in Photoshop by using all the great tools and features that Photoshop has to offer.






Save the image in Photoshop. (Who wants to lose work?)





Jump to ImageReady and create any special animations or effects that you need.





Save the image for Web output by using the Optimize palette settings.

So, when I create an image for the Web, I keep a couple things in mind: What dimensions should I make the image, how few colors can I get away with (before the image quality starts degrading), and in which Web file format is it best to save the image?

Image size

The first consideration is purely practical and based on real world measurements. What are the maximum dimensions of the computer screen area? After all, you don’t want to create a graphic (or a Web page) that’s too large. If you do, your users have to scroll around to see it all.

Here’s a formula that you can use to figure out how large the image area is that you can design for:

View area width image resolution = Max pixel width

View area height image resolution = Max pixel height

When selecting view area width and height measurements, use the most common computer monitor resolution setting: 800 x 600 pixels. Then consider that a browser takes up some screen real estate, so the width and height of the viewing area should be reduced by about an inch to 720 x 530 pixels.

Graphics created for the Web should be set at 96 ppi. A higher image resolution just makes for bigger file size and it doesn’t increase image quality.

So, if you plug the numbers into the formula:

720 pixels wide 96 ppi = 7.5 inches wide

530 pixels high 96 ppi = 5.5 pixels high

So, what does this all mean for you as a Web graphics designer? The most important thing to remember is that the combined widths and heights of the design elements on a Web page have to be smaller than these dimensions. For instance, suppose that you want to create a navigation bar that runs across the top of your Web page. From the formula, you know that the nav bar should be less than 720 pixels wide (and even smaller than that if you want to center the bar and have a bit of space on each end).

Color depth

Color depth (also called bit-depth) sets how much color information is available in each pixel in an image. The lower the color depth, the fewer colors available to the image. Fewer colors and a smaller color depth translates to reduced file sizes, which make the Web graphics load faster.

You can reduce the number of colors and the color depth in an image by using the ImageReady Optimize palette. When reducing the number of colors, ImageReady lets you see a preview, letting you decide whether the image quality is good enough before saving the image. I discuss the Optimize palette and color reduction in detail in “Optimizing Web Graphics.”

Dithering and anti-aliasing

The terms that you see used when reducing colors in an image are dithering and anti-aliasing:

Dithering: Mixes two available colors from an image’s color palette to create an approximation of a color that isn’t available in the color palette. Dithering is used to make images with fewer colors look like they have more colors and shades.

Anti-aliasing: Describes the blending that occurs between an object’s edges and the background in an image. When an image is anti-aliased, increasingly transparent pixels are added to edges to help smooth transitions.

Web-safe colors

ImageReady and Photoshop offer a Web Safe Color palette that’s made up of the 216 colors that Windows and Mac browsers have in common. When selecting colors for a Web graphic, I surely recommend using this palette. That way, your graphics end up looking just as colorful in a browser as they did when you designed them.

Loading the Web Safe Color palette is easy: In either Photoshop or ImageReady, choose Window>Swatches to open the Swatches palette. Open the Swatches palette menu and choose Web Safe Colors.

Web file formats and compression

Three Web graphic file formats exist: GIF, JPEG, and PNG. Each format uses a mathematical compression formula to reduce the file size of an image and make it load faster on the Web.

GIF file format

The GIF file format can contain up to 256 colors. This format is best for high-contrast images with sharp edges including type. The GIF file format is used to retain transparency and save animations. (Turn to Technique 60 to find out how to create GIF animations. Fun!)

JPEG file format

The JPEG file format can contain millions of colors. This format works best with photographs and continuous tone images that display subtle color changes such as lighting effects.

You should know about two trade-offs when using this file format:

The compression formula that the JPEG format uses can compress a huge file way down. However, when a JPEG file is loaded into a browser, the file has to be decompressed, which can take time.

This format uses lossy compression, meaning that tiny bits of file information are lost every time a JPEG is opened, edited, saved, and closed in ImageReady. So, when creating an image for JPEG format, finish all the editing and save the file as a PSD or TIFF image. Then create a copy of the original and save it as a JPEG.

PNG file format

The PNG file format was originally created to replace the GIF format because of patent disputes. It is actually an improvement on the old GIF standard, but it does have a few drawbacks.

Two PNG file formats exist: PNG-8 and PNG-24. PNG-8 can contain up to a maximum of 256 colors, and PNG-24 can contain millions of colors. In addition, the PNG format can save transparent pixels. Because both PNG formats use lossless compression, no data is lost when images are saved and resaved.

Here’s the downside of the PNG file format:

You can’t save animations in PNG format.

PNG-24 files don’t compress as much as JPEG files, so the file size is bigger.

The PNG format is supported only by later file browsers: Microsoft Internet Explorer 4.0 and later, Netscape Navigator 6 and later, and Mac’s standard browser, Safari.