Skip navigation
Bob Pierce
Currently Being Moderated

Order of web layers for sprite sheets

Oct 25, 2012 8:10 AM

Tags: #fireworks #cs6 #slices

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?

  • Currently Being Moderated
    Oct 25, 2012 9:02 PM   in reply to Bob Pierce

    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:


    Mark as:
  • Currently Being Moderated
    Oct 26, 2012 11:16 AM   in reply to Bob Pierce

    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:



    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.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points