I confess I had not given Adobe Illustrator nearly enough attention over the years, until recently. Photoshop used to be my go-to app for comping/wireframing/pre-production deliverables for years. In fact, Photoshop is still used in some of the top companies for exactly that purpose. This is certainly not what Photoshop was built for originally, but those designers are a wacky bunch. Eventually, features like slices and Layer Comps wormed their way into the software spawning new web prototyping workflows.
The Problem with Photoshop Comps
The problem with Photoshop in this context, aside from its limited support of vector artwork, is that it lacks multipage support. Layer Comps are great for enabling designers to maintain representations of multiple application “states” in single PSD files – which can, incidentally, be placed into InDesign layouts, with specific states activated, for presentation purposes – but the reality is, building these files is cumbersome at best. The result can easily become a labyrinth of grouped, nested and duplicated layers which becomes incrementally less manageable as each comp is added.
Overengineering with InDesign
InDesign, of course, is the be-all and end-all of multipage layout software. (If anyone is aware of anything that truly comes close, I’m all ears. I’ve had people suggest a few things to me over the years, but I’ve shut them down with the mere mention of Object Styles. If you’ve never heard of them, well, you’re in the majority. Suffice it to say they’re tremendously powerful yet seldom understood.) InDesign also has a formidable set of vector tools, but Adobe Illustrator can always be used for complex vector compositions, which can then be seamlessly imported into InDesign.
Adobe Illustrator Artboards to the Rescue
Still, InDesign can be a bit much, as it turns out, for virtually anything other than lengthy, text-heavy projects. Thankfully, Adobe Illustrator CS4 introduced multiple artboards, which effectively made Illustrator my primary design tool. In my case, I design for print and web far more often than I build books. For those occasions, InDesign is always there.With multiple artboards in Adobe Illustrator, an entire branding project can be housed in a single file. One caveat is that only one unit of measurement can be set within that file. Thus, if the project will span print and web, two separate files can be used; otherwise, there will be some switching of units (likely inches/cm to pixels and back) during the project.
The missing ingredient here is automation. Thanks to Matthew Ericson over at www.ericson.net, there is a script which exports layers and artboards to individual PNG files, even at double resolution to retina displays if you so choose. You can download the script right here.
Multiple artboards can be exported to multi-page PDF or placed into InDesign layouts. I’ve managed to avoid the InDesign phase for the vast majority of recent projects. I try to avoid complex wireframes, for that matter, as I feel the wireframing process can distance developers from actual users which can result in a lot of wasted time. The Lean UX approach favors “Getting Out Of The Deliverables Business,” but if you can’t avoid it, Adobe Illustrator’s second-to-none toolset is right there, so add a few artboards and wireframe to your heart’s content.
There is also a similar script for Photoshop downloadable right here. My typical use case is the need for multiple PNG files of the same dimensions. Simply stack the layers, including placing vector files, name the layers individually, and run the script.