5 Replies Latest reply on May 2, 2013 10:01 AM by HGStudios7

    Slices - can you have overlapping slices?

    mike_morales Level 2

      Hello all,


      Need some help - is it possible to have overlapping slices? For example, I typically start a web design in illustrator, then like export pieces to use in in my build.  But, I tend to have a lot of overlaping pieces that need to be exported (full static background image for the webpage and banner overlap for example). I find myself, hiding pieces, drawing out a slice, export it, then go back, delete that slice, create another slice . . . as you can see, it gets pretty tedious. Everytime I try to overlap a slices, they just create new slices and I end up with a bunch of rectangle slices all over the artboard. Anyone know if this is possible? Thanks in advance!



        • 1. Re: Slices - can you have overlapping slices?
          Scott Falkner Level 5

          You didn’t state your version number ALWAYS tell us the version number. We cannot answer your question without knowing what features you have available.


          If you have version 14 or 15 (aka CS4 or CS5) you can use artboards. Slices cannot overlap, but artboards can. Use Artboards instead and be sure to turn on the Clip to Artboard option when you Save for Web or Devices.

          1 person found this helpful
          • 2. Re: Slices - can you have overlapping slices?
            mike_morales Level 2

            Oops, sorry I didnt mention my version - CS5.  Thanks for you quick reply Scott. Ok, I played with the artboards a little, is there a way to accociate artwork with an artboard? I tried to draw out a large background on one artboard, then created another artboard for the banner, drew a quick rectangle on that - so I have 2 separate artboards with a rectangle on each, then, when I try to drag my banner artboard into/over the background artboard, either the artboard moves without my rectange, or it makes a copy of my artwork and creates a new artboard.


            When in 'artboard mode' I tried to toggle the "Move/Copy Artboard" button and tried to move the artboards, but not really working. At one point I was able to move the banner artboard into/over my background artboard, but then when I tried to move the banner artboard again, it somehow grabbed my background art along with it?


            What would be the typical approach? Any help will be greatly appreciated -


            diggin' into the help now to investigate artboards . . .

            • 3. Re: Slices - can you have overlapping slices?
              Scott Falkner Level 5

              I find the best way to lay out a complex arrangement of artboards is to draw them with the rectangle tool, then use Object > Artboards > Convert to Artboards.


              In this example I have six artboards. 06 - Artboard 6 is the master artboard encompassing all the others. 01 - Artboard 1 is the top, spanning the width and covering parts of 04 - Artboard 5 and 05 - Artboard 6. Youcan’t see the tag for 01 - Artboard 1 because it has the same top left corner as 06 - Artboard 6.


              Screen shot 2010-05-17 at 10.46.29 PM.png


              If it helps, I get confused with overlapping artboards, too. For example, If I move 06 - Artboard 6 then none of the rectangles I drew move, but the dashed lines do. I drew the rectangles before I created 06 - Artboard 6, but I may have created the lines afterwards. Coincidence? Maybe. Poorly designed interface within Illustrator for a rather hastily added new feature? Ooh, that’s a Bingo!

              1 person found this helpful
              • 4. Re: Slices - can you have overlapping slices?
                mike_morales Level 2

                Wow, thanks for detailed answer Scott! very helpful. Didn't know you could convert a rect to an artboard - this will come in handy. Yeah, the slicing/multiple artboards seems a bit finicky - sometimes it sort-of-works, and sometimes no dice.


                It would be great if illustrator could add/associate a slice to a particular layer, then when you need to export a piece of overlapping art/slice, you could just hide the underlying layer along with that slice . . .


                Thanks again for your help Scott, appreciated . . .

                • 5. Re: Slices - can you have overlapping slices?

                  We looked everywhere for this answer too and finally have a solution that works! We too tried stacking artboards but they are a visual impediment and introduce a number of other challanges when moving things around. We have finally found a solution using only slices. In Ai CS6, the layer order for slices matters. I believe we saw the slices layered in previous versions too, but just realized how important the order is for this type of web site design workflow.

                  For example, we can go in and create a few main slices for our large page background elements. We take these slice layers and double click each one in the layers panel and name them :Menu div, footer block, Top area, etc.

                  Then group all these together so we can quickly go back to the full set of main slices.

                  Now, the interesting part: Any new sliced that are created on top will result in Ai treating those as the most important and will recalculate any slices below to fit around the new slice. The important detail is the new slice is on top. For example, we just want to slice out a few buttons. We draw those slices just around each button. Drag those slices layers to be above the main set grouped above in the layers panel. You will see those buttons take priority and a bunch of auto slices may get renumbered to fit around the rest of the page. When you are done with the buttons and need to export your original main slices, just drag the main group to be on top of any others you created in the layers panel. You will see those original slices override the little ones you created for buttons because those are now below in the stacking. This way you do not have to delete the slices you want to reuse and just move them to a different order in the stack. By carefully naming the slices, and using groups you can quickly go back and fourth to various slice layouts within the same design. This has become a huge time saver for us and now slices are finally fitting better with our design workflow where in the past they were just not allowing us to design freely and then slice out objects freely later.

                  I hope my explanation made sense. Keep at it if you don't get it right away. The key is to watch the layer order of the slices you create and keep an eye on where each slice is in the layers panel. Turning off slice visibility does not seem to work; it's all dependant on layer order. If you keep an eye on what layer you are in when creating slices, you can get this to achieve overlapping exports efficiently.