You've Been Sliced! (sorry, multiple artboards)

One of the headlining features added to Illustrator CS4 is multiple artboards. After years and years of waiting, users can finally create a single document with true multiple artboards - which can be of any size or orientation, which automatically become true multiple-page PDF files, and which can be easily printed - pure bliss...

...unless you're a web designer, that is.

Here's the deal. When I first saw the multiple artboards feature, I immediately thought about how wonderful it would be to create all of my ad banners and assorted web graphics for a particular campaign in a single file. Being each element is a different size, it would be easy to create a variety of different-sized artboards in the same document. Which works fine. Until I am ready to export my art.

When you're in the world of print, you can choose to print a range of pages (or artboards). Same for saving a PDF file. But when exporting web graphics, you're usually using Illustrator's Save for Web feature. And there's where things start to break down. Because while Illustrator can contain up to 99 artboards within a single document, only one artboard can be "active" at any one time. And only the active artboard is loaded into Save for Web when you use that feature. In other words, there's no way to get multiple artboards into Save for Web -- you can only bring them in one at a time.

But there's another issue at hand. More so than in the world of print, we are usually very careful about how we name our files when creating web graphics. In a print workflow, where a PDF might be our final delivery method, we can have 30 images in our layout, but we have a single PDF that contains all of those files. As such, the names of those files aren't important. But on the web, where graphics are constantly swapped out for others, and more importantly, where we are working with code and referencing file names all the time, we rely on using careful naming conventions in web workflows.

Artboards, as wonderful as they are, don't have names. So that means each time I load an active artboard into Save for Web, and I save that graphic, I have to give it a name. That may not sound so crazy at first, but if you have 20 assorted graphics in a single document, and you are constantly saving and updating your art (who isn't), then you are selecting an artboard to make it active, then you're launching Save for Web, then you're choosing optimization settings (JPG, GIF, etc), then you're saving your art and giving it a name -- all manually -- and if that weren't enough, you're doing it again and again for each of the 20 graphics in your file - EVERY time you save your art.

Which is why I find myself relying on a feature that few focus on these days: SLICING.

I know - I can envision Jeffrey Zeldman raising his hand in the air Darth Vader-like as if that would make my throat constrict because I have spoken against the Empire - but don't get me wrong - I'm not suggesting that folks use slicing for layout. I'm talking about cranking out multiple-sized individual web graphics from a single file quickly and efficiently.

So let's begin.

1. Create a new document using the Web profile, but use a larger (single) artboard if you will have lots of different graphics you'll be working with.

2. Use the Rectangle tool to draw a rectangle for each graphic that you'll need to create. Instead of drawing them out visually, click once with the tool on the artboard and enter precise numerical values. Give each of these rectangles a black fill with NO STROKE (important). Position the rectangles all over your document, however you'd like.

3. Press Cmd-A (Ctrl-A) to select all of your lovely rectangles and press Cmd-C (Ctrl-C) to copy them, and then Cmd-F (Ctrl-F) to paste in front. Then press Cmd-5 (Ctrl-5) to turn them all into Guides. This will allow you to see the boundaries of each of your individual graphics.

4. Press Cmd-A (Ctrl-A) to select all the rectangles (the original ones you created) and choose Object > Slice > Make. This will turn each rectangle into a user slice. The document will also fill up with auto slices -- those created automatically in the areas between all the rectangles -- but forget about those.

5. We don't need to see all of these slices, so let's do two things: first, since your rectangles are still selected, change their opacity values to 0%. Alternatively, you can just set their fill attributes to none; second, choose View > Hide Slices.

6. We don't want our slices to move around, so let's employ some layers. Rename Layer 1 to "SLICES" and lock that layer. Then create a new layer called "ART". All of your graphics will be drawn on this art layer, and the slices are just where we need them.

7. Now you can start creating the art for all of your elements. But at some point, let's go and set up the next step in our workflow. Choose File > Save for Web. The dialog opens and you'll see all of your individual graphics are there in their own little slices. Choose the Slice Select tool and double-click on the first piece of art. From the Slice Options dialog box, enter the designer name for that graphic in the Name field. Don't worry about any other settings -- those are moot for our purposes here. Click OK and do the same for every single piece of art in your file. Additionally, if you already know what file format you want to save your art in (JPG, GIF PNG, etc.), you can do so while each slice is selected as well. Remember you only have to do this for the slices you created, not the empty ones that were created automatically. When you've given names and optimization settings to all of your art, click the Done button in the Save for Web dialog. This returns you to Illustrator, but all of your settings are saved in the slices. So you'll never have to rename or adjust the optimization settings again.

8. OK, after some more work on your art ("always tweaking, we are" says Designer Yoda), you're ready to export your art. Choose File > Save for Web and click on the Save button. For Format, choose Images Only and for Slices, choose All User Slices. For Settings, choose Other and switch to the Saving Files section -- where it says Optimized Files, uncheck the option marked "Put Images in Folder" (unless you want AI to always save your images into a single folder). Click OK and then click Save. You'll see that ALL of your web graphics will be saved at once, all with the right optimization settings and all named correctly. Naturally, once you've applied these settings, they are "sticky" and you can just choose Save for Web, click Save and then Save again, and you're done. If you're overwriting files (which happens often as you update your graphics), you'll be alerted to the fact (and you'll just press OK). In reality, you could even record an Action to just perform the Save for Web export with a single keystroke.

So there you have it. For most web design tasks where you're creating a variety of art - slices are far more efficient than multiple artboards. However, if you're mocking up full web pages with Illustrator, multiple pages would work just fine - especially if your goal is to use CSS to actually implement those designs in DW or elsewhere.

Got other web design tips or ideas to share? Don't be shy! There's a comment button below that begs for your attention! :)