I used to create Rollover images very simply with Photoshop and Imageready, before i upgraded from CS. Now that I've bumped myself up to CS5, what tools can I use in Lieu? In the past I have created a nav bar in photoshop, created layer-based slices and then used layer visibility to create the "states" such as "up" "over" etc. Is there an easy way to do this using Photoshop alone or in conjunction with Fireworks and/or Dreamweaver? These are not separate buttons, which would obviously be a little easier, they are basically text in a nav bar. Any ideas?
I agree that is seems to have been a mistake on Adobe's part, and I was assuming that I would have to do it in Fireworks, but have been unable to make heads or tails of that program. Any good resources you can point me to? I don't want to become a "Fireworks Ninja" so to speak, just trying to learn the basics, and the built in help....
I would argue that point, Jeffrey. With the Web Content panel in Imageready all states of a button were saved in one fells swoop, as well as the ability to preview the rollovers. Those functions are completely gone in Photoshop now and the Layer Comp panel won't substitute anything for those function. The automation, which made Photoshop such a great tool for rollovers, has been completely stripped from all recent versions.
With CS or CS2, I could set the save for web preferences, then easily create a single image with one layer and three states. Assign visibility for states then Save For Web a single time (2 clicks total) and get three files.
Now, I must save, alter visibility, save, alter visibility, save (totaling no less than 8 clicks) to end with the same resulting files.
If I needed to, say alter text on a button, one change and one save got me all new images for each state. Now.. three changes (one for each Layer comp) and 3 saves at a minimum are needed. So, in essence, all work was tripled. You may think the Layer Comps to Files script in Photoshop would work for exporting all the images at one time. It doesn't. A 100x100px image exported via the Layer Comps to Files script generates, on average a 40k jpg file (gif is not an option). A 100x100px jpg image saved via Save for Web results in roughly a 1.6k file. There is a huge difference there.
This, combined with the lack of animated gif support, made and make CS4 and CS5 a major step backwards in terms of web production via Photoshop. Two simple features that reduced web production time by 20% or more... Despite Adobe's stance on the issue, it was the first time I've seen a huge step backwards in terms of workflow. I have yet to hear a valid reason why these functions were removed. I can only assume Adobe wants/wanted to sell more copies of Fireworks.
Sorry, I wasn't saying that the Layer Comps panel worked exactly the same to 'create and manage' rollovers, but technically it is the same mechanism to 'store' the states of the document.
You're right, I wouldn't use Layer Comps to Files Script to export the images (is uses the internal JPEG file format plug-in which includes file icon previews and 100% of the metadata - that's why the files are bigger). I'd use Save For Web and save out the 'normal' and the 'over' layer comps to get the smallest files.
It would help to have a way to unify states across comps and better automate saving out comps - and perhaps that's something we could add to aid the generate state based documents. Users by and large told that they didn't use the code IR generated, only the images.
That's correct, Jeff. The IR HTML was junk and I never used it and advised others to throw it away. What I would do is dump all the output except the images folder... that images folder was a fantastic timesaver. Where IR shined was multiple images saved for web via states in one fell swoop. States allowed one edit to be seen across all states. I obviously don't know all the under-the-hood workings, I just know Layer comps are close, but not quite there when compared to the IR states. Things like layer color or object size can't be altered across Layer Comps for the the same layer. States allowed those types of changes. (unfortunately, the animation panel doesn't allow size and color changes across frames either)
All I really would like to see return is the Web Content panel from IR. No image maps, no HTML output, none of that. In fact, if the Layer Comp panel were simply beefed up to add the states options and when Save for Web was invoked there was an option to save all states from the layer comp, that would do it.
In fact... the ability to save multiple layer comps as individual files in the Save For Web dialog would do it as well. Looking at Illustrator... Save For Web there needs the ability to choose which artboard (or multiple artboards) to save in the Save for Web dialog. So, maybe the issue is more a need to improve the Save For Web dialog across Adobe apps rather than focus on internal application features.
That and the the ability to open an animated GIF and maintain both frames and transparency would bring CS6+ back to where CS2 was in terms of speeding workflow.
Sorry for bending your ear I just really miss these two items.
That's great feedback, thanks. I tend to agree with beefing up comps in general, tweaking S4W to put them up to the task, and avoid the rats nest of trying to produce code. That would keep Photoshop lean, and get a more general state based model in place.
I'd like to thank you both for your input. Using the info I gleaned from your discussion, and a few hours of messing around, I finally got it: a true nav bar with rollovers, and even "over" and "down" states. I must say: the process was not as straight forward as when I used to do it with IR, but FW does have definite advantages and once I figured out "layers" vs "states" it was much easier. Now all I've got to do is figure out why Dreamweaver is not processing the exported HTML correctly...
I too just upgraded from CS2 to CS5 and I find it amazing that the integration between Photoshop and ImageReady (or another similar program) is no longer available. Luckily I still have a machine with CS2 still installed so I can generate rollover images with some degree of automation. To me, Dreamweaver is overkill for just generating rollover code. I suppose Adobe wants us to use Flash for rollovers. I am really disappointed not to see this functionality in CS5.
Is there a new more functional and standards-compliant rollover code to use?
Rollovers are best done with CSS in DreamWeaver and not in a graphics application. Flash is not an option if you want them to work on an iPad or in an iPhone. CSS is the way to go and for that you need a proper html editor. (You can create them in Adobe Fireworks too, which is what replaced Image Ready when Adobe aquired it with Macromedia. Image Ready was long ago discontinued. But CSS created or spry-menus in DreamWeaver is much to be preferred).