6 Replies Latest reply on Jul 11, 2010 10:05 AM by pixlor

    Why slicing?

    phyllisj9 Level 2

      Okay I'm new, so I'm probably asking something that's been talked to death already, but I'll post anyway.

       

      I'm taking a class in Fireworks.  My current project is to design a mockup and then slice it up and save it as HTML + sliced images.  Great.  Can do.  Have learned this much already.  (Well, there are a few parts that confuse me, but I have the general idea.)

       

      What I want to know is:  What do most people do with the slicing?  Are you using it just to save lots of images at Web resolution (if so, why not just use the Export Area tool?).  Are you slicing the entire page and then placing it in Dreamweaver (tried that, would be fantastic if I were going to make table-based layouts, but I'm planning on CSS -- tried CSS export and I've never seen such a mess when I opened in Dreamweaver).

       

      Do you use Fireworks mainly just as a mockup guide before starting creation in Dreamweaver or HTML?  Or do you make extensive use of the slicing to build much of the layout in advance?

       

      I'm guessing slicing is mostly just to do the images all at once, but I'm really not sure.  In the past, I've done my Web site mockup in InDesign (weird I know -- Photoshop's too slow for me) and then just looked at the page while rebuilding in Dreamweaver or HTML.  Fireworks seems much better for the mockup (and for saving out all the pieces).  I'm just trying to figure out if it's in my interest to be using it more extensively in the proecess than that.

       

      Probably wholly subjective.    Just looking for advice and trying to wrap my brain around exactly how Fireworks fits into the whole thing.

       

      Thanks, Phyllis

        • 1. Re: Why slicing?
          Jim_Babbage Level 4

          The workflow you described is what I use for creating interactive prototypes. Basically the entire page gets sliced up into graphics, so you can demonstrate rollovers and page design to the client. I generally don't worry too much about detailed optimization at this point. In most cases I'll just make sure each slice is a suitable image format and not get too picky about compression.

           

          When it comes to actual production, the only slices I use are for the parts needed for my CSS layout: background images, inline images, etc. So my final export for the actual page will include far fewer slices. This is when I DO get picky about optimization, making sure my files are the smallest they can be while still maintaining acceptable image quality.

           

          Then - generally - I build my final web pages in Dreamweaver.

           

          The Export area tool is great, but you have to export your graphics one at a time. Slicing means I can set optimization and then export all the slices at once.

           

          Export area doesn't take into account other states in the design, either.

           

          HTH

           

           

          Jim Babbage

          • 2. Re: Why slicing?
            phyllisj9 Level 2

            Thanks, that makes good sense to me.

             

            It sure will save me a lot of time as I usually waited until the end to put together the graphics (so I wouldn't have to keep resizing everything).  I didn't even consider the fact that you can show the rollover effects in the mockup -- that's awesome!   I think my class lecture confused me since it talked about dividing up the entire page into slices, but I don't think that would actually be useful for what I'm doing.  Probably they're just going over all the possibilities though.

             

            Thanks, Phyllis

            • 3. Re: Why slicing?
              phyllisj9 Level 2

              Okay, I just reread your post.  I think I get it a little better.  Slice the entire page for a prototype, then just the necessary images when ready to build the final?  And I guess if there was nothing interactive I wouldn't need to slice anything at all (just make one big image) for the prototype.  (I'm using "prototype" to mean "mockup" -- do I have my vocabulary correct here?)

               

              I notice that if I slice a section and indicate that it's HTML, it empties out the text.  So I'm guessing that for a prototype I'd just leave everything (including the text) sliced as an image?  And not bother with an HTML slice at all (unless for some reason I decided an ultra-fast tabled Web page was necessary)?  And for that matter, does it really matter (for a prototype) whether it's listed as a foreground or background image?

               

              Thanks for all the information!

               

              Phyllis

              • 4. Re: Why slicing?
                Jim_Babbage Level 4

                Well if you're building a web site prototype, chances are there will be interactive elements, be they rollovers or links to other pages in the mockup.

                 

                The HTML slice is a special slice that allows you to actually write HTML code for the contents of that area of the exported mockup.

                 

                David Hogue and Mariano Ferrario have an excellent article on how and why to use this slice, available in the Fireworks Dev Center, but you may want to wait a bit before digging into it. Get comfy with the basics first.

                 

                 

                 

                 

                Jim Babbage

                • 5. Re: Why slicing?
                  phyllisj9 Level 2

                  Thanks!  :-)  I'll stick with images for now, check out the HTML bit later.  :-)

                   

                  Phyllis

                  • 6. Re: Why slicing?
                    pixlor Level 4

                    Another reason for slicing is that you can set the parameters for each slice independently. Then, if you change the content (color or whatnot) you can just export a slice without optimizing again. I'll often have a mix of PNG24, PNG8 (for transparency), and JPG slices. I will select a slice and go to File > Image Preview to get each one just right to export (and export). When I save my working FW document, all these careful settings are saved, too.