Color Workflows for Adobe Creative Suite 3

Web Publishing RGB Workflow

Designing color for online media has special challenges: Online, a document will appear on a wide range of possibly uncalibrated monitors and video display systems, significantly limiting a designer’s control over color consistency. Typically, Web designers have prepared files for the Internet by displaying them on several types of monitors and operating systems. Reviewing files using these different viewing conditions can be costly in equipment, time, and energy.

With Adobe Creative Suite 3, Web designers can view color consistently and predictably as they create artwork to be viewed on a browser. This web publishing workflow uses the sRBG color space, which provides a generic description of monitors used on the Internet. Files from a variety of sources are converted to the sRGB working space, and then prepared for the web using various CS3 applications (Figure 27).

Because the sRGB color space describes an average monitor used to view content on the Internet, the W3C (World Wide Web Consortium, an Internet standards body) has recommended this color space as the reference color space for content viewed on the Internet. Using sRGB lets the graphic designer create colors to a specific standard and rely less on the unique color characteristics of the different monitors used to preview designs.

Figure 27. When you convert your artwork to the sRGB working space, the Adobe Creative Suite 3 components can read, display, and prepare your artwork in a color space suitable for the web.

The web publishing RGB workflow consists of six steps:

1. Initial setup
2. Collecting, capturing, and scanning images
3. Creating RGB web graphics in Illustrator CS3
4. Viewing and editing artwork in Photoshop CS3 and Illustrator CS3
5. Saving files from Photoshop CS3 with embedded profiles
6. Preparing files for the web

Initial setup—Web publishing RGB workflow

Before starting this workflow, make sure that the North America Web/Internet CSF is selected in Adobe Bridge. (See Selecting Color Settings Files from Adobe Bridge for instructions.)

This selection sets the default RGB working space to sRGB across the Adobe Creative Suite 3 components (Figure 28).

Figure 28. For an Internet RGB publishing workflow, select the North America Web/Internet color setting in Adobe Bridge.

Collecting, capturing, and scanning images

Creating RGB web graphics in Illustrator CS3

When creating a new graphic in Illustrator CS3 that you plan to publish to the web, choose RGB as the color space. Any RGB graphics created in Illustrator CS3 will use sRGB as the color space. Because both Illustrator CS3 and Photoshop CS3 use the same color settings, colors in your Illustrator graphics will match the colors in your Photoshop digital images. Also, when the Illustrator CS3 and Photoshop CS3 sRGB artwork is viewed on the Internet, the colors appear consistent and are more likely to be seen as you intended.

For more on creating an Illustrator document, as well as how Illustrator treats graphics not in this color space, see How Illustrator CS3 uses RGB and CMYK document profiles.

Viewing and editing artwork in Photoshop CS3 and Illustrator CS3

If you open a digital file in Photoshop CS3 or Illustrator CS3 that contains an embedded profile that is not sRGB, the Embedded Profile Mismatch dialog box appears asking whether you want to convert the document’s colors to the working space. Click OK to make the conversion.

For more information on Adobe Creative Suite 3 profile mismatch dialog boxes, see Using profile warnings.

Saving files from Photoshop CS3 and Illustrator CS3 with embedded profiles

Preparing files for the web

Both Photoshop CS3 and Illustrator CS3 save artwork for use in web publishing and for mobile devices. You can optimize colors, image quality, and file sizes for your web publishing projects. Optimizing involves balancing file size with visual appeal, and requires judgment and a good eye; no single set of settings will optimize all image files.

If you’re authoring content for mobile devices, you can use the Device Central feature to test content with an image of each device and its properties.

To optimize and save artwork for web publishing:

1. In Photoshop CS3 or Illustrator CS3, choose File > Save for Web & Devices (Figure 29).

    

   

   (+) view larger
   Figure 29. The Save for Web & Devices dialog box lets you save smaller, optimized files for the web and mobile devices.

2. In the Save for Web & Devices dialog box, click the Optimized tab, or the 4-Up tab to display your original and previews of versions that rerender as you adjust settings.
3. Choose a suitable file format, using the Preset menu to choose a built-in setting, or the Optimized File Format menu on the left to customize settings:
   • GIF for compressing images with solid-color or areas of repetitive color, such as line art, logos, and illustrations with type, and images in Hypertext Markup Language (HTML) documents.
   • JPEG for continuous-tone photographic images that include broad color ranges and subtle brightness variations.

   For more information on these and other web formats and on setting format-specific options, see Adobe Creative Suite 3 Help.

4. If you chose a preset and do not need to adjust settings further, skip to step 7. To customize settings for compression quality, color, dithering, transparency, and so on, adjust the settings as needed.
5. To convert colors to the sRGB color space if you haven’t already, click the arrow to the right of the Preset pop-up menu. From the panel menu, choose Convert to sRGB.
6. To preview the settings for a mobile device, such as a cell phone or PDA, click Device Central, and then do the following:
   • Click the Emulator tab (Figure 30) at the top of the panel. The Emulator panel includes options for testing content for mobile devices—PDAs, smart phones, ultra-portable PCS, and so on—including device previews, display variables, and easy-to-access lists of properties such as device pixel size and number of colors supported.
   • Select a device to preview from the list on the left of the panel.
   • Select preview options on the right side of the panel. For more on these options, see the Adobe Creative Suite 3 Help.
   • When you have finished previewing, click the Close box in the upper left corner of the panel.

   

   (+) view larger
   Figure 30. Use Adobe Device Central to test content and review settings for mobile devices such as PDAs, smart phones, and ultra-portable PCs.

7. When you have finished specifying settings, click Save.

The file is ready for uploading to the web.

Page 6 of 13

Previous Page

Next Page