Apogee Photo - Home

 

Apogee Photo Magazine

The Webification of Photoshop 5.5

By Monique I. Cuvelier and Peter Maureemootoo

Photoshop used to reign supreme over other image editors, until the weight of the Web undermined its position. Creating small, good quality images was not only difficult, but also awkward. (Just try saving your favorite picture as a GIF format in Photoshop version 5.0, and you'll see what I mean.) Web-critical features were effectively non-existent until recently, necessitating the use and expense of additional Web tools.

The advent of Photoshop 5.5 has changed all that. Adobe Systems has more than made amends for its previous neglect of Web capabilities with the power to format and optimize photographs for online publication. Photoshop 5.5 automates and facilitates tricks like creating GIF animations and JavaScript rollovers. Saving images in the many file formats of the Web has never been so easy. This Photoshop version lets you optimize quality for a variety of media, so your photographs can look their best--whether you're putting them on a printed brochure, a high-resolution CD, or a low-bandwidth Web site.

Get Ready For ImageReady

Technically speaking, the new Photoshop isn't all Photoshop. Half of the Web-aware upgrade is attributable to ImageReady, another Adobe package used for optimizing images for online publication. But since ImageReady is no longer sold separately, and since it looks, thinks, interacts, and feels just like Photoshop, you'll hardly know when you've exited one utility and entered the other.

The key to making digital photographs easy to manipulate is automation. The routines usually involved in processing images for the Web--such as comparing image size, testing colors in an online environment, and checking load time--have been either automated or integrated into a set of easy-to-use tools.

Use the Save For Web command to compare image formats.

Save For Web

At the core of the automation process is the sweat-saving Save For Web command, under the File menu. This command lets you compress graphics into a variety of formats - up to four - and compare them side-by-side in the LiveView Panels. These panels display the file size and estimated download time and let you see your photos as they would appear in either Microsoft Internet Explorer or Netscape Navigator. Best of all, you don't have to be a graphics guru to use Save For Web. It's so automated and intuitive, you'll wonder how you ever got by without it.

Image Types

The old Photoshop was made for creating images for print, but the new supports a wide range of Web image formats. You can save pictures in PDF, PNG, JPG, and GIF. Central to saving GIF images is the Lossy command, also found in the Save For Web window. It's a supercharged reduction feature that lets you mash down a picture by ten to fifty percent without sacrificing quality. This means you can retain the nuances of your photographs while still optimizing for the Web.

Slice And Dice

Compression and optimization will help some photographs load quickly, especially large ones. Dividing an image into slices lets you optimize each slice with different settings. This ability lets you create rollover effects and helps you load big images more quickly. Previously, loading was considered an onerous task at best, but Photoshop chops big images down like a set of Ginsu knives. But wait; there's more! Photoshop not only parses large images, it also creates the requisite HTML code to reassemble the graphic seamlessly on a Web page.

To use the Slice command, first click the Jump-To button at the bottom of the toolbar to launch ImageReady, then choose the Slice tab. Your image will be divided automatically.

Web Photo Gallery

One benefit to using the Web for publishing photographs is the ability to showcase your work to a large audience. But creating an online portfolio can be difficult when you consider reducing images into quick-loading thumbnails and creating the HTML to link the thumbnails with the full-size images. Web Photo Gallery does all the dirty work for you, with just the click of a button. Go to the File menu, choose the Automate command, and select Web Photo Gallery. Direct it to your folder of images, specify where you want the gallery to be created, and presto! An HTML contact sheet with captions is created instantly, a sheet which you can use either as a portfolio or for archiving.

Before

After

The Background Eraser lets you remove defined pixels on a layer, while leaving others.

Extracting And Erasing

Another difficult task in altering a photograph is removing one section from extraneous background--for instance, isolating a single flower in a bouquet. The trick is to pull out only the flower and leave the rest, without including parts you don't want or removing parts you do. This cropping can be especially challenging if the image has soft, hard-to-define edges--say, if the flower were a carnation as opposed to being a daisy. Photoshop answers the need with three tools that facilitate the process: Magic Eraser, Background Eraser, and Extract Image.

Magic Eraser helps you delete the background area around a hard-edged object by making sections of a layer transparent. So, when you click on a layer with the Magic Eraser tool, all similar pixels are automatically erased. Double-click the Magic Eraser, grouped with Eraser, from the toolbar to display its Options palette. Then enter a tolerance value, which defines the range of colors that can be erased, and finally, specify an opacity to define the strength of the erasure. The stronger the erasure, the more the affected layer will become transparent.

Background Eraser, in the Layers palette, lets you define and remove matching pixels on a layer, while leaving others. This effectively means that you can remove the background from a picture while leaving the foreground, or vice versa. It also "decontaminates" the edge pixels, which removes the tint of background color and makes them partially transparent so you can place them on another background cleanly.

Extract Image is similar to Background Eraser, except that it completely cuts a section of a photograph out of its background. As with Background Eraser, it lets you decontaminate the edge pixels, so you can put the extracted image on a different background with no fuzz around the sides.

___________

Monique Cuvelier is a freelance writer and editor specializing in technology and business. Her book "The Web's Best Jobs Sites" is due to appear later this year. Peter Maureemootoo is a software consultant and an expert in Photoshop. They both are based outside Boston, MA.


to the previous page. 
Back to the Apogee Photo Home Page

Apogee Photo and Apogee Photo Magazine are trademarks of Apogee Photo, Inc. Copyright © 1995-2007. Apogee Photo, Inc. All Rights Reserved.

simple hit counter