4 Replies Latest reply on Oct 26, 2012 11:57 AM by Bob Pierce

    Order of web layers for sprite sheets

    Bob Pierce Level 1

      After many years ignoring it I've recently discovered how useful FW is! I've found a niggling irritation though which may have a simple solution I've overlooked. When I add a new slice to a file which generates a sprite sheet, FW adds the new web layer to the top of the layer list rather than the bottom. Exporting to CSS sprites in either vertical or horizontal format, FW adds the slices to the sprite sheet in that the same order - new slice first. The result is that every new item added to the sprite sheet moves all previous items to a new position and hence changes their CSS positioning values. My solution is to manually reverse the web layer order every time I add slices. Is there a better way?

        • 1. Re: Order of web layers for sprite sheets
          groove25 Level 4

          You make an interesting point. The order in which slices are added to the CSS sprite sheet (newest at the start) seems to be at odds with being able to update the sprite sheet quickly and simply—without rewriting your pre-existing CSS.


          However, it sounds like you're using the right approach! Is this mostly an issue where you need to remember to reorder a few items within the Layers panel, or is it something more significant?


          (If you're not already doing so, you might consider naming your slices in the Properties panel, to keep the slice names consistent from one update to another.)


          I'm not sure how common this problem is. The system currently in place does seem fairly intuitive, with items at the top of the Web Layer being the first to appear in the sprite sheet. And I imagine that some care must always be taken to check the order of slices in order to obtain the desired sprite output.


          With your concern in mind, I think the Fireworks development team could *possibly* improve upon the current system by adding a "reverse" option within the CSS Sprites export Options dialog. This could either be an option that might appear checked by default (e.g. "Reverse slice order") or additional choices within the Layout menu (e.g., Horizontal, Horizontal-reverse, Vertical, Vertical-reverse, Grid). These new options, if used consistently, might make it easier to update a CSS Sprite sheet graphic without having to either manually adjust the order of slices within the Layers panel or update the CSS for previously created/exported slices.


          You can always submit feature requests to Adobe using their official submission form:



          • 2. Re: Order of web layers for sprite sheets
            Bob Pierce Level 1

            Thanks for that - so I'm not missing anything! It's no big deal but, as you say, it seems at odds with the aim of streamlining the CSS aspect. I agree that it seems appropriate for the CSS to follow the web layer order hence I'd like to see new slices added to the bottom of the web layers. This wouldn't be unreasonable as there's no correspondence between the ordering of web layers and image layers. However, I guess this would be too disruptive a change so your idea of a Horizontal - reverse option seems a good one. Meanwhile I'll continue to drag each new web layer to the bottom of the list!

            • 3. Re: Order of web layers for sprite sheets
              groove25 Level 4

              Another tack you could take with this is to keep the CSS rules for the sprites in their own section of your style sheet. This way, it would be a simple copy-and-paste to update all the rules at once.


              Apparently, Illustrator has a Draw Behind mode, which would be just what you're looking for in this case:


              http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-62cea .html


              This would make an appropriate addition to Fireworks (or any graphics application, really) for those cases when a user wishes to create a top-to-bottom, left-to-right type of graphic that doesn't require a lot of actual stacking of objects.

              • 4. Re: Order of web layers for sprite sheets
                Bob Pierce Level 1

                I think that misses the point, if your reversed option was available then there would be no need to edit the existing CSS, only to add a style for the new sprite. As it stands I get the same result by moving new slices to the bottom of the list. I can live with that for now! I have made the feature request so let's see what happens.