Introduction
>> The latest release of Illustrator CC includes exciting enhancements for web and mobile workflows.
There's now an easy way to export assets in multiple sizes and multiple formats in one go.
Let's say, I'm working on design content for a mobile app or a website.
You can see the different artboards out here that represent designs for my app content, including one artboard with individual icons.
I need to show someone the design so far, maybe a client.
You can now easily export artboards in a document in several formats and sizes.
Exporting multiple artboards with export for screens
To do this, choose File, Export, Export for Screens.
With the Export for Screens dialogue box open, and the Artboards tab selected, you can see the artboards in the current document.
In here, you can select which artboard to export.
In this case, we don't need to export the artboard full of icons.
You can even export all of the artboards as a single file.
You can choose a suitable location for the exported assets and even turn on Open Location after Export, so you can see what was created.
You can then select optimization Formats.
Choose from presets for icon sets for iOS or Android devices, or select Formats such as PDF.
You could set a naming Prefix that appears at the beginning of each file name, then click Export Artboard.
With the artboards exported, I can now send them off to my client, for example.
As I work in my design, I'd also like to be able to generate individual assets
Exporting individual assets for web and mobile
like icons or page elements, for instance, that I can use in my app, website or anywhere else I need.
In this particular design, I need to export several icons in different sizes to use in my app.
I'll start by choosing File, Export, Export for Screens again.
This time I'll click the Assets tab.
In order for us to export individual assets, we need to collect them using the Asset Export panel.
Collecting and managing assets in the asset export panel
If you click here, you can open the panel.
You can also open the panel by going under the Window menu here.
We can collect the assets we need to export using a few different methods.
Selecting an asset, I can either drag it into the panel...
Or select an asset and click the Add New Asset button.
For each asset you collect, you can change its name by double-clicking the name here.
The naming used here will be used as the exported file names and will help me keep track of my assets that make sense to me.
If you find you don't need to export an asset you've collected, you can also remove it from the panel without affecting the artwork in the document.
Also, if you update artwork in your design, the asset is updated in the Asset Export panel.
With a few assets collected, you can set Export Settings, like Scale,
Configuring export settings for assets
you can add a Suffix to the file name, and change the format.
If you need assets for iOS or Android, you can click either option here to easily add the necessary output types generally required for iOS or Android projects.
If you find you don't need an Export Setting, you can also remove them easily.
With the settings the way I want them for these assets, I can now select the assets I want to export by Shift clicking.
Then click Export to export the assets in a location I now choose.
The next time you'll open this file, or if you hand this file off to someone else, the assets and their Export Settings will still be in the Asset Export panel, ready to export.
This is a real time-saver for assets you frequently export.
You can also open the assets in the Export for Screens dialogue box we saw earlier by clicking the button down here, or choosing File, Export, Export for Screens again.
There are a few more export options available to you in the Export for Screens dialogue box.
With the Assets tab still selected, you can choose which assets to export, determine where to save them, turn on Open Location after Export so you can see the files created, change the Formats, even add a Prefix, like a date, for instance, to the file names of each asset to help differentiate similar files.
I can then click Export Asset, to export the files.
Finally, if you need to export a single asset quickly, for instance, this icon,
Quickly exporting a single selected asset
you can select the artwork and choose File, Export Selection.
The Export for Screens dialogue box opens where you can set your Export Settings and export the individual asset.
The selected artwork is also added to the Asset Export panel when using this command, so you can easily export it again later.
I invite you to check out the new ways to export assets in multiple sizes and multiple formats in one go, in the latest release of Illustrator CC.
And discover a whole new way to conveniently and quickly generate output files for your web and mobile workflows.
