Adobe Creative Cloud

August 10, 2016 /Learn /Member Stories /

Adobe Illustrator’s Export for Screens Saves You Time – Big Time

Adobe Illustrator released CC 2015.3 in June 2016 and with it a feature that has been long-awaited by icon designers, vector artists, and UI designers: the ability to easily save assets and/or artboards to multiple sizes and formats at the same time. No more creating complicated Actions or JavaScript Extension scripts to automate batch conversions. You can now save any combination of your document’s artboards or assets to any sizes and formats you need. Adobe’s new release is a welcome step forward, especially considering that Sketch by Bohemian Coding has had this feature for several years and Affinity Designer by Serif Labs has added similar capabilities via Export Personas to version 1.5 which is currently in beta.

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.

Vincent’s Kameleon collection contains 1,500 icons, each in five different color schemes, one version on a circle background, one with no background, which he needed in SVG, PDF, and three different sizes of PNG for the product release. That is a total of 60,000 output files. Iconfinder was able to create a JavaScript Extension (JSX) script that opened each of the 15,000 SVG files and export them in the desired alternative outputs. But even running on two computers, one using a FIFO (first in, first out) listing, and the other using a LIFO (last in, first out) listing, the task took 2 full days to complete. That was the best that could be done at that time – a mere 18 months ago.

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.

Figure 2: Format Settings

Output sizes

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.

Figure 3: Output Sizes

Output formats

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.

Conclusion

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.

Learn, Member Stories