How to Use Photoshop for the Web | 2 | WebReference

How to Use Photoshop for the Web | 2

How to Use Photoshop for the Web

    This box will prompt you for format options:

  • Baseline (Standard)—This is the default option, if you leave the others unchecked.

  • Baseline (Optimized)—This option optimizes the colors in the file. It creates a smaller file.

  • Progressive—Except for very small JPEGs, this is almost a must for web work. Progressive means that your file is visible within a web browser faster and it is then refined by subsequent passes, or scans, as more file information is downloaded. If you select a progressive JPEG, it will automatically be optimized.

GIF (Graphics Interchange Format)

GIFs are another option for web file formats. Because they're limited to 256 colors, they're not as good as JPEG for continuous tone art, but they're great for line art, logos, and anything with limited color. The GIF format also lets you save files with transparent backgrounds, which is extremely useful when you are creating buttons and other round graphics. Furthermore, you can animate a GIF.

In Figure 24.5, I've created a simple button that I'll be saving as a GIF. Notice how much the file shrinks (from 190KB to 1.78KB) when I limit the colors in the GIF.

PNG (Portable Network Graphics)

There are two kinds of PNG: 8-bit and 24-bit. The PNG-8 format uses 8-bit color, which means that each image can contain only 256 colors. Like the GIF format, PNG-8 compresses solid areas of color very well while preserving sharp detail, such as that in line art, logos, or illustrations with type. The PNG-8 format uses a lossless compression method, with no data discarded during compression. However, because PNG-8 files are 8-bit color, optimizing an original 24-bit image—which can contain millions of colors—as a PNG-8 will degrade image quality. PNG-8 files use more advanced compression schemes than GIF, and they can be 10%–30% smaller than GIF files of the same image, depending on the image's color patterns.

PNG-24 file format uses 24-bit color and is suitable for continuous-tone images. PNG-24 uses a lossless compression scheme, so that you never lose image data when you save in this format. However, as a result, PNG-24 files can be much larger than JPEG files of the same image. PNG-24 format is recommended only when working with a continuous-tone image that includes multilevel (variable) transparency, such as you would have in an anti-aliased image on a transparent layer. (Multilevel transparency is supported by the PNG-24 format but not the JPEG format.)

Bottom line: If you would consider GIF for an image, consider PNG-8 as well. It might give you a smaller file, and can do the job well. If you're thinking about JPEG, consider PNG-24 if your picture has multilevel transparency. If it's a straight image, JPEG will probably give you a smaller, more efficient file. Just remember that if you choose PNG, some users with older browsers may not be able to view your images.

Preparing Backgrounds

I admit that I have mixed feelings about backgrounds on web pages. These can really add personality to a website, but they also can make reading the text of your site difficult and frustrating. To quote web designer David Siegel, "Gift-wrap makes poor stationery."

That said, however, if you use backgrounds with discretion, they can add to a site's presence and look. Because HTML includes the capability to tile any image as a background, your background file can be quite small. You just have to make sure that it doesn't have obvious edges or pictures that end abruptly, unless that's what you want. In Figure 24.6, I've created a tile for a web page background, and I'm saving it as a GIF using the Save For Web dialog box in Photoshop.

To convert the single tile into a background is easy. You simply open a page in your favorite web page layout program, and import the image. Depending on the program, you might import it as an image and click a check box in the dialog box to make it a background. Some other web page layout programs have a specific dialog box for placing backgrounds. Figure 24.7 shows how to insert a background image tile using HTML Assistant.

Now, all you have to do is to be sure that when you upload your page to the Web, the background image is where you said it would be. Figure 24.8 shows the tiled background with some type placed over it.

Here's a trick for placing a stripe down one side of your page. Make a single tile that's a little wider than the width of the screen by as few pixels high as needed. Place your color and/or texture on its left side, and then save it as a GIF or JPEG. The file will probably look something like Figure 24.9.

When you place this file as a background, it will be tiled vertically but not horizontally, because it's already as wide as the screen. You'll end up with a nice stripe, as wide as you care to make it, in the color and texture of your choice. It makes a good accent for a plain page, especially if you then place buttons on it.

Created: March 27, 2003
Revised: January 09, 2005