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

Crop This: More Useful Trim Marks in Illustrator

A while back, I posted a few scripts from Shane Stanley, which added some important functionality to the multiple artboards feature in Illustrator.

Most folks are also familiar with the fact that multiple artboards were once called "crop areas" back in Illustrator CS3. But there's also another feature in Illustrator that helps you define cropping areas, with drawn objects. In previous versions of Illustrator, this command, Create Trim Marks, was found in the Filter menu.

But alas, in Illustrator CS4, the Filter menu has been removed altogether, and the Trim Marks function was moved into the Effect menu. As such, the command is now a live effect, and must be expanded if you want to edit the marks that are drawn.

But let's be honest here -- the trim marks that Illustrator have always created aren't very useful. They are large, and they are offset quite a ways off from the selected artwork that is used to define them. Chances are, if you've used the Create Trim Marks feature before, you've also manually adjusted them afterwards.

I asked Shane if he thought it would be difficult to add some functionality to his already-wonderful Artboard Coordinates script to also have it create custom trim marks. His response came in the form of an email that read: "you mean like this?" and there was a script attached :)

And so now, I pass on the golden prize to you -- a script that not only takes multiple artboards to a new level, but that also creates customized trim marks. All you need to do is select an object and click on the Trim Marks button and a dialog box appears asking you for the desired length, offset, and weight of the strokes, and even offers an option to create dashed lines to indicate folds. You can also choose to place the marks on a specific layer.

Download the script here, and don't forget to thank Shane. Please note: This is an AppleScript, and as such, is a Mac-only application.

P.S. I wrote this post using some new blogging software that I was introduced to, called blogo. I've tried a few editors in the past and haven't come across one that I've really liked, but this one seems pretty cool so far. Hopefully it will mean I'll be blogging more often without the hassle. If you do blog on your own, you should check it out.

Scripts make multiple artboards in Illustrator CS4 even better

I'm really starting to get used to having multiple artboards in Illustrator. Already, I can't imagine living without them. That being said, I wish there were a few things that would be added to the feature. For example, it would be nice to be able to name artboards, making it easier to keep them organized.

In addition, there are two other enhancements that come immediately to mind:

First, while Illustrator does offer multiple artboards within a single document, Illustrator only provides one ruler for an entire document. Meaning that you have a single set of coordinates for the entire canvas, and each artboard in your file shares this. This makes it incredibly difficult to position objects precisely by the numbers when you have multiple artboards in a file. Either you have to continuously reposition the origin point of your ruler (which will also shift the positioning of patterns), or you have to do a whole lot of math. And you know I'm no huge fan of math. What we really need is a set of ruler coordinates for each individual artboard.

Second, you'd think that with multiple artboards, I should be able to open a multipage PDF document in Illustrator, and have each of the pages turn into artboards. Yes, I know that Illustrator really shouldn't be used for PDF editing, but in many cases, it's a great solution for that. Alas, upon opening a multipage PDF file in Illustrator, a dialog box appears asking which single page you'd like to open.

So it's with great elation that I inform you of two AppleScripts that address these two issues. The genius behind these scripts is a dear friend, Shane Stanley, who calls Australia his home. Funny thing -- while I've known Shane for what has to be more than ten years now -- we've never actually met. At the same time, Shane has generously shared his AppleScript expertise over the years. Shane also runs an AppleScript conference and does consulting.

As these solutions are based on AppleScript, they come with their share of limitations. These scripts will run on Mac only (sorry Windows users), and you'll need MacOS X v. 10.5 or higher to run the scripts.

The first script, Artboard Coords creates a mini Transform panel that displays the coordinates for objects, relative to each artboard. To use it, launch the script, select an object and click on the 9-point proxy and punch in a value. Download the script here.

The second script, PDF Pages to Artboards, is a droplet. Drag any PDF document onto the script and a dialog asks how you'd like the pages to be arranged in the new document. Then sit back and relax. The script will create a single Illustrator document that contains each of the PDF pages as a separate artboard. You can then make edits and quickly save as a new multipage PDF file. Nice, eh? Download the script here.

The scripts are provided "as is" without technical support, and are totally free. Thanks to Shane Stanley for these -- I hope they prove helpful to Illustrator CS4 users out there!