When it comes to the Web, Adobe Photoshop has always been a program fraught with contradictions. It’s probably the most popular tool used by people in the Web-design and -graphics businesses, whether it’s to shape images for the Web or to sketch out a Web-site design before implementing it in HTML code. Despite all that, the flagship product of Adobe Systems (800/492-3623, https://www.adobe.com ) has never been particularly Internet-savvy–a situation that has led to the creation of a whole industry based on plug-ins and programs that perform the vital jobs that Photoshop simply doesn’t do.
But as of version 5.5, Photoshop has finally embraced the Web. Sure, this $129 upgrade for owners of Photoshop 5.0 or ImageReady 1.0 ($610 for new buyers)–which will be available by the time you read this–adds some features that will be attractive to Photoshop’s traditional-print fans (see the sidebar “Not Just for the Web”), but the bulk of the changes to the venerable image editor are meant to satisfy the long-suffering Web-graphics community.
How’d they do it? Basically, Adobe rolled in most of the features found in the Web-graphics product the company released last year–Adobe ImageReady. In a move that shows both how far Web design has come and what a misstep leaving Web features out of Photoshop proved to be, Adobe will now make ImageReady available only as part of the Photoshop 5.5 package.
A new version of this program, ImageReady 2.0, will be bundled with Photoshop. It handles higher-end tasks, such as Web animation, and other fancy techniques, such as using JavaScript rollovers and image slicing.
With Web graphics, you’ve always got to walk a tightrope between creating high-quality images and making ones that download quickly over slow modem lines. Web designers work primarily with JPEG files (for photographs) and GIF files (for text, logos, and other graphics with large blocks of solid color). Careful tweaking makes all the difference with images saved in either of these formats. The more control designers have when making trade-offs between beauty and speed, the better.
Until this newest version, Photoshop lacked that control, so most designers instead used Photoshop plug-ins, such as the $50 ProJPEG and $70 PhotoGIF from BoxTop Software (662/263-5410, https://www.boxtopsoft.com ), or programs such as ImageReady and the $199 Fireworks 2.0 from Macromedia (800/457-1774, https://www.macromedia.com ). These tools allowed designers to manipulate the file size and quality of JPEG and GIF images, with immediate visual feedback. However, none of them are able to match Photoshop’s all-powerful image-editing features. As a result, prepping graphics for the Web often involves constant switching between Photoshop and a Web-savvy application.
The biggest addition to Photoshop 5.5 is the Save For Web menu item, located on the File menu. Choosing Save For Web doesn’t bring up the usual Save dialog box; instead, a large window appears that lets you modify your image in various important ways. This won’t be exotic to anyone who has used Macromedia’s Fireworks (see the screen shots, “Separated at Birth”), which offers an almost identical interface. ImageReady 2.0 also has this feature.
JPEG MojoIn the Save For Web window, you can scale the level of quality (from 0 to 100) for files in the JPEG format. As you move the Quality slider toward 0, you’ll see the quality of your image drop–the more compressed a JPEG becomes, the more blocky image artifacts you’ll see–but in the lower left corner of the window, you’ll see its file size drop as well. By clicking on the window’s 2-Up or 4-Up tabs, which let you compare two or four versions of your image (with different JPEG and/or GIF options selected) in the same window, you can quickly compare different settings.
GIF ControlSome of Photoshop’s best new features involve perfecting GIF images. Unlike JPEG files, which use millions of colors, GIF images are limited to a palette of only 256. In order to make a GIF look good, then, you need to pick the right colors for the job. Photoshop 5.5 gives you an impressive amount of control over GIF images’ characteristics.
As in ImageReady 1.0, Photoshop’s Save For Web window lets you see and control all the colors in a GIF image’s palette. By cleverly controlling the palette of a GIF file, you can dramatically reduce the file size. The first thing Photoshop must do is take your source image and throw away all but 256 of its colors. To make this easier, the program lets you choose from a series of preset palettes, including not only a “web-safe” palette but also an Adaptive palette, optimized for the colors that appear most often in the image, and a Perceptual palette, weighted toward the colors in the image that the eye notices most.
Although choosing one of these palettes is a good shortcut to creating a fairly small, good-looking GIF file, perfectionists will want to make even more changes. After all, just because you can have as many as 256 colors doesn’t mean it’s a good idea. The fewer colors you have, the smaller the file size of the image and the shorter its downloading time.
One option in the Save For Web window helps you slim down your colors by directly controlling the number in your GIF image. We took a sample image with 204 colors and knocked it down to 64 colors. In the process, the image’s size fell from 15.3K to only 9.3K.
Palette PowerA limited color palette may make a faster-downloading image file, but it can also make a deathly boring one. One way to approximate a more expansive variety of colors is through dithering– simulating a color by placing dots of two other colors close together so that from a distance, they appear to be a third color.
Photoshop 5.5 offers three different dithering effects. It also allows you to set a dithering percentage, so you can vary the amount of dithering in your image and see how it affects image quality and file size. Although it’s nice to have these options, avoid using dithering if you can. It usually increases file size.
For the ultimate in color control, Photoshop lets you edit the GIF color palette. This is a powerful and quite useful feature, allowing you to lock colors that you don’t want to change under any circumstance (for example, the colors in a company’s logo). You can also select individual colors and shift them to their nearest Web-safe equivalent (so they won’t dither, even on a monitor that can display only 256 colors), or delete colors one by one from the palette to simplify your images and reduce their file sizes.
One InnovationThe features in the Save For Web window are new to Photoshop, but it’s only fair to point out that they’re not new altogether–most of them will be familiar to users of ImageReady or Fireworks. There is one unique feature offered for the first time in Photoshop 5.5: the lossy GIF .
Adobe’s lossy-GIF algorithm cleverly exploits the way that GIF images are compressed, by taking large areas of a single color and describing them in shorthand, rather than pixel by pixel. This lets it create a lower-quality image with a smaller file size. As you increase the lossy compression, you’ll start to see distortions, including 1-pixel-high horizontal streaks across your image, but you may not mind when you’re in a pinch.
Photoshop’s New PalArtfully exporting files in the GIF or JPEG format is far from the be-all and end-all of Web-graphics production. There are several Web-specific features of vital importance to Web-graphics professionals that don’t appear in Photoshop 5.5. Instead, those features are a part of the much improved ImageReady 2.0.
Tight IntegrationAlthough Photoshop and ImageReady are clearly meant to work together, they’ve also been developed to work successfully apart. Many users used to grumble about ImageReady’s lack of image-editing tools, such as the rubber stamp and the airbrush–features that were available in its competitor Fireworks. If you were among those people, you’ll be happy to see the program’s more comprehensive set of image-editing tools. Even though everyone who owns ImageReady 2.0 will now automatically have Photoshop too, these tools will save you from toggling back and forth between the two programs just to do minor touch-ups.
For those times when you must toggle, switching between the two applications is now a much easier task too: both fully understand the Photoshop file format, and clicking on a button at the bottom of each program’s tool palette opens the currently active document in the other program.
Slicing and DicingMost Photoshop users don’t spend a lot of time taking the images they’ve carefully created and cutting them up into little bits. Yet the practice of slicing an image is quite common on the Web, since one giant image is less efficient in table-based HTML layouts and JavaScript-laden interactive designs than the same image cut into sections.
In version 2.0, ImageReady matches the slicing versatility of Fireworks 2.0: you can select areas to be sliced up, either by dragging guides out from a ruler or by choosing the Slice tool and drawing a rectangle over a particular area. You can choose a different GIF and JPEG setting for each slice. This is particularly useful if you’ve designed a Web page as a graphic and distinct parts of it (say, the photograph in one corner and the text in the other) require different compression methods.
Simple JavaScriptYou’d think that creating graphics and wading into the world of HTML coding would be two separate jobs. But with so many of the bells and whistles on Web pages being the result of JavaScript rollovers , images that change when you move your mouse over them, it makes sense that ImageReady includes some HTML-related features.
You can still separate the jobs–a Photoshop user can create a big image or a series of sliced-up ones and send it to an HTML jockey who adds the necessary JavaScript code to make the razzle-dazzle happen. ImageReady 2.0, however, can also generate all the necessary HTML magic by itself. From within ImageReady, you can set up rollovers (even images that change in one place when you move your mouse over a different place), and the program will generate an HTML file.
This is a feature that Fireworks 2.0 offers too, and as you might expect, compatibility is an issue. Rollovers generated in ImageReady work well in Adobe GoLive, but they may not in Macromedia Dreamweaver. Rollovers from Fireworks, on the other hand, work in Macromedia Dreamweaver and GoLive if you download a template from Macromedia’s Web site that lets Fireworks export HTML in the GoLive style.
Jumping GIFsIn the past, Photoshop users had to resort to shareware programs such as Yves Piguet’s free GIFBuilder to create GIF animations, usually after painfully generating each frame within Photoshop. The arrival of ImageReady and Fireworks changed that by adding robust animation tools. ImageReady 2.0 carries on that tradition, matching Fireworks 2.0 at every step.
You can create animated GIFs by using ImageReady’s Animation palette, moving layers (or switching them on and off) to achieve animated effects. For those of us who are too lazy to move items through a series of steps to get the final animated effect we seek, there’s ImageReady’s Tween command, which uses the information in “before” and “after” frames (for example, a red ball at the bottom of the screen and at the top) to figure out and create what would come in between.
The Last WordThe arrival of Adobe Photoshop 5.5 may mark a major milestone in the world of Web graphics, or it may just be a bump in the road. After years of ignoring the Web, Photoshop has finally gotten Internet-savvy–but is it too late?
Macromedia’s competing product, Fireworks 2.0, is powerful and popular. Although its mix of drawing-program and Photoshop-like abilities makes it harder for many people to learn, it also gives the program unique strengths (see Reviews, July 1999). It’s also tightly integrated with Dreamweaver–an HTML editor that seems to have a lot of momentum, at least for now. On the other hand, if Photoshop and ImageReady can provide most of Fireworks’ features in one package with one price tag, Adobe may have a major advantage.
Regardless of who wins this battle, one fact can’t be denied: Web pros who use Photoshop finally won’t have to pay extra to get the basic tools they need. It’s been a long time coming, but Photoshop has finally embraced the Web.
| See the sidebar “Quick-‘n’-Easier Masking” |
October 1999 page: 74
Quick-‘n’-Easier MaskingWhether you’re working on images destined for the Web or for print, selecting exactly what you want is never easy. Fortunately, Photoshop 5.5 offers tools that at least make it easier . One of these is the new Extract feature. What makes Extract truly special is that it performs color decontamination (removes the strange halo) along the edge of your selection. This is important because the success of any selection is based entirely on the transition between what is selected and what is not. A lousy transition means that you get some of the original background along with the object you actually want. This line along the edge of an object is a dead giveaway it came from somewhere else.
Note that the Extract feature doesn’t make a mask. Rather, because it needs to remove the background color from edge pixels, it actually deletes the background. This is unfortunate because using Extract rarely results in a perfect selection and you’ll need to do some fine-tuning. For this reason, it’s a good idea to duplicate your layer before using Extract. Again, no one ever said it was going to be easy. Just easier.–DAVID BLATNER
1. When you select Extract from the Image menu, the Extract dialog box appears, containing a proxy of your image that you can work on.
2. Use the brush tool to paint along the edge of the object you’re trying to select. The default color of this “paint” is green, but you can change it to red or blue if your image has a lot of green in it. If you make a mistake, you can erase some of the “paint” with the eraser tool.
3. After specifying the edge of the selection, click on the object with the paint bucket tool. This tells Photoshop which side of the green line is the inside–the object itself.
4. Click on Preview to see the extracted object on top of a transparent background. If you like what you see, click on OK. If not, you can make further adjustments to your edge with the brush tool or adjust other settings in the dialog box and preview the extraction again.
Voilà! In the end, you’ll get noticeably better results with less effort. Traditional selection methods, such as using the magic wand, can pick up edge spill and often result in a sharper, less realistic edge (see the example at right). The Extract feature removes the background color from edge pixels, leaving a semitransparent edge, which makes the foreground object blend more smoothly into whatever new background you choose.
Although the Web publishers of the world have reason to rejoice at the release of Photoshop 5.5, the rest of us–the mere mortals who still have to make a living based on print publishing–can quietly cheer at several features in this upgrade that may make our days easier too.
Carefree CompositingIf you do any photocompositing (cutting an image out and putting it into another), your nemesis is most likely edge spill , where the background of the original image appears as a gritty halo around the composited graphic. Now to the rescue come the new Extract feature and the Background Eraser tool. Both erase pixels relatively intelligently, but, more important, both perform edge-color decontamination–they carefully remove the background color from pixels at the cut-out object’s edge.
Where the Extract feature deletes the background color all at once (see the sidebar “Quick-‘n’-Easier Masking”), the Background Eraser tool lets you paint away (or erase) the background in a smooth, intelligent way until it becomes transparent. Unfortunately, neither tool works particularly well with really tricky images that contain, for example, breezy blond hair against a sunny golden beach.
Another compositing tool, the magic eraser, gets essentially the same results as using the paint bucket tool with a “clear” fill instead of a color. However, it’s too blunt an instrument to be particularly helpful for anything but very rough, first-draft work.
Ultimately, although these new features are powerful, they don’t obviate the need for additional masking plug-ins, available from companies such as Ultimatte, Extensis, and Human Software. These still offer features above and beyond Photoshop’s, including help in building clipping paths.
Better TextAdobe blundered with its type control in Photoshop 5.0, especially in the rasterizing of small text (which looked terrible). Several features in version 5.5 help fix these problems. Three levels of antialiasing and the option of using fractional widths (most letters aren’t an even number of pixels wide) help you set good-looking type at all sizes. Less exciting, but still useful, is the ability to fake bold, underlined, and italic text. Note that if you don’t upgrade, Photoshop 5.0 will be able to read type layers that are created in version 5.5 but will ignore all of the new features.
Simple PleasuresSometimes it’s the simple things that are most likely to get an “ooh-aah” response. And this may be the case for you when you open the Automate submenu (under the File menu) and see the new macros contained therein. Picture Package is a boon to any photographer tired of duplicating, rotating, and scaling photos in order to fit several versions of the same picture onto one sheet of film (for instance, when you’re creating school photos, where you want a certain number to be wallet-size, and so on).
Similarly, the Contact Sheet feature–which gangs up thumbnail images on a page–contains new options, such as the ability to add file names under a thumbnail and include all the images in nested folders.
If you’re not the type to muck about with HTML code and need to get photos on the Web quickly, you’ll also appreciate the Web Gallery feature. Select a folder of photos, and Photoshop will automatically convert them to the JPEG file format and generate HTML pages with links between these images and small thumbnail versions of them that it also creates.
One-Minute MonetIn a nod toward fine artists, Adobe has included the Art History Brush, which lets you create various impressionistic effects simply by brushing it over your images. Unfortunately, the artsy options–with names such as Tight Short, Dab, and Loose Curl–are a far cry from what you can create in MetaCreations’ Painter. With luck, future versions of Photoshop will expand on this tool.
Clearly, the majority of features in this upgrade are oriented toward Web professionals. But there are a few gems that might be just enough to tempt the rest of us to upgrade too.–DAVID BLATNER