7 Replies Latest reply on Dec 17, 2010 10:34 AM by RandyWAM

    Photoshop Slices in Fireworks ?

    RandyWAM

      About 10 years ago we used Fireworks as our primary prototyping tool but stopped using it in favor of  a simple static screen presentation approach.

       

      We would now like to start using it again for prototyping but have run into a workflow glitch that we can not get around.

       


      First, here is our workflow (skip to the bottom for the question):

       

      1. We layout the design of the page in Photoshop.

       

      2. We slice it up in Photoshop. Slices can be for a piece of Flash animation, rollover buttons, nav bars, etc.

       

      We want to do the slicing in Photoshop rather than in Fireworks so we have just ONE master art file with all the slicing architecture in it as well as all the master static art. That way when we get feedback from the prototype presentation we can edit the Photoshop file and it's slices in just one app (simpler, faster).

       

      3. We them import the Photoshop master into Fireworks to add the behaviors  for the rollover buttons, nav bar rollover states, etc.

       

      4. We then export the HTML and open it in Dreamweaver and add flash animation bits, a background image and then publish it to our server for presentation on the web.

       

       

       


      OK so now the problem (bonehead I am sure but we are stumped):

       

      The slices we made in the Photoshop file do not behave the same as slices that are made within Fireworks.

       

      ALL the slice we created in Photoshop come into Fireworks with a "onMouseOver /  Set Text of Status Bar" behavior. If we try to set a simple swap image behavior to a single button slice for example it links that action to ALL of the slices (i.e. rollover a single button and all the slices swap out the image in state 2. What we want is the image to swap out for the slice that is rolled over  ONLY. ).

       

      Selecting the slice/s and removing the behavior with the  "Delete all Behaviors"  option and than placing a different behavior on the slice produces the same result (all the slices in the file get the rollover action).

       

      We can only get this to work if we create the all slices in Fireworks rather than in Photoshop. So is this normal behavior? Are we missing something here?

       

      thanks

        • 1. Re: Photoshop Slices in Fireworks ?
          Jim_Babbage Level 4

          Sorry, but I have to ask: with all the new features in Fireworks, like pages and master pages, I'm at a bit of a loss as to why you don't just switch over to using it for the comping process. Are you using features in Photoshop that just aren't available in FW?

           

          Keep in mind that FW works with STATES to handle rollover effects. It does not use layer visibilty like PS does. That could be where the main problem lies. In FW, you would need to move your rollovers to a second (or more) state. Then the interactivity you added in the slices might work. That said, I don't know how much slice information comes across when you open a PSD in FW. I think it may only be the slice dimensions and maybe the name.

           

          Moving your rollover layers to states in FW won't be difficult, but it could be tedious, depending on how many you have. Ease will also depend on how your layers are structured.

           

          HTH

          • 2. Re: Photoshop Slices in Fireworks ?
            Michel Bozgounov Level 2

            1+ to what Jim said, all good points!

             

            Fireworks CS5, with its Pages/Layers/States options (incl. Master page option) is much better suited for the job. You can add interactivity using States and then you can can create a dynamic, clickable prototype (HTML/CSS/Images) in no time!

             

            If your type of work allows it, then better switch to Fw for these features; use Ps for complicated artwork, but then just import the graphics into Fireworks -- later, this will save you a lot of time and effort!

             

            There are a lot of good tutorials on the subject... if you need any help in finding the right ones, we're here to help!

            • 3. Re: Photoshop Slices in Fireworks ?
              RandyWAM Level 1

              Thanks guys for taking the time.

               

              It is likely that I am not explaining this well enough because what we need to know  is really quite simple. Or probably I'm just to old to learn new tricks but….

               

              We do in fact use just Fireworks to prototype simpler jobs or on wireframe presentations and it works just great for that.

               

              But for final, tight, rich Website presentations Fireworks is far to graphically and mechanically limiting as compared to Photoshop.

               

              In our workflow if a tight, rich prototype presentation is approved for production we actually release the PSD for coding and refer the developer to the prototype so they know the functionality we are after.  Working this way we do not need to redo steps after approval and there is only one master PSD file and it has all the needed graphic, typographic, dimensional, color and structural information intact and it is fully editable and even scalable.

               

              Moreover, the developer then has a completely editable / scaleable / harvestable  PDS master file to work with (a very valuable tool because it not only has the needed art but also all the type styles, fonts, colors, dimensions, over states, etc. all harvestable and editable directly from the PSD file.

               

              Fireworks is only used to quickly add simple functionality for approval and reference. So once the look is approved the Fireworks file is no longer needed or used because it now lack some of the edibility / harvestability that the original PSD had before import.

               


              Finally, most every developer we work with wants PSD files to code from and will not accept Fireworks PNG files. Translating the Fireworks file back to a PSD file simple adds another step to the workflow and since some of the edibility / harvestability of the original PSD file is lost during the transfer to Fireworks a client change would requires us to go two steps back and then two steps forward to insure that a master, editable PDS file exists.

               

               

              Anyway … We assume from your response that the answer to our original question is yes this is normal behavior when importing a PSD with slices into Fireworks. Sad. We were so close. We can work around it by not slicing the PSD and using the PSD's guides to slice to in Fireworks but hate the extra steps.

               

              Thanks again for you help.
              • 4. Re: Photoshop Slices in Fireworks ?
                Michel Bozgounov Level 2

                "We assume from your response that the answer to our original  question is yes this is normal behavior when importing a PSD with slices  into Fireworks. Sad."

                 

                I am not sure about that...

                 

                Perhaps another Fireworks guru can chime in and help better than me!

                 

                And yes, it's true, most Web designers work with .psd files, not .fw.png files -- but designing for the Web is so much easier with Fireworks... Let's hope one day Fw PNGs will be also a common file format, like Ps PSDs!

                • 5. Re: Photoshop Slices in Fireworks ?
                  Jim_Babbage Level 4

                  It seems like your situation requires you to work with a PSD file, so the switch in workflow is not practical for you. For the general information of all, though, I'd like to touch on a couple points you made:

                   

                   

                  >>But for final, tight, rich Website presentations Fireworks is far  to graphically and mechanically limiting as compared to Photoshop.<<

                   

                  I can understnd this from the perspective of fewer bitmap capabilities. Not sure what is meant by "mechanical" as FW is far more suited to web optimization and output than PS is.

                   

                  >>In  our workflow if a tight, rich prototype presentation is approved for  production we actually release the PSD for coding and refer the  developer to the prototype so they know the functionality we are after.   Working this way we do not need to redo steps after approval and there  is only one master PSD file and it has all the needed graphic,  typographic, dimensional, color and structural information intact and it  is fully editable and even scalable.<<

                   

                  Fireworks offers the same feature set here and is perhaps even more flexible in certain areas, being primarily a vector application rather than bitmap one. Unless flattened, everything in a Fireworks document is editable and may indeed be more pixel accurate than PS. If the design is made in Fireworks (and I may be missing the context here), there would be no need to "redo" steps. It would just be like editing the PSD file, only there'd be no need of taking the extra steps to port it over to Fireworks.

                   

                  >>Moreover, the  developer then has a completely editable / scaleable / harvestable  PSD  master file to work with (a very valuable tool because it not only has  the needed art but also all the type styles, fonts, colors, dimensions,  over states, etc. all harvestable and editable directly from the PSD  file.<<

                   

                  As mentioned above, Fireworks retains all this information as well, including proper states, and it's all editible within the Fireworks PNG file. One of the frustrating experiences I've had in receiving PSD layouts is that far too often elements which should have been made (or retained) as vectors, have been flattened into bitmaps by the PS designer. In some cases, the number of bitmap layers used in a PSD design for something like a button, have made the object cumbersome to deal with. Whereas in Fireworks I was able to recreate the same button as a scaleable vector object and use Live Filters to match the look and feel of a multi-layered series of bitmap objects. In one layer, as one object.

                   

                  But maybe I've just had bad luck, in that area.

                   

                  The point I'm trying to make here is a workflow one. Your workflow - out of necessity or preference - puts FW at the end of the process, where it is used primarily to cut up the final design - sort of where ImageReady would have taken over. Not a criticism; just an observation. You've done a great job of explaining why you use this workflow. It works for you and that is what is really important.

                   

                  But for those new to Fireworks, bear in mind it has features and solutions that allow it to be a major part of the design process well before this stage. If there is no need to return to the PSD - or if an interactive mutli-page prorotype is needed, Fireworks could be the beginning of the process. The integration between FW and PS gets a little better in each version, so there's even the chance that saving out as a PSD from FIreworks may be useful for some designers. Sadly, where things fall apart at the moment is FW's lack of support for features such as Adjustment Layers. If Adjustment Layers are used in a PSD file, they get flattened into the final object in Fireworks, making a return to PS mandatory for edits. In general though, vector and bitmap support has improved greatly from the Macromedia days.

                   

                  As Michel said, perhaps there is another FW guru out there who can help with the slice issue. And if not, we can always hope for better support in the future. Be sure to make this request on the wishlist, too. That way, it's officially recorded for the team.

                  • 6. Re: Photoshop Slices in Fireworks ?
                    JoeDaSilva Level 4

                    I've heard of more and more agencies switching over to Fireworks for UX design from Photoshop as of late.

                     

                    Everything in my personal portfolio was done in Fireworks: http://joedasilva.com/mywork

                     

                    I've never felt very limited to say the least.

                    • 7. Re: Photoshop Slices in Fireworks ?
                      RandyWAM Level 1

                      lmao…….  OK, we got it to work.

                       

                      Here is the trick that made imported PS slices behave correctly once in FW (for us anyway).

                       

                      1. Open the PSD file that has been sliced with Photoshop in Fireworks.
                      2. Immediately save the document in Fireworks as a native fireworks PNG file.
                      3. Now close this Fireworks file and then reopen it again in Fireworks
                      4. Presto . . .  the slices will now accept other behaviors.

                       


                      NOTE: This may just be an anomaly with our CS5 Fireworks so your results may vary….

                       

                      Thanks for all the advice….