Use Illustrator CC 2015 Export For Screens Feature

Image shows two Illustrator Artboards and the Export For Screens dialog box.
Mobile workflow for prototyping and SVG export in Illustrators CC 2015 just got a whole lot easier.

If there is one aspect of working with Illustrator that I truly don’t enjoy it is converting line art to svg images for mobile or the web. Using the Export >Export As menu and, to be brutally honest, the Save For Web feature - Export>Save For Web – were not exactly easy to use.

Converting a drawing to the .svg format opened a rather intimidating dialog box that, for people new to this workflow,  offered a confusing array of options not to mention the fact there were a number of .svg formats and only one of them was the proper format.  Once you got used to this workflow it was no big deal, but the learning curve was steep.

That has all changed with the new Export  For Screens feature – Export>Export for Screens –  and the Asset Export panel which were introduced to Illustrator CC 2015 in June 2016. In this “How To” I am going to show you how to use both features. Let’s get started.

 

01
of 04

How To Access Export For Screens In Adobe Illustrator CC 2015

Image Shows Artboards and Save for Screens panels.
Output artboards using the Export for Screens dialog box.

Having been an Illustrator user since Illustrator 88 I think you can understand my reluctance to consider Illustrator as a serious design tool for web and mobile interfaces and projects.

When artboards were introduced in the CS4 version 2008, I thought that was an interesting addition to the application. When I first saw the now-deprecated Save For Web feature in Illustrator, again, I found it interesting but I found the same feature in Adobe Fireworks was more aligned with web graphics than Illustrator.

With the advent of a mobile-first approach to design and the increasing reliance on SVG images for mobile projects, Illustrator was my “go to” tool for SVG and became an important stop in the UI Design workflow.

Still, if I needed to export assets for mobile, Sketch 3 and Photoshop CC 2015 are my tools of choice. Illustrator entered the list in June 2016 with the really nifty Export for Screens menu.

In the above example, I have two screens destined for an iPhone and they are on separate Artboards named “Home” and “Places”. To output them, I selected File>Export> Export for Screens. The Export for Screens dialog box opens.

02
of 04

How To Use The Export for Screens Dialog Box

Image shows artboards and the Save for Screens panel with the Android options chosen.
Output artboards for iOS and Android by making a few simple choices in the Save for Screens dialog box.

When the dialog box appears, click on each artboard to be selected. It will then sport a check mark. You can also double-click an artboard’s name to select it and change it. This is a good thing to know if your artboards are named “Artboard 1” and “Artboard 2” which, frankly, tells you nothing.

 You have three choices in the Select area:

  • All: This choice exports each artboard in the document as a separate file.
  • Range: Enter a range of artboards to be exported. This is especially useful for projects with a few dozen artboards.
  • Full Document: Select this and all of the artboards will be flattened into a single document.

The Export To area lets you choose the destination folder for the output. The default folder will be the current location of the Illustrator document.

Formats is where the “magic happens.  You will notice there are three icons- iOS. Android and a Gear. The first two are self-explanatory. The Gear icon opens the Format Settings which allows you to control how each of the file formats in the list will be optimized. These settings are “format specific” and once you have made your changes, click the Save Settings button and those changes will be applied to the formats to be output.

Once you choose iOS or Android the list will change to include all of the resolutions available on that platform. The iOS listing will show the scaling factors for the Retina display and the Android selection will have scales ranging from .75x to 4x which accommodates practically every Android device out there.

If there is a format showing that you want to remove, click the “x”. If there is one you want to add click the + Add Scale button.

When finished, click the Export Artboard button and a progress bar will show you when the process is finished.

03
of 04

Using The The Export For Screens Files from Adobe Illustrator CC 2015.

The artboards in Illustrator are shown in Adobe Experience Design
The files output from Illustrator can easily be added to any number of prototyping applications such as Adobe Experience Design.

When you check out the results of Export for Screens, you will discover that Illustrator has output a flattened version of each screen. On the surface, this may seem to be a bit weak especially if you were expecting Illustrator to have exported all of the bits and pieces as images.

If you step back and think about it for a moment, this is actually exactly what you need because you can use this output in a prototyping application such as Adobe Experience Design, Principleformac, Atomic.io, UXPin or other prototyping application

In this example, I am using Adobe Experience Design (XD) to create a simple click-thru. The first step in the process was to select the iPhone 6  size which matched the dimensions of the Illustrator Interface

When the interface opened, I selected the Artboard tool and clicked once on the pasteboard to add another artboard. I then named them “Home” and “Places”, selected each artboard and imported the png image from Illustrator into the artboard.

To create the “hotspots” for the click-thru, I drew a rectangle over the Explore button on the home screen and set its fill and border values to none by deselecting those properties in the Properties panel. I did the same thing with the Back button on the Places page.

To add the Interactivity, I selected Prototype mode and then clicked on the “hotspot”. I then dragged the arrow- called a wire – to the Places page and set the Transition target at the Places, the motion to Push Left, the easing to ease out and the duration of the transition to .6 seconds.

I repeated this step with the hotspot on the Places page. The only difference was the Transition was set to Push Right. When I clicked the Play button I tested my prototype.

04
of 04

How To Use The Export Asset Panel In Adobe Illustrator CC 2015

The Asset Export panel is shown.
Custom icons can be exported as SVG files using the Asset Export panel.

Along with the Save for Screens menu Adobe also added a new panel – Asset Export – that removed a huge pain point in the UI Design workflow.

The pain point was icons. Illustrator is a great vector drawing application but to output, let’s say 10 icons, on a page with 40 or 50 of them required each one is saved as an SVG image. This inevitably required more time than usual thanks to successive trips to the SVG panel. This pain point is now a thing of the past.

This new panel can be found at Window> Asset Export. When the panel opens, select the asset you want to convert to SVG or other format and drag into the panel. When you release the mouse a thumbnail of the asset is added to the panel. Name the asset. Keep dragging objects into the panel until you are finished.

Select each item In the Export settings area, or select them all by holding down the Shift key and clicking on each one. Select your format – in this example, I chose SVG- and click the Export button. The selected items will be output as SVG files to the same location as the Illustrator file.

Where this whole process gets even neater is you don't have to use the Asset Export panel. If you click the Save for Screens button at the bottom of the panel the dialog box opens.

Conversely, you can click the Assets tab in the Save for Screens panel to access the  Asset Export panel. For example, if you have a custom icon on an artboard you can open the Asset Export panel in the Save for Screen dialog box and drag that item into the Asset Export panel.

Format
mla apa chicago
Your Citation
Green, Tom. "Use Illustrator CC 2015 Export For Screens Feature." ThoughtCo, Jan. 15, 2018, thoughtco.com/use-illustrator-cc-export-for-screens-feature-4089933. Green, Tom. (2018, January 15). Use Illustrator CC 2015 Export For Screens Feature. Retrieved from https://www.thoughtco.com/use-illustrator-cc-export-for-screens-feature-4089933 Green, Tom. "Use Illustrator CC 2015 Export For Screens Feature." ThoughtCo. https://www.thoughtco.com/use-illustrator-cc-export-for-screens-feature-4089933 (accessed January 16, 2018).