May 7, 2009

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! :)

10 comments:

samhs said...

Nice post Mordy.

There is an alternative though. This doesn't work for GIF files, but you can use File > Export and choose either PNG or JPG as the format. The export functionality does support multiple artboards, allowing you to choose to output a single artboard, all artboards or a range.

Quite a useful time saver if you are using artboards rather than slices.

Mordy Golding said...

samhs - Yes, of course you have that option -- but it's not anywhere near as powerful. Here's why:

1. The Export option will save every file using the exact same optimization settings. So if you want some files to be GIF, some to be PNG, and some to be JPG, AND if you want different settings within those formats, that won't be possible. With Save for Web, you can export a combination of file formats with one action.

2. The Export option *will* allow you to save a range of pages, but you'd have to memorize the actual artboard numbers you want to export. Via the Save for Web feature, you could select 5 slices visually (just by clicking on them), and choosing to just save All Selected Slices (instead of All User Slices).

3. The Export option will take your document file name and append "_01" etc to each file. So you'll have to manually rename each file after it has been exported (again, memorizing which file is what). With Save for Web, the slice name becomes the file name - you set it once and it saves that way forever for each individual slice.

Leito said...

Thanks! this is great... however.. i don't know why the final jpg has 1 pixel more than the original slice... it's only 1 pixel but makes me nervous!!!

אלכסיי קלצל said...

Thank you for the post, it is interesting.

I have designing sites and icons in Ai in 10 last years. I have thought about using slices for pages since the slices appeared in Ai. However the slice multi-paging method have two issues:

1. Many objects and texts at the same time are appeared on artboard -- it making difficult designing complex websites on not so new computers. But now in CS4 with the updated text engine it is a bit easier.

2. Ai does not have master pages like InDesign. Common items (like background or logo of the site for instance) can be placed on each page in slicing method as symbols or placed Ai file. But in this way is difficult to control pixels making with pixel preview. Sometimes after changing a symbol the graphics and shifts.

In the years I have using another method. I have making a common layer and a layer for each page. If the art on the pages is complicated I use sublayers.

It is true that each page has to be saved as PNG separately but the layers method allows control making of each pixel. Combinations (or compositions) of the layers can be saved as view (View > New View). To all (ten first) views can be assigned shortcuts.

Websites and icons have been made in Ai can be seen on my site: www.kletsel.com/websites and www.kletsel.com/icon-design

Mordy, thank you for your tips. I learned more from you. If it interesting I can send you samples of Ai file with a site design project.

My name appeared upstairs in Hebrew is Alexey Kletsel.

ricardo said...

@Leito: Is it positioned at a "round pixel" x,y?
Otherwise, Illustrator might use anti-aliasing on it and average the color, creating another line of pixels.

pac said...

Your post inspired me so much I told myself : "Go on ! Give slices another chance !"... Well, still buggy it seems. Pixel preview is perfect, round dimensions everywhere, and still, slices all wrong (1 pixel wrong).

Interestingly the same shapes I used for slices do very well when converted to artboards...

I guess I will stick to my old fastidious multiple artboards techniques.

website design said...

great colors! appreciate the ideas. what a great help

Anonymous said...

Mordy, this is fantastic. i've been looking for a way to speed up multiple exports for a while now. this hits the spot. thanks mate. steveo

jphg said...

excellent again.
but i got a problem with my (legal) copy of AI : Save for web does not work. It launches nothing.

Did it happen to someone here ?

rause said...

That's great!!!
Awsome, Mordy, Awsome!
Thanks so much!