12 Replies Latest reply on Dec 29, 2010 7:51 PM by captkirksc

    Rollovers in CS5


      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?

        • 1. Re: Rollovers in CS5
          [scott] Level 6

          Fireworks is now the application to use.


          For some reason Adobe felt it necessary to remove all web content panels and functionality from Photoshop... which, in my opinion, was a mistake.

          • 2. Re: Rollovers in CS5
            enjay43 Level 1

            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....

            • 3. Re: Rollovers in CS5
              Jeffrey Tranberry Adobe Employee

              Layer Comps is essentially the exact same mechanism used in ImageReady to store rollover states.

              • 4. Re: Rollovers in CS5
                [scott] Level 6

                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.

                • 5. Re: Rollovers in CS5
                  Jeffrey Tranberry Adobe Employee



                  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.

                  1 person found this helpful
                  • 6. Re: Rollovers in CS5
                    [scott] Level 6

                    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.

                    • 7. Re: Rollovers in CS5
                      Jeffrey Tranberry Adobe Employee



                      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.

                      • 8. Re: Rollovers in CS5
                        enjay43 Level 1

                        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...

                        • 9. Re: Rollovers in CS5

                          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?

                          • 10. Re: Rollovers in CS5
                            [scott] Level 6

                            Modern rollovers are using CSS to control background images. The days of the Dreamweaver javascript functions are long gone - although DW may still generate that code - I can't say. Although I own it, I do not use DW for anything. As far as I'ma ware, no Adobe app generates proper CSS for rollover images. I could absolutely be wrong there though. I have never relied on Adobe HTML or CSS output from anything.

                            • 11. Re: Rollovers in CS5
                              Nini Tjader Level 4

                              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).

                              • 12. Re: Rollovers in CS5
                                captkirksc Level 1

                                I am always glad to be educated and will only say that the arguments I have seen for using CSS and background images rather that javascript are weak. Most sites (including the Apple site which seems to be cited often regarding CSS rollovers), include extensive javascript elements. Preloading images is a trivial task. The javascript anchor code I use will still function as navigation even if javascript is not enabled. It seems to me that someone has figured out how to use CSS for a common web page function that javascript does quite well, and that the designers of CSS have failed to address. I try to use CSS whenever possible, but sometimes it just doesn't work to achieve a layout. To get back on topic, after looking at the documentation for Fireworks, I still don't think that Adobe has done a very good job of integration with Photoshop as was done with Imageready.