Cider Press Index

by Mike Swope

Professional Web Graphics from Photoshop 5.5

Part Two

Despite the .5 upgrade designation and the continued separation of ImageReady and Photoshop, the changes wrought to the web capabilities in this single package are incredible. At the risk of blasphemy, I would even venture that Adobe's developers have worked a small miracle. Where Photoshop once languished in its own outdated web capabilities, it has been remade with new and advanced user-friendly web capabilities rarely available elsewhere, if at all, in a single application. In addition to the powerful new web capabilities, several other promising tools and features have been made to help designers separate objects from their backgrounds. However, questionable color handling and a limit of 99 layers remain.

Questionable Color Handling. Despite the advances noted above, one difficult and questionable feature continues to plague this world-class image editor. Photoshop's color handling first introduced in 5.0 has been carried over into 5.5. Although Adobe professes that the change in color handling from 4.0 helps provide consistent color throughout the Photoshop workflow, Photoshop print professionals with whom I am acquainted use Photoshop 4.0 for their color correction and image preparation due to what they believe to be better results in their professional experience. Using 4.0, they continue to produce first-rate printed materials. The choice is voluntary; they have access to Photoshop 5.5.

For web professionals, the color handling in Photoshop 5.0 and 5.5 provide an interesting and frustrating problem, especially for those making the transition from 4.0 or earlier. Web graphics created in 4.0 or earlier will exhibit a color shift between what's displayed in Photoshop 5.x, and what's exported to the web. The difference is sometimes dramatic as in the case of some shades of purple to blue. In updating www.premiumdiesel.com shortly after the release of Photoshop 5.0, these color discrepancies were damning, particularly with the previews shifting from purple to blue, until compensation was made. The Photoshop manual recommends selecting Apple RGB in COLOR SETTINGS:RGB SETUP since it is the color space of earlier versions of Photoshop (4.0 and earlier). Adobe also recommends enabling the Display Using Monitor Compensation option. But these recommendations haven't held true in my case. Nor do I believe they will hold true with other web designers.

Having recently installed Photoshop 5.5 on a separate system to prepare to write this review, I have again spent several hours compensating for color discrepancy. The procedure involved calibrating my monitor using MacOS 8.5+ calibration system, or the Adobe Gamma Control Panel, which is installed with Photoshop 5.0 and 5.5. I achieved best results when selecting 9300ÁK for the white point and 1.8 for the gamma when calibrating my monitor in this fashion, and then selecting Monitor RGB in the Photoshop COLOR SETTINGS:RGB SETUP dialog box, with 9300ÁK white point, 1.8 gamma, and custom primaries. This was done by trial and error. These settings probably provide the best results because they match my selections when calibrating my monitor. Whatever the reason, these several hours spent compensating for the color discrepancy between the colors displayed in Photoshop and the colors exported to the web and displayed in browsers were frustrating and unproductive.

99 Layer Limit. Another inconvenient but far less problematic feature carried over from previous versions of Photoshop is the 99 layer limit. This limit, reasonable for print images due to their high resolution, cumbersome file sizes and large memory requirements, cramps web developers. Many web designers I know design the look and feel of their sites in Photoshop first, whether the site will contain 4 or 400 pages, then carry the design into a WYSIWYG web page editor such as Dreamweaver, GoLive or Freeway. Working with the 99 layer limit is like working in a glass broom closet. There's room to move brooms, but no room to turn around, and all the while the green lawn beckons, where turning around would be easier and we wouldn't have to back out of the closet. To work around this 99 layer limit, I have merged layers that I would have preferred remain separate, or I have saved a second file (and sometimes third file) and deleted layers that wouldn't necessarily be needed in that stage of design. This latter method can become confusing to other designers who may need to work with the files, especially if there are 3 or more files with duplicated elements. A helpful addition to Photoshop 5.5 would have raised or removed the 99 layer limit. This annoyance is minor compared to the color handling noted above.

