Saving Photoshop Images for Print and the Web - Photoshop CC - Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book IV

Photoshop CC

Chapter 10: Saving Photoshop Images for Print and the Web

In This Chapter

image Determining the correct file formats for saving

image Preparing images for the web

image Discovering the color table

image Saving your settings

It may seem like a minor task, saving your image, but you have to make many decisions at this stage. Where will the image be viewed, onscreen or print? Will the image be large, or will it be the size of your thumbnail? Without selecting the correct settings and format, you may not be able to import your file or place it into other applications. If you save the file in the wrong format, you could delete valuable components, such as layers or saved selections. This chapter provides you with the necessary information to save the file correctly for both print and onscreen displays. Here you discover what the file format choices are and then progress into the Save for Web feature (for saving in the GIF, JPEG, PNG, and WBMP file formats).

imageSaving files in the correct file format is important not only for file size, but also in support of different Photoshop features. If you're unsure about saving in the right format, save a copy of the file, keeping the original in the PSD format (the native Photoshop format). Photoshop alerts you automatically when you choose a format in the Save As or the Save for Web dialog box that doesn't support Photoshop features. When you choose a format that doesn't support some of the features you've used, such as channels or layers, a yield sign appears when a copy is being made. With the capability of all Adobe applications (and even non-Adobe applications) to read native Photoshop (.psd) files, be wise and keep files in this native file format unless you have a compelling reason not to.

Choosing a File Format for Saving

When you choose File⇒Save for the first time (or you choose File⇒Save As to save a different version of a file), you see at least 18 different file formats to choose from in the Save As Type drop-down list. We don’t cover every format in this chapter (some are specific to proprietary workflows), but we show you which formats are best for the typical workflow you may face.

Wonderful and easy Photoshop PSD

If you’re in an Adobe workflow (you’re using any Adobe product), you can keep the image in the native Photoshop PSD format. By selecting this format, transparency, layers, channels, and paths are all maintained and left intact when placed in the other applications.

If compatibility with older versions of Photoshop is an issue, choose Edit⇒Preferences⇒File Handling (Windows) or Photoshop⇒Preferences⇒File Handling (Mac). Select Always from the Maximize PSD and PSB File Compatibility drop-down list. This choice saves a composite(flattened) image along with the layers of your document. (The PSB format is used for saving large Photoshop documents — in this case, large means they measure more than 30,000 x 30,000 pixels.)

imageLeaving the Maximize PSD and PSB File Compatibility drop-down list set to Always creates a larger file. If file size is an issue, leave the drop-down list set to Ask and use the feature only when you need to open the Photoshop file in older versions of Photoshop.

Photoshop EPS

Many applications accept the Encapsulated PostScript (EPS) file format. It’s used to transfer PostScript-language artwork between various applications. It supports vector data, duotones, and clipping paths. This means that text layers and other vector-based artwork will remain scalable.

When you choose to save in the EPS format, an EPS Options dialog box appears. Leave the defaults alone and click OK.

imageAlter the settings in the EPS Options dialog box only if you’re familiar with custom printer calibration or if you need to save your image to a specific screen ruling. Screen rulings (lpi, or lines per inch) are usually set in a page layout application, such as Adobe InDesign or QuarkXPress.

imageEven though PowerPoint accepts files saved from Photoshop in the EPS format, it is better to use the PNG format. The PNG format is designed for a better onscreen presentation and produces clearer results. Find out more in the later PNG section.

Photoshop PDF

If compatibility is an issue, save your file in the Photoshop PDF (Portable Document Format) format. PDF files are supported by more than a dozen platforms when viewers use Acrobat or Adobe Reader. (Adobe Reader is available for free at www.adobe.com.) What a perfect way to send pictures to friends and family! Saving a file in the Photoshop PDF format supports the capability to edit the image when you open the file by choosing File⇒Open in Photoshop.

imageIf you’re planning to send a layered file by e-mail, choose Layer⇒Flatten Layers before choosing to save the file as a PDF. This command cuts the file size considerably.

