The Animation palette feels right at home in Photoshop.

With Adobe’s release of the CS3 lineup came the abrupt loss of ImageReady, possibly leaving you feeling a bit jilted. Prior to CS3, ImageReady came bundled with Photoshop, and contained loads of Web-focused graphics tools for creating animated GIFs, rollovers, image maps, and more.

Photoshop CS3 has taken on some of the duties of ImageReady, but Adobe hopes you’ll pick up Fireworks to handle major Web graphics creation. Fireworks is truly the best program out there for the job, but if you just shelled out a lot of cash for Photoshop you may be better off finding some workarounds for now.

Let’s take a look at where to find some of the main ImageReady tasks in Photoshop, and which ones you should stop looking for because they’re just not there.

First off, animation. Photoshop CS3 now contains ImageReady’s old Animation palette in Window > Animation. This palette and the layers associated with it function exactly the same way as the program you knew and loved. To optimize your animation, there’s no Optimize palette, but File > Save for Web & Devices does the job just fine. You’ll find playback and looping features in the lower right of the Save for Web dialog, so you can see how your animation looks with your GIF settings applied. When it comes to animation, I’m actually glad to see the tools integrated in Photoshop. Fireworks has excellent animation features, but if I’m working on my graphics in Photoshop, I like to stay there.

Speaking of animation, here’s something that bugs me and currently has no Photoshop solution: you cannot open an existing animated GIF in Photoshop and see its frames in the Animation palette like you could in ImageReady. For that, you must have the original PSD. The workaround solution? 1) Never, ever just save the GIF and not the PSD, 2) If you have to open an animated GIF, open ImageReady (because, in theory, you never got rid of it on your computer when you upgraded to CS3). 3) Do what Adobe would prefer, and pick up Fireworks. Personally, I have Fireworks, but I still opt for opening ImageReady in this case.

Wondering about Flash animation? ImageReady allowed you to export Flash SWF movies, but you won’t find this in Photoshop CS3 – you’ll need Fireworks or Flash for that.

Next up: image slices. Designers often slice large images into lots of pieces in order to optimize different areas separately, and to decrease users’ perceived load time. The Slice tool and Slice Select tool were available in Photoshop prior to CS3, but, if you’re like me, you never used them there and aren’t aware of how they work differently from ImageReady. In ImageReady, you’d slice and select, then refer to the Slice palette to create your settings for each slice – for example, file name, background color, or alignment. In Photoshop, there is no Slice palette, so to access slice settings you’ll need to double click a slice with the Slice Select tool. Unfortunately, the settings are minimal, unlike ImageReady’s, so you may need to do more tweaking to your HTML after you export the slices. Slice optimization and export is handled easily in the Save for Web dialog, however. And, of course, for added slicing features, you’ll need Fireworks.

Slicing doesn’t have as many options in Photoshop, but it’s just as easy to accomplish.

How about rollovers? Wow, are former ImageReady users livid about this one! ImageReady offered the Web Content palette that allowed you to create rollover graphics including all of the associated JavaScript code. Even though this can easily be done using individual graphics and some code work (hand coding, Dreamweaver, or another option), ImageReady users preferred the ability to create all of the rollover images within a single PSD file for easy editing, and just export the images and code all at once. There is no Photoshop alternative for this functionality, so you’ll need to go ahead and export individual graphics and apply the code yourself when you build the Web page. Are you waiting for me to say, “Don’t worry, you can just get Fireworks”? Well, Fireworks does have great rollover creation and export features, but believe it or not it doesn’t include as many rollover states as ImageReady (but it does have the main ones, so you’ll be okay here in most cases).

Image maps? Sorry, this is another one you’ll need to head to Dreamweaver or Fireworks for, or just pop open your old ImageReady application. Though, if you don’t mind using slices, you could skip the image maps, create a slice of the hotspot you want, and link it in the slice options.

A final note: You can still use ImageReady CS2 even while Photoshop CS3 is open, but you can’t jump your PSDs to ImageReady the way you used to in CS2. You’ll need to save your PSDs and open them manually in ImageReady – but that’s a small price to pay in order to reclaim what was lost in the upgrade to CS3 if you’re not ready to make the move to Fireworks.

Read more of Tara’s CS3 posts…

This entry was posted on Friday, June 29th, 2007 at 12:21 pm and is filed under Design, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.