Adobe Illustrator’s Export for Screens Saves You Time – Big Time
posted on 08-10-2016
Vincent Le Moign’s Kameleon icon set provides a great example of the time-saving benefit of the ability to save to multiple sizes and formats is in a professional icon designer’s workflow. Before the release of the Export for Screens feature, saving to multiple sizes and formats in Adobe Illustrator could take days or longer for very large icon sets.
Now, with Export for Screens, the same task can be completed in a matter of hours. But this is hours to convert tens of thousands of icons. For the typical user, working with a few hundred icons at most, the task will take mere minutes.
Export for Screens, step-by-step
There are two options for what you can export: artboards or assets. Exporting artboards allows you to select from 1 to 100 (the total number of allowed artboards) to export in various sizes and formats. Asset exporting allows you to add assets to a collection from which you can select one, several, or all assets independent of artboards to export.
Export artboards to multiple sizes and formats
Access the Export for Screens control panel by going to the main menu bar in Illustrator then selecting “File > Export > Export for screens …” or by typing Command + Option + E on Mac, or Control + Alt + E on Windows.
Figure 1 – Export Artboards
On the left-and side of the Export for Screens window will show all of the artboards in the document on the first tab, or all of the assets that have been added to the Asset Export panel in the other tab (more on this in the next section).
You can select any combination of artboards to export by clicking the checkbox in the lower left corner of any artboard. You can also easily rename each artboard by simply clicking the name label below the artboard.
In the right-hand side of the window, the form fields on the top should be self-explanatory and work as you would expect. The “Open Location after Export” is a nice convenience feature that does exactly what it says.
The bottom right quarter of the window is what is most interesting. Take notice of the “iOS” and “Android” labels to the right. By clicking one or the other you can quickly specify preset output sizes and formats for those platforms. So if you are creating icons for Android, for instance, simply click the Android preset option and the correct output formats and sizes will populate the output options below. You can also add custom output formats and sizes to go with the presets. The same is true for the iOS presets.
If you click the little gear icon, a new window will open which allows you to customize the output settings for each of the formats including JPG, PNG-8, PNG-24, SVG, and PDF.
With regards to the size output options, you can select sizes that are a percentage or multiple of the the size of your asset, e.g., @0.5x, @1x, @3x. Additionally you can specify exact pixel dimensions as either width or height, or, lastly, specify a resolution.
You can output your assets to any of PNG, PNG 8, JPG 100, JPG 80, JPG 50, JPG 20, SVG, and/or PDF.
Figure 4: Output Formats
Your output files will be saved to the location you specify, using the names of the artboards, followed by the size using the @1x notation (e.g. @1x, @0.5x, etc). You can also specify a prefix to the file names so you could add something like “icon” which will be added to the beginning of each output file name.
Video demonstration – export artboards to multiple formats and sizes
Export assets to multiple sizes and formats
As an alternative to exporting your artboards to multiple sizes and file formats, you drag vector objects to the Assets Export panel. One nice benefit of using the Assets Export feature instead of artboards is that you can bypass Illustrator’s arbitrary 100 artboard limit. So if your icon set contains more than 100 icons, you can still create all of your icons in a single file and export them to all of your desired outputs.
Figure 5: Asset Export Palette
One important issue to keep in mind with regards to Assets Export is that if you select multiple icons at once and drop them onto the panel, they will be treated as a single asset. So be sure that you only drag the object to the panel that you want to be treated as a single output.
Figure 6: Multiple Objects Selected as Single Asset
Once you have added assets to the panel, you can give each asset a unique name, which will be used for the output file name. The Export Settings work identically to exporting artboards.
Video demonstration – Export assets to multiple formats and sizes
Video 2: Asset Export Demonstration
Affinity Designer and Sketch3
As mentioned earlier in this article, Sketch3 by Bohemian Coding, and Affinity Designer by Serif Labs have comparable functionality which allows you to export objects to multiple file formats and sizes at once. Sketch3’s functionality works almost identically to Illustrator’s and has been part of the product for at least 2 years.
The ability to export to multiple file formats and sizes is a relatively new feature in Affinity Designer as well and deserves much more detailed coverage than the current space allows. We will cover the feature in full detail in a follow-up to this article.
As the competition between the three major vector design applications intensifies and upstarts like Affinity Designer mature and gain ground with users, the challenge for Adobe will be to nimbly adapt its existing code base to meet customer demands for greater speed and quick implementation of new features. Something that should be of particular concern to Adobe is how quickly Serif Labs responds to customer feature and bug-fix requests.
By the same token, the challenge for Affinity Designer and Sketch3 will be to compete with Adobe beyond single user scenarios such as integration with enterprise teams and seamlessly working with tools such as Adobe Experience Manager, Scene7, and the Adobe DAM.
Users of the various software tools will be the real winners as competition for users drives the makers of these tools to be more attuned to user demands and more quick to provide the features that make tedious tasks less time-consuming and allow greater focus on creativity.
Products: Illustrator, Creative Cloud