014 — Working Faster and Better with Adobe Illustrator
#designlife
It recently occurred to me that I use Adobe Illustrator in my day-to-day role at Other Media as my go-to software for most design tasks. Naturally I use Photoshop for editing photos and InDesign for laying out my documents (and on the rare, exciting occasion that I’m working with print). Illustrator, however, is absolutely my software of choice for designing sites and apps. Also creating assets, which are becoming more and more vector-based both on the web and in iOS.
Illustrator provides me the creative freedom to be less ‘pixel perfect’ than I would be in Photoshop; to move and manage shapes in a fluid and fast way, whilst retaining vector capabilities. (I could go on for hours regarding my preference to Illustrator over Photoshop, but I digress from the topic at hand…)
In the recent update to Illustrator CC I noticed an extremely handy overhaul of the export tool which is far more dynamic than in previous versions. This update will now supercede a script that I had been using with varying degrees of success for the past 8 months to allow me to export artboards in a variety of sizes and different formats.
The new export option — for those who haven’t found it yet — is located at:
File → Export → Export for Screens
This update has made me consider my workflow slightly, how I handle files and — more importantly to this article — my art-boards. It seems simple enough, but naming my artboards has become an integral part of my workflow. For many years I never bothered naming art-boards. I just never understood the benefit and why I should bother. This tool clarifies the necessity in an undeniable way, especially when working with assets.
In the image above I am in the Export for Screens panel with three assets that I have made — a circle, a square and a triangle. I have labelled my artboards to make my end point file management easier.
In this example the assets will be used on a project where we need to supply both normal (@1x) and retina (@2x) assets. In the past I would have duplicated and remade the assets at multiple sizes, something which is both time consuming and laborious. With this tool I can export one set of assets with a variety of prefixes, suffixes and scales to quickly, succinctly and effectively create them all in one go. All with the click of a single button. Brilliant!
As you can see my assets are labelled, ready for a developer to drop into their asset file, sized correctly and grouped by type. The way you label can change the structure of your files and this will often be down to personal taste.
Points of note to best use ‘EFS’:
- Make sure to name your artboards
- Make sure to align your artboards to the pixel grid top avoid stray pixels
- Standardise your naming method
- Only export the sizes you need
- Remember to configure your format settings using the ⚙ (middle right)
I find this tool to be powerful and a huge benefit to my workflow. I look forward to experimenting with it further and producing assets quicker and more efficiently. I’d love to hear tips and how anyone else uses it.
Thanks to Andrew for once again proofing my article
