Photoshop 5.5

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 Web-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 (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 upgrade adds some features that will be attractive to Photoshop's traditional-print fans 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 mis-step leaving Web features out of Photoshop proved to be, Adobe has now made ImageReady available only as part of the Photoshop 5.5 package. A new version, ImageReady 2.0, is bundled with Photoshop. It handles higher-end tasks, such as Web animation, and other fancy techniques, such as using JavaScript rollovers and image slicing. Window to the Web
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 colour). 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 £30 ProJPEG and £45 PhotoGIF from BoxTop Software ( www.boxtopsoft.com), or programs such as ImageReady and Fireworks 2.0 from Macromedia (£139; Software Warehouse, 0800 0355 355). 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 dialogue 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 mojo In 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 control Some of Photoshop's best new features involve perfecting GIF images. Unlike JPEG files, which use millions of colours, 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 colours 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 colours 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 colours. To make this easier, the program lets you choose from a series of pre-set palettes, including not only a "Web-safe" palette but also an Adaptive palette, optimized for the colours that appear most often in the image, and a Perceptual palette, weighted toward the colours 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 colours doesn't mean it's a good idea. The fewer colours 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 colours by directly controlling the number in your GIF image. We took a sample image with 204 colours and knocked it down to 64 colours. In the process, the image's size fell from 15.3K to only 9.3K. Palette power A limited colour 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 colours is through dithering - simulating a colour by placing dots of two other colours close together so that from a distance, they appear to be a third colour. 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 colour control, Photoshop lets you edit the GIF colour palette. This is a powerful and quite useful feature, allowing you to lock colours that you don't want to change under any circumstance (for example, the colours in a company's logo). You can also select individual colours and shift them to their nearest Web-safe equivalent (so they won't dither, even on a monitor that can display only 256 colours), or delete colours one by one from the palette to simplify your images and reduce their file sizes. One innovation The 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 colour 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 pal
Artfully 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 integration Although 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. 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 dicing Most 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 JavaScript You'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. Fireworks 2.0 offers this feature too, and as you might expect, compatibility is an issue. Rollovers generated in ImageReady work well in Adobe GoLive, but may not in Macromedia Dreamweaver. Rollovers from Fireworks, on the other hand, work in Macromedia Dreamweaver and GoLive if you download a template from www.macromedia.com that lets Fireworks export HTML in GoLive style. Jumping GIFs In 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 uPhotoshop 5.5sing 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.

OUR VERDICT

After years of ignoring the Web, Photoshop is finally 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. 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.

Find the best price