Save an Optimized Image File

To see all the settings for Web graphic file formats in a single dialog box, use the Save for Web command on the File menu. This command enables you to select a Web file format, specify settings for the format, and then proceed with the save. The rest of this section shows you how to use the Save for Web command to optimize and save a file in the three most common Web graphic formats ”JPEG, GIF, and WBMP.

Saving a JPEG

These steps show you how to use the Save for Web command to save a JPEG file so that you can choose the optimum compression for your image.

1. Click on File . The File menu will appear.

2. Click on Save for Web . The Save For Web dialog box will open with its Optimized tab selected.

   

3. Click on the down arrow beside the file format drop-down list and then click on JPEG. The JPEG choices will appear in the settings box.

   Note

   You can use the drop-down list labeled Preset the top of the Settings box to choose a presaved set of optimization settings, such as JPEG High or GIF 32 Dithered.

4. Type an image quality setting . The higher the setting, the lower the file compression and vice versa.

   

5. Click on the down arrow beside the Matte drop-down list. A menu will appear.

6. Click on Other . The Color Picker dialog box will appear so that you can use it to specify a matte for the image.

   

   Note

   A matte color in a GIF or PNG Web graphic helps the edges of transparent areas blend with the Web page background. In a JPEG image, it fills areas that were originally transparent with the specified color for blending.

7. Click on a color hue in the narrow band of colors near the middle of the dialog box. Photoshop will display a different range of colors in the Choose a color box.

8. Click on a color in the Choose a color box. The color you click on will become the active matte color.

9. Click on OK . The Color Picker dialog box will close.

   

10. Click on Save . The Save Optimized As dialog box will appear.

    

11. Edit the File name text box entry as necessary. The name you specify will be applied to the Web graphic file.

    Note

    You can use the Save In drop-down list to choose another disk and folder location for the saved file, if necessary.

12. Click on Save . The Save Optimized As and Save For Web dialog boxes will close. Only the original image will be open in Photoshop. You can find the new, optimized Web graphic file in the folder where you saved it.

    

Saving a GIF

Saving an optimized GIF file follows much the same process as saving an optimized JPEG file. Get started with the process now.

1. Click on File . The File menu will appear.

2. Click on Save For Web . The Save For Web dialog box will open with its Optimized tab selected.

   

3. Click on the down arrow beside the drop-down list in the upper-left corner of the Settings box and then click on GIF. The GIF choices will appear in the Settings box.

4. Choose image color settings . This represents the maximum number of colors in the image.

   

5. Choose image dithering settings , both by choosing a dithering method from the drop-down list and by choosing the amount of dithering using the slider that appears when you click on the down arrow beside Dither. The statistics in the lower-right corner of the preview area will change to show the specified dithering method.

6. Leave the Transparency check box checked . This ensures that the transparent areas in the image will remain transparent in the final GIF file.

7. Click on the down arrow beside the drop-down list below the Transparency check box. A menu of transparency dithering algorithms will appear.

   

8. Click on the desired algorithm . The preview will show the impact of the selected algorithm.

   Note

   Specifying the transparency dither algorithm will be necessary for images with semitransparent areas, such as gradients or bleeds.

   You also can add a matte for the GIF, but it won't be as obvious in the preview. That's because the matte for a GIF image serves more as a blending zone between the image content and the Web page background.

9. Click on Save . The Save Optimized As dialog box will open.

   

10. Edit the File name text box entry as necessary. The name you specify will be applied to the Web graphic file.

11. Click on Save . The Save Optimized As and Save For Web dialog boxes will close. Only the original image will be open in Photoshop. You can find the new, optimized Web graphic file in the folder where you saved it.

    

Saving a WBMP

As noted earlier in this chapter, a WBMP file is a black-and-white file created specifically for wireless (and handheld) devices. When you convert an image to WBMP, you may lose some of the detail, but the tradeoff is necessary. Follow these steps to save a file as a WBMP file.

1. Click on File . The File menu will appear.

2. Click on Save for Web . The Save For Web dialog box will open with its Optimized tab selected.

   

3. Click on the down arrow beside the drop-down list and then click on WBMP. The WBMP choices will appear in the Settings box.

4. Choose image dithering settings , both by choosing a dithering method setting from the drop-down list on the left and by choosing the amount of dithering using the Dither choice on the right. The statistic in the lower-right corner of the preview area will change to show the specified dithering method.

5. Click on Save . The Save Optimized As dialog box will open.

   

6. Edit the File name text box entry as necessary. The name you specify will be applied to the Web graphic file.

7. Click on Save . The Save Optimized As and Save For Web dialog boxes will close. Only the original image will be open in Photoshop. You can find the new, optimized Web graphic file in the folder where you saved it.