Lesson 18 Saving Completed Images

In this tutorial, you will: Prepare an Image for its Intended UseSave a Copy of an Image in the TIFF Format to Prepare it for Use

in a Printed DocumentUse the Save For Web Command to Optimize an Image for Use on

the Web

Digital Media I

Susan M. Raymond

West High School

Data Files:

This and That Painting.psd

Saving for Use in Print Applications› Photoshop images that will be imported into documents designed for print are typically saved in either the TIFF or EPS formats

› When saving a Photoshop image in the TIFF or EPS formats the image is automatically flattened, since those formats do not ordinarily support Photoshop layers

› In addition, Photoshop automatically saves a copy of your file when you save the file in one of these formats

› This ensures that the original file with the layers intact will not be replaced when you save the file in a different format

› This is important, because you may need to return to the original file that includes layers in order to make changes later

› Saving a copy of an image is also convenient, because it allows you to continue to work with the original file since the original file remains open when you use the save as a copy option

Saving in TIFF Format

› Photoshop’s native PSD file format is great when you’re working in Photoshop, but it’s not the ideal format for your final print or web graphics

› Photoshop allows you to save PSD files for completed print graphics in a variety of formats

› In addition, you can choose from a variety of graphic formats and format options to create optimized graphics for use on the Web

› Let’s prepare the image for use in a print document by saving the image in the TIFF format

› Choose File, Save As

› From the Format pop-up menu, select TIFF

› In the Save Options section, the As A Copy option is checked

› This indicates that the TIFF version you are now saving will be saved as a separate file, leaving the original file open so that you can continue working with it

› This method is convenient since you will next save another copy of the original file in a different format

› The check box is also grayed out, indicating that you cannot deselect this option

› In addition, the Layers option is unchecked and grayed out, which indicates that, by default, the TIFF format cannot contain layers

› Saving an image in the TIFF format automatically flattens the image

› A Warning icon appears at the bottom of the dialog box indicating that some of the image’s data won’t be saved with this format

› Let’s finish saving the file

› Double-click in the highlighted text box and type This and That Painting.tif

› Click on the Save button

› Click on the OK button to save the file in IBM PC bye order for compatibility with PC publishing applications

› A copy of the image is saved in the TIFF format, leaving the original file in Photoshop format open for further editing

› If you were only working on a Macintosh computer, or preparing an image on a PC to be used with a Macintosh publishing application, you would select the Macintosh byte order

Saving for the Web

› Web graphics are traditionally saved in either the JPEG or GIF format, although other formats exist for web graphics

› JPEG images can contain millions of colors and shades, while GIF images can contain only 256 colors and shades

› Therefore, the JPEG format is preferable for continuous tone images, such as photographs

› The Save For Web command allows you to preview several versions of an image to see how the image will appear when exported using a variety of web formats and format options

› This allows you to select the format and format options that provide the best balance between small file size and image quality

› Let’s save a copy of the This And That Painting.psd image for web use by using the Save For Web command

› Choose File, Save For Web

› The Save For Web preview box allows you to preview one or more optimized versions of an image

› You can use it to compare an optimized version to an original image, as well as to other optimized versions

› First, let’s compare an optimized version to the original

› Click on the 2-up tab

› The original version appears on the left side of the dialog box, with the GIF optimized version on the right

› The GIF format does a fairly good job of reproducing the image using only 256 colors

› The bottom left corner of each version of the image displays the image file size - notice that the GIF format reduced the image file size considerably

› Also, the time it would take to download this image using a 28.8 Kbps modem is also displayed for the optimized version

› The GIF version is comparable to the original

› However, fewer colors are used to display the image, which can cause some banding and color shifts within the image

› Image areas that include color transitions, such as highlights, typically appear less smooth

› Let’s view the JPEG version of the image

› Click on the 4-up tab

› Click on the bottom-left preview to select it

› From the Format pop-up menu in the Settings section of the dialog box, select JPEG

› The lower-left preview now displays a JPEG optimized version of the image

› The JPEG version is also comparable to the original, but uses a file size less than half that of the original GIF optimized version

› A smaller file size results in a faster download time for viewers, so you should use the JPEG version

› In addition, the JPEG version doesn’t limit the number of colors and shades in the image, which produces smoother color transitions than the GIF version

› Although the filters that were applied to this image help to minimize the effect of the GIF format’s color limitation, the JPEG version provides an image that is truer to the original

› Let’s change the quality of the JPEG preview

› From the Settings pop-up menu, select Low

› A higher quality setting increases image quality and file size

› A lower quality setting decreases image quality and file size

› The JPEG preview displays some distortion throughout the image, and the file size has dropped considerably

› Let’s return to a higher JPEG quality settings using a more precise method

› Click on the triangle to the right of the Quality field and drag the slider to a value of 50

› The JPEG preview improves and the file size increases

› Let’s reduce the image’s pixel dimensions to that it appears at a smaller size in the viewer’s web browser

› Currently, this image’s large size may prevent some viewers from seeing the entire image within their browser windows, forcing them to scroll

› Click on the Image Size tab

› Some people use monitors that are 640x480 pixels, so to avoid making an image that’s wider than their monitors can display, you’ll reduce it

› Since the window edges and toolbars can reduce the number of usable pixels, let’s use a width of 500 pixels to be certain the image will fit without scrolling horizontally

› Double-click in the Width field and type 500

› The Width and Height fields both change, ensuring that you won’t accidentally change the image’s original proportions

› You are now ready to save the JPEG optimized version

› When saving an image using the Save For Web dialog box, the selected image preview is the one that will be saved

› Click on the OK button

› Images placed on Web servers should use names that are all lowercase characters, have no spaces, and use a file extension

› Type thisnthat in the File Name field and finish saving

› The JPEG version is saved, and the original Photoshop format version of the image remains open

› Choose File, Save

› Choose File, Close

› Email it to me, please as PS18

Points to Remember:

› Web graphics are traditionally saved in either the JPEG or GIF format.

› You can use the Zoom tool in the Save For Web dialog box to view the image previews at larger or smaller magnifications.

› Banding is the undesirable printed effect of sharp, distinct color transitions appearing in an image rather than smooth, continuous transitions.

› Banding is most commonly a problem in gradients.