The Powerful Save for Web Command. On the flip side, web professionals will be profoundly pleased with Photoshop's new built-in web capabilities. The first of these new web features most web designers will notice and jubilantly use over and over again is the new Save for Web command. This feature alone is nearly worth the price of the upgrade. It allows users to prepare their images for the web in a simple, user-friendly manner, and it is convenient, fast and effective. The Save for Web window offers 8 features:

1. Tools. Composed of 3 tools and a color swatch, this area of the Save for Web feature allows users to pan, zoom and sample colors from any of the windows in the LiveView area of the Save for Web window. The color swatch displays the color sampled by the eyedropper. The default zoom level is 100%. This suffices for most web graphics work; however, to utilize the full power of the Save for Web window, users may zoom in on specific areas of their image to fine tune the optimization for the best absolute results.   

2. LiveView. This is one of the sharper and deftly named features of this new release. Users can select one of 4 tabs for their viewing pleasure -- Original, Optimized, 2-Up and 4-Up -- and immediately view the results of optimization and file formats. The previews are tied together, so that all are displayed in the same locations in their respective windows and at the same magnification. The Original tab will display only the original graphic. The Optimized tab displays only the optimized image, using the settings as specified in the Optimization Settings (#7 below). The 2-Up tab displays the original and the optimized image side by side for quality-to-file-size comparisons. When users know which format, whether GIF, JPEG or PNG, will provide the best compression and best quality, this display is a good choice. For users uncertain about which optimization settings or format will provide the best results, the 4-Up tab displays the original and 3 optimized images simultaneously, each of which may be optimized independently. In addition to providing live image views, the LiveView feature also immediately displays the results of optimization settings. For GIFs, this information includes file size, estimated download time, number of colors in the image, amount of dithering, and selected color palette. For JPEGs, only the file size, estimated download time, and image quality are displayed.   

3. LiveView Pop-Up Menu. This feature is easy to overlook, unless one reads the Photoshop User Guide Supplement. The LiveView Pop-Up Menu is small and seems unimportant. The LiveView Pop-Up Menu lets users select several preview options, and works as advertised as far as I could determine. Users can elect to preview images as though they were displayed on Windows or Macintosh, make images display as they will appear when dithered in a web browser, and show download times at 14.4K, 28.8K, and 56.6K. The latter defaults to 28.8K.  

4. Magnification Pop-Up Menu. The Magnification Pop-Up Menu serves two functions. It displays the current magnification, and allows users to select from predetermined magnifications at 12.5%, 25%, 50%, 100%, 200%, 300%, 400%, 800%, 1600% and Fit on Screen. The default magnification is 100%.   

5. Color Information Bar. This area at the bottom of the Save for Web window displays the color values beneath the tip of the cursor in both RGB and Hexadecimal. Helpful to match web safe colors and to check that critical colors match.  

6. Web Browser Pop-Up Menu. Users can choose to preview the current optimized image in the web browser of their choice to check for dithering or artifacts (though users can use the LiveView Pop-Up Menu to check dithering as well).

7. Optimization Settings. Photoshop can now save images in PNG-8 and PNG-24 as well as the tried-and-true GIF and JPEG, which are still the most popular formats for the web. Users can select from default presets for these formats, and can then adjust the settings as necessary for best results. From the Optimization Pop-Up Menu, users can also save their own settings (for example, I use GIFs with an Adaptive palette at 12 colors for grayscale images) or delete any of the presets they've created or Photoshop's own. The presets are saved as separate files inside the Adobe Photoshop 5.5 folder. Users can also target a file size across GIF, JPEG and PNG-8 and -24 format from the pop-up menu. The Optimize to File Size feature automatically adjusts the image, starting from the current settings, to reach the target file size or smaller. As users might expect, Optimization Settings are context sensitive and options change according to the selected file format.

8. GIF. When GIF is selected, users will find the more common options for this file type. Users can select the color palette, whether Adaptive, Selective, Perceptual, Web, MacOS, Windows or Custom. They can enter or select the number of colors to be used in the GIF. They can also determine whether a GIF will be dithered using diffusion, pattern or noise, and whether it will be interlaced and contain transparency (transparency, however, is surprisingly unintuitive in the Save for Web window...see paragraph below). In addition to these common options, users now have 4 new options at their disposal to help them produce the highest quality-to-file-size web graphics: Matte, Lossy Compression, Dither Percentage and Web Snap.

The Matte feature is related to transparency, though users might not know this without consulting the User Guide Supplement that ships with Photoshop 5.5. With the new Matte feature, users don't select transparency color(s) as they do in the Export GIF89a filter. Instead, Transparency in the Save for Web dialog box is created only if the image being saved has transparent areas when rolled in from Photoshop proper. Of course, the default transparency will lack anti-aliasing when exported and will, therefore, suffer from the jaggies. To compensate, the new matte feature automates what users once did manually. In the past, I used to set a background color that, when made transparent, blended the foreground objects into a web page. With the Save for Web feature, I don't need to create the background in Photoshop proper and then export through the GIF89a export filter. Instead, in the Save for Web dialog box, I leave the background transparent and apply a matte of the color I would have used for the background and enable transparency to achieve similar results. This new feature works as well as the more familiar GIF89a technique to soften the edges neighboring transparency, but, as noted above, both new and advanced users will likely need to consult the User Guide Supplement to learn what this feature does and how it is used.

Despite the foreignness of the Matte feature, once users learn how it works, it is surprisingly effective and simple. The default Matte color is white. If an image which contains transparency is prepared for export and transparency is not enabled, the transparent area will be exported as white. If Transparency is enabled, the Matte feature will blend for a white background. The Matte color, however, is easily changed. Users can click on the Matte Pop-Up Menu and select Eyedropper Color, White, Black or Other. The Black and White options are self-explanatory. When the Eyedropper Color is selected, the Matte color becomes whatever color appears in the eyedropper color swatch at the time. When Other is selected, the Color Picker (selected in Photoshop's preferences and updated with new features for the web -- read more about the updated Color Picker in Part 3) opens for users to select the desired Matte color. To access the Color Picker directly, users need only click the Matte color swatch. Of course, the results of the Matte selection are immediately displayed in the LiveView window.

The other three new GIF options are Lossy Compression, Dither Percentage and Web Snap. The new Lossy Compression feature, available only with GIF format, provides up to 50% smaller GIF files without noticeable degradation but disables interlacing. Lossy Compression performs as advertised, though I suspect that 50% savings is perhaps optimistic. The Dither Percentage feature helps improve image quality but keep file size as small as possible. The higher percentage the user selects, the greater the range of colors simulated by dithering, and the greater the file size. A lower percentage produces a smaller file size because fewer colors are simulated through dithering. It is recommended that users select lowest acceptable dithering percentage for the smallest file sizes.

The last new feature for GIFs is the ability to snap colors to the web safe palette. This Web Snap feature, like Dither Percentage, works as a function of percentage. Users can select from 0-100% to determine how many colors are snapped to their nearest web safe neighbors. The greater the percentage, the greater the number of colors snapped to the web palette. Colors that have been snapped to the web palette will not dither when viewed in browsers. Users employing the Web Snap feature should be watchful for unacceptable color shifts, which will inevitably occur whenever colors are shifted to the web safe color palette.

JPEG. When JPEG is selected, users may choose from the options they have come to expect. A simple checkbox enables images to be exported as Progressive JPEGs in which a low resolution version of the image appears while the full version downloads, similar to an interlaced GIF. When the Progressive feature is enabled, the Optimized feature is automatically enabled since Progressive JPEGs require the Optimized format. In contrast, however, users can select the Optimized feature without selecting the Progressive feature. The Optimized feature creates a slightly smaller JPEG, but users should note that Optimized JPEGs are not compatible with some older browsers. With the JPEG format, users can select from 4 quality presets -- Low, Medium, High and Maximum -- which immediately update the Quality slider. Users can fine-tune their Quality selection using the same slider.

Photoshop 5.5, however, offers 3 new options to the JPEG feature. The Blur slider represents a new technique for creating smaller JPEGs by slightly blurring images to soften sharp artifacts. The greater the setting in this slider, the greater the amount of blurring in the image. Results are similar to the Gaussian Blur filter in Photoshop proper. Adobe recommends .1 to .5 as optimum Blur settings. The Matte feature, noted above in relation to the GIF format, is also available with the JPEG format, but since JPEGs do not support transparency, the Matte color becomes the background color when transparency is present in the original image. As with the GIF format, users can Optimize to File Size with the Compression Pop-Up Menu.

The last feature in the JPEG compression settings is the option to enable an ICC Profile. This feature preserves the ICC profile of the image embedded by Photoshop in images created with Photoshop in Photoshop format, according to Adobe. The Photoshop 5.5 User Guide Supplement reports that some browsers support ICC profiles, but does not name them. Since color correction is next to impossible on standard Windows PCs, and many Mac users are not likely to have color corrected their monitors (I'm thinking primarily of iMac owners here) using MacOS 8.5's Monitor Control Panel (or Adobe's Gamma Contol Panel, which is installed with Photoshop), I do not enable ICC Profiles for JPEGs. The great variation between monitors and computers, especially on Windows PCs, would seem to negate the use of ICC Profiles at this point in technological history.

PNG-8. PNG is the latest format for the web. It offers lossless compression so that no data is discarded during optimization. The Supplement also notes that the PNG format is not yet supported by all browsers. Microsoft Internet Explorer 4.5 does not support PNG graphics, but both Internet Explorer 5 and Netscape Navigator 4.7 do and will correctly display PNG-8 images. Only Internet Explorer 5 correctly displays PNG-24 images.

The PNG-8 format is similar to GIF format in that it is designed to compress solid areas while preserving sharp details commonly found in line art, logos, or illustrations, and supports transparency. The PNG-8 format, as the name suggests, supports 8-bit color, or 256 colors, like the GIF format, and the compression options are similar to those for GIFs as well. Users can select from the same color palettes as those for a GIF, whether Adaptive, Selective, Perceptual, Web, MacOS, Windows or Custom. As with a GIF, users can also enter or select the number of colors to be used in the PNG-8 image, up to 256 colors. They can also determine whether the PNG-8 image will be dithered, using the diffusion, pattern or noise method, and whether the image will be interlaced and contain transparency. The Matte feature works here like it does with GIFs. Users can also, like a GIF, snap colors to the web safe palette using the Web Snap feature. As with the GIF and JPEG formats, users can Optimize to File Size with the Compression Pop-Up Menu. Depending upon the patterns in any given image, PNG-8 images may be 10-30% smaller than their GIF counterparts of the same image. The User Guide Supplement notes that images with very few colors and very simple patterns will likely produce smaller GIFs than PNGs. For the greatest compatibility, GIFs are still the preferred format for logos, illustrations and line art.

PNG-24. Where the PNG-8 format is similar to the GIF format, the PNG-24 format resembles the JPEG format. The PNG-24 format employs, as one might guess, 24-bit color for best results with continuous tone images such as photographs, just like the JPEG format. The PNG-24 format provides several benefits over the JPEG format. PNG-24 utilizes the same lossless compression scheme as PNG-8. Like PNG-8, PNG-24 preserves sharp details in logos, lineart and illustrations. PNG-24 also supports transparency, unlike JPEG. Interestingly enough, PNG-24 supports up to 256 levels of transparency. Unfortunately, this multilevel transparency is not supported in all browsers, even those which support the PNG format. Specifically, while both Internet Explorer 5.0 and Navigator 4.7 support PNG images, only Internet Explorer 5 supports multilevel transparency. PNG-24 files are also likely to be larger than their JPEG counterparts of the same image, a result of lossless compression. Until broad bandwidth is universal, JPEG format will probably remain the format of choice for photographic images, unless designers require the transparency available with PNG-24.

The compression options available for PNG-24 images are fewer than those available with JPEGs, GIFs and PNG-8s. Users can make the image interlaced, enable transparency, and select a Matte color. That's all. As one might expect, users have no control over dithering, number of colors, the color palette or Web Snap with the PNG-24 format as they do with PNG-8 and GIF images. They also do not have access to Blur or Quality options as they do with JPEGs. At first glance, users may mistakenly believe that the Save for Web feature does not support the multilevel transparency noted above because the Matte feature seems to have no effect on the image preview. It is exactly this lack of effect with the Matte feature that indicates that an image does in fact contain multilevel transparency. If it didn't, the semi-transparent areas would take on the hue of the Matte feature. Fortunately, the Save for Web command fully supports multilevel transparency, and the results are quite nice when employed. Unfortunately, only users of IE 5.0 are currently able to see these excellent results. Designers should stick to JPEGs, or GIFs if images require transparency, for best compatibility.  

Color Table/File Size. The Color Table is another powerful feature in Photoshop's new Save for Web arsenal. Here, users add, delete, and lock colors, as well as snap colors to the web safe palette, for the GIF and PNG-8 formats. In this area, users can also manipulate an image's dimensions before exporting without altering the image in Photoshop proper. There are 8 options available in the Color Table:

Color Table. This area displays all colors used in the compressed GIF or PNG-8 image being previewed. This area is not available when previewing a JPEG or PNG-24 image. Edited and web safe colors are indicated by a dot in the center of the color swatch. Colors that have been locked are displayed with a small square in the lower right hand corner of the swatch. Colors that have been shifted to the nearest web safe equivalents are indicated with both a dot in the center and a small square in the lower right hand corner. A color can be edited by double-clicking its swatch in the Color Table. This opens the default Color Picker. Users then edit the color and close the Color Picker. The LiveView preview is updated with the altered color.

Number of Colors. This area simply displays the number of actual colors in the selected Color Palette for a GIF or PNG-8 image, and represents the number of swatches displayed in the Color Table. As the number of colors is increased in the Compression Options area, this number likewise increases. As the number of colors is decreased, this number likewise decreases. The maximum number of colors displayed will be only 256, the limit for GIFs and PNG-8s. This feature is disabled for JPEG or PNG-24 images, since the Color Table itself is disabled.

Snap to Web Safe Equivalent. This button, shaped like a cube (a cube is commonly used to indicate a color space), snaps the selected swatch to its nearest web safe equivalent. Colors that have been shifted to their nearest web safe neighbor are indicated by both a dot and a square in the color swatch. Shifting colors to their nearest web safe equivalent causes a color shift in the image. Sometimes this color shift is acceptable. Sometimes it is not. It is not recommended that colors that must match a specific Pantone color be shifted to a web safe equivalent. Color shifts can also occur when the number of colors decreases and fewer colors are available to display the Pantone color properly.

Lock Color. The solution to the problem with shifting colors to their nearest web safe neighbor and decreasing the number of colors in a palette is remedied with the Lock Color feature, available only to GIF and PNG-8 images. This button is appropriately identified by a padlock. To lock a color so that it is unaffected by the Web Snap feature, or by reducing colors in an image, select the color in the image or Color Table, then click the Lock Color icon. The locked color will now have a small square in the lower right hand corner to indicate that it is locked. Photoshop will now retain that color, and it will be unaffected when colors are shifted.

New Color. This feature shares the same page-like icon as the layers palette in Photoshop proper. The User Guide Supplement notes that this feature is useful for adding a color when a color has been removed as an image is indexed to the GIF or PNG-8 format. If an image already contains the maximum number of colors (256 colors or 255 colors with transparency), this button will be unavailable. The eyedropper tool is used to select the color to be added. By clicking in the image and holding down the mouse button, users can also sample colors outside the Save for Web dialog box from other applications and the desktop, like the Apple Picker. The new color will be displayed in the eyedropper swatch below the tools in the Save for Web dialog box. To add the color, users then click the New Color icon. The color will be added to the Color Table. It will be locked by default.

Delete Color. This button shares the same trash can icon as the layers palette in Photoshop proper, and it works the same way. To delete a color, users can select one or more swatches in the Color Table, and then click this button. The color or colors are deleted. The colors in the optimized image shift accordingly, though deleted colors do not become transparent areas. Instead, it appears that they shift to the next nearest available color.

Color Table Pop-Up Menu. Like many of Photoshop's palettes and panels, the Color Table sports a Pop-Up Menu. In this menu, users can easily Select All Colors, Select All Web Safe Colors, or Select All Non-Web Safe Colors. Users can also sort the Color Table by Hue, Luminance or Popularity (how often the colors occur in the image). The Color Table, by default, is sorted by Luminance. Users can also save the current Color Table or load a saved Color Table.

Image Size. The Image Size Panel is brought to the front by clicking the Image Size tab. In this palette, users can alter the dimensions of the image being exported. This feature works much like the Image Size command in Photoshop proper. The primary difference is that the resolution cannot be altered. In the Image Size panel, the original width and height in pixels are displayed at the top. The new width and height in pixels is displayed below. Users scale proportionally by checking the Constrain Proportions checkbox, which is enabled by default. Users may change the image size by keying new measurements or a desired percentage. When Constrain Proportions is disabled, the Percentage feature is also disabled, and users alter the width and height as they wish to distort the image. Users also choose how the image will be scaled, which determines the final image quality. They may choose from Jagged (Nearest Neighbor) or Smooth (Bicubic). Smooth is chosen by default, and provides the best results of the two. For better results, users should consider sizing and sharpening images in Photoshop proper before exporting for the web. Until the Image Size Panel features the ability to sharpen a scaled image, it is best suited for only minor changes in Image Size.

Once users have gone through the Save for Web dialogue box and selected the desired file format and compression options, locked or altered colors as needed, sized the image as required, and approved the image quality in the LiveView window, they need only click OK to save the optimized image, and the Save dialog Box appears. The default name for the optimized image will be the name of the original Photoshop document with the appropriate .gif, .jpg or .png extension. Of course, users can alter this name before saving the file, and can save the file wherever they choose. Once saved, the optimized image is ready to be imported into the web design application of choice.

Stay Tuned: Part 3: Photoshop 5.5's Other Web Features

Mike Swope is publisher of inetreviews.com, a site that will shortly be launched and also the vice-president of MacWichita Macintosh User Group in Wichita, KS. He runs his own graphics design business, Swope Design, that provides professional and affordable graphic design, printing, and consultation services/training to businesses, organizations and individuals.

Product:	Photoshop 5.5
Publisher:	Adobe Systems
Version:	5.5
Price:	US $609 MSRP  |  US $129 Upgrade from Photoshop 5.0 or ImageReady 1.0  |  US $199 Upgrade from Photoshop 4.0 or Earlier
Target Audience:	New and established graphic and web designers
Rating:	(out of 5)
Photoshop 5.5 is being reviewed on a Power Macintosh 6500/300 (upgraded with a Newer Technology G3/300 upgrade card) with 128mb RAM, 36 mb RAM given to both Photoshop 5.5 and ImageReady 2.0., and on a Rev. B iBook with 64 mb RAM, 36 mb RAM given to both Photoshop 5.5 and ImageReady 2.0.