TIFF

The Tagged Image File Format (TIFF) is a flexible bitmap image format that’s supported by most image-editing and page-layout applications widely supported by all printers. TIFF supports layers and channels but has a maximum size of 4GB. We hope your files aren’t that large!

DCS

The Photoshop Desktop Color Separation (DCS) 1.0 and 2.0 formats are versions of EPS that enable you to save color separations of CMYK (Cyan, Magenta, Yellow, Black) or multichannel files. Some workflows require this format, but if you’ve implemented spot color channels in an image, using the DCS file format is required to maintain them.

Choose the DCS 2.0 format unless you receive specific instructions to use the DCS 1.0 format — for example, for reasons of incompatibility in certain workflows.

Saving for the Web

To access the maximum number of options for the GIF, JPEG, PNG, and WBMP file formats, save your image by choosing File⇒Save for Web. The Save for Web dialog box appears, and you can optimize the image as you save it. This procedure may sound like a big deal, but it’s just the process of making the image file size as small as possible while keeping it visually pleasing.

Saving images for the web is a give-and-take experience. You may sacrifice perfect imagery to make the image file size small enough that users can quickly download and view it. Read the upcoming sections on the GIF and JPEG formats to see how to best handle creating web images.

The following sections describe the differences in the GIF, JPEG, PNG, and WBMP formats. Choose the appropriate format based on the type of image you’re saving.

imageEnsuring that the image size is correct before you save the file for the web is a good practice. If you need to read up on resizing images, see Chapter 6 of this minibook. Generally speaking, you should resize the image to the right pixel dimensions. Choose Filter⇒Sharpen⇒Unsharp Mask to regain some of the detail that was lost in resizing the image, and then save the image for the web.

GIF

Supposedly, the way you pronounce GIF (Graphics Interchange Format) is based on the brand of peanut butter you eat. Is it pronounced like the peanut butter brand (Jif) or with a hard g, as in gift? Most people seem to pronounce it as “gift” (minus the T).

Use GIF if you have large areas of solid color, such as a logo like the one shown in Figure 10-1.

image

Figure 10-1: An image with lots of solid color makes a good GIF.

GIF isn’t lossy (it doesn’t lose data when the file is compressed in this format), but it reduces file size by using a limited number of colors in a color table. The lower the number of colors, the smaller the file size. If you’ve ever worked in Index Color mode, you’re familiar with this process.

Transparency is supported by the GIF file format. Generally, GIF files don’t do a good job on anything that needs smooth transitions from one color to another because of the format’s poor support of anti-aliasing, which is the method Photoshop uses to smooth jagged edges. When an image transitions from one color to another, Photoshop produces multiple colors of pixels to create an even blend between the two colors.

Because anti-aliasing needs to create multiple colors for this effect, GIF files generally aren’t recommended. In fact, when you reduce the size of a GIF file, you’re more apt to see banding (an artifact that appears as streaks in the image) because the anti-aliasing can’t take place with the limited number of colors available in GIF.

You can, of course, dramatically increase the number of colors to create a smoother transition, but then you risk creating monster files that take forever to download.

Saving a GIF

When you choose File⇒Save for Web, you first see the available GIF options. They may be clearer to you if you have an image open (with lots of solid color in it).

To save a file for the web as a GIF, follow these steps:

1. Choose FileSave for Web.

The Save for Web dialog box appears.

2. At the top, click the 2-Up tab.

You see the original image on the left and the optimized image on the right (or top and bottom, depending on the image proportions).

In the lower portion of the display, you see the original file size compared with the optimized file size, as well as the approximate download time. The download time is important. Nobody wants to wait around for a web page to load; most people don’t wait more than ten seconds for an entire web page to appear, so try to keep an individual image’s download time to a few seconds at the most. Remember that waiting for all images on a page to load can add up to a monstrous wait time for the viewer!

imageChange the estimated download speed by choosing the Select Download Speed drop-down menu to the right of the file size information in the lower-left of the preview window. The Select Download Speed menu is labeled in Figure 10-2.

3. Select GIF 32 No Dither from the Preset drop-down list.

You may see a change already. As you can see in Figure 10-2, Photoshop supplies you with presets to choose from, or you can customize and save your own.

image

Figure 10-2: Choose from presets, or create your own custom settings.

4. Choose whether you want dithering applied to the image by selecting an option from the Specify the Dither Algorithm drop-down list.

This choice is purely personal. Because you may be limiting colors, Photoshop can use dithering to mix the pixels of available colors to simulate missing colors. Many designers choose the No Dither option because dithering can create unnatural color speckles in an image.

5. If your image is on a transparent layer and you want to maintain that transparency on a web page, select the Transparency check box.

Using the color table in the Save for Web dialog box

When you save an image in GIF using the Save for Web feature, you see the color table. This color table displays the limited color palette used in the image and is located on the right side of the Save for Web window. The color table is important because it enables you to see the colors used in the image and to customize the color table by using the options at the bottom.

You may want to customize your color table by selecting some colors to be web safe and locking colors so that they’re not bumped off as you reduce the number that’s used.

To customize a color table, follow these steps:

1. If your image has only a few colors that you want to convert to web-safe colors, choose the Eyedropper tool from the left of the Save for Web window and click on the color (right on the image) in the Optimized view.

The sampled color is highlighted in the color table.

2. Click the Web Safe button at the bottom of the color table, as shown in Figure 10-3.

When you cross over this button, the tooltip Shifts/Unshifts Selected Colors to Web Palette appears.

A diamond appears, indicating that the color is now web safe.

3. Lock colors that you don’t want to delete as you reduce the number of colors in the color table.

Select a color with the Eyedropper tool, or select it in the color table, and then click the Lock Color button. A white square appears in the lower-right corner, indicating that the color is locked.

Obviously, if you lock 32 colors and then reduce the color table to 24, some of your locked colors are deleted. If you choose to add colors, those locked colors are the first to return.

image

Figure 10-3: Customize colors by using the color table in the Save for Web window.

imageHow is the color table created? Based on the color-reduction algorithm method you choose, the Save for Web feature samples the number of colors you indicate. If keeping colors web safe is important, select the Restrictive (Web) option for the method; if you want your image to look better on most monitors but not necessarily to be web safe, choose the Adaptive option.

4. Use the Colors drop-down list or enter a number to add or delete colors from the color table.

5. If your image uses transparency, select the Transparency check box near the top of the Save for Web dialog box.

imageRemember that transparency is counted as one of your colors in the color table.

6. Select the Interlaced check box only if your GIF image is large (25K or larger).

Selecting this option causes the image to build in several scans on the web page — a low-resolution image that pops up quickly and is then refreshed with the higher-resolution image when the download is complete. Interlacing gives the illusion of the download going faster but makes the file size larger, so use it only if necessary.

7. Click Save.

Now the image is ready to be attached to an e-mail message or used in a web page.

JPEG

JPEG (Joint Photographic Experts Group) is a good format for continuous-tone images — those with smooth transitions from one color to another, as in photographs — like the image shown in Figure 10-4.

imageThe JPEG format is lossy, so you shouldn’t save a JPEG and then open it, edit it, and save it again as a JPEG. Because the JPEG compression causes data to be lost, your image will eventually look like it was printed on a paper towel. Save a copy of the file as a JPEG, keeping the original image in PSD format if you need to edit the image later, open the original PSD, make your changes, save the PSD, and then save a copy of the edited file as a JPEG.

The JPEG format does not support transparency, but you can cheat the system a little by using matting.

image

Figure 10-4: Images with smooth transitions from one color to another are good candidates for the JPEG file format.

A good image to save in the JPEG format is a typical photograph or illustration with lots of smooth transitions from one color to the next; this includes graphics that use gradients. To save an image as a JPEG, follow these steps:

1. Choose FileSave for Web, and then click the 2-Up tab to view the original image (left) at the same time as the optimized image (right).

2. Select one of the JPEG preset settings from the Settings drop-down list.

You can choose Low, Medium, or High or customize a level between the presets by using the Quality slider.

3. Leave the Optimized check box selected to build the best JPEG at the smallest size.

The only issue with leaving this check box selected is that some very old browsers don’t read the JPEG correctly (not likely an issue for most viewers).

4. Leave the Embed Color Profile check box deselected unless you’re in a color-managed workflow and color accuracy is essential.

Selecting this check box increases the file size, and most people aren’t looking for exact color matches from an image on the monitor.

5. If you have to have the file size even smaller, use the Blur slider to bring down some detail.

It’s funny, but one JPEG that has exactly the same pixel dimensions as another may vary in file size because the more detailed an image is, the more information is needed. So, an image of lots of apples will be larger than an image of the same size that has one apple in it. The Blur feature blurs the image (surprise!), so you may want to use it for only a low source image in Dreamweaver.

6. (Optional) Select a matte color from the Matte drop-down list.

Because JPEG doesn’t support transparency, you can flood the transparent area with a color you select from the Matte drop-down list. Select the color you’re using for the background of your web page by selecting Other and entering the hexadecimal color in the lower portion of the Color Picker.

7. Click Save.

PNG

PNG (Portable Network Graphics) offers the perfect combination of GIF and JPEG. Unfortunately, the PNG format creates a file that’s a little larger than a JPEG or GIF. A PNG-24 image may have file sizes that can be too large to use on the web.

The great news is that PNG supports varying levels of transparency and anti-aliasing. This variation means that you can specify an image as being 50 percent transparent, and it shows through to the underlying web page!

If you’re saving a PNG file, you have a choice of PNG-8 or PNG-24. The PNG-8 options are essentially the same as the GIF options; see the Saving a GIF section, earlier in this chapter, for details.

PNG-24 saves 24-bit images that support anti-aliasing (the smooth transition from one color to another). These images work beautifully for continuous-tone images but are much larger than JPEG files. The truly awesome feature of a PNG file is that it supports 256 levels of transparency. In other words, you can apply varying amounts of transparency in an image, as shown in Figure 10-5, where the image shows through to the background.

image

Figure 10-5: A PNG-24 file with varying amounts of transpar-ency.

WBMP

The Wireless Application Protocol Bitmap (WBMP) format is optimized for mobile computing, has no compression, is one-bit color (just black and white — no shades), and is one bit deep. WBMP images aren’t necessarily pretty, but they’re functional (see Figure 10-6). You have dithering controls to show some level of tone value.

image

Figure 10-6: The WBMP format supports black and white only.

If you’re creating images for mobile devices, know that WBMP is part of the Wireless Application Protocol, Wireless Application Environment Specification Version 1.1.

imageClick the Preview button at the bottom left of the Save for Web dialog box to launch your web browser and display the image as it will appear with its present settings. If you haven’t set up a browser, click the down arrow and select Other from the drop-down list.

Matte

Matting appears as a choice in the GIF, JPEG, and PNG format options. Matting is useful if you don’t want ragged edges appearing around your images. Matting looks for pixels that are more than 50 percent transparent and makes them fully transparent; any pixels that are 49 percent or less transparent become fully opaque.

Even though your image might be on a transparent layer, it will have some “iffy” pixels — the ones that aren’t sure what they want to be . . . to be transparent or not to be transparent. Choose a matte color to blend in with the transparent iffy pixels by selecting Eyedropper Color, Foreground Color, Background Color, White, Black, or Other (to open the Color Picker) from the Matte drop-down list in the Save for Web dialog box.

Saving Settings

Whether you’re saving a GIF, JPG, or PNG file, you probably spent some time experimenting with settings to find what works best for your needs. Save selected options to reload later by saving the settings. Do so by clicking the arrow to the right of the Preset drop-down list. Select Save Settings from the list that appears and name your settings. Your named, customized settings then appear in the Preset drop-down list.