Asset Export

The Export for Screens panel is a more efficient way to generate assets of different sizes and file formats in one easy-to-use panel. Through the Asset Export panel you can quickly generate and export your creations for web and mobile workflows in several different file formats; PNG-8 and PNG-24, JPG, SVG, and PDF. The size of the files can be customized to create different versions of the artwork in multiple sizes for web use or for iOS and Android devices.

Adding Assets

Adding any of your creations to the Asset Export panel (Window Asset Export) is as simple as selecting your artwork and dragging it into the Asset Export window. Note: either group the artwork into a single asset before dragging it into the Asset Export window, or hold down Option (Mac) or Alt (PC) and drag it in. If the artwork is not grouped, all the individual shapes will appear as separate assets, which is probably not what you want.

Add as many assets to the export window from the current document as you need. The Asset Export panel does not act like a library, so if you switch over to another open document, the panel will not show assets from outside the current document. If you have several assets to export, it may be easier to have them all in one document.

Export Settings

To control the setting of your export, click on the Asset Export panel dropdown menu to dial in the specific setting for each format. You can edit the export settings for PNG-8, PNG-24, JPEG quality, SVG, and PDF.

File Formats

PNG, JPG, SVG, and PDF are the supported file types to export from the Asset Export panel.

Portable Network Graphic (PNG) comes in two flavors, PNG-8 (256 colors) and PNG-24 (about 16.7 million color), sometimes just labeled at PNG. PNG files render as pixels even though the original artwork is a vector. They are favored for many graphics, specifically vector artwork, type, logos, and illustrations since they render without any compression and little loss of quality. Another big feature they offer is a transparent background, which makes the content of the file easy to use on any layout for web or mobile devices. A PNG-8 produces a relatively small file since the maximum number of colors is 256. PNG-24s are larger files because the number of colors contains 16.7 million possibilities. PNG files are not ideal for photographic images, since a PNG-8 can only render limited colors.

One more thing to consider when using PNG-8 and PNG-24 formats is how to render drop shadows. All PNGs support background transparency, and there is one case where this may become an issue: that is if your graphic has a drop shadow that fades into that transparency. A PNG-8 will render the drop shadow with a halo around it since the transparency only exists when there is no color in the file. A PNG-24 will render the drop shadows as translucent.

Joint Photographic Expert Group (JPEG, shortened to JPG) files are used for exporting images. They are not ideal for graphics, logos, or type. JPGs support full color range, which is why they are ideal for photographs. But they do not support transparency. JPGs are also good for producing small file sizes due to their ability to compress a file, however, the more a JPG is compressed, the more the file degrades in quality. Some people refer to this as pixelization since you notice the pixels with more compression. JPG files are referred to as having “lossy” compression do to this attribute.

JPG files that are highly compressed will get JPG compression lines as the file format tries to group and convert similar colors into a single color to save file size. When a file is highly compressed, these lines can become visible and the degradation in quality is quite noticeable. Typically, we don’t use a JPG export from Illustrator since most, if not all of the artwork is vector-based rather than a photograph.

Scalable Vector Graphic (SVG) renders the artwork as a vector graphic just as it was created. It does not render it as pixels like a PNG and JPG. SVG files are relatively new compared to PNG and JPG files, and they offer some advantages over them as well.

Scalability is one of the major advantages of SVG files because they are resolution independent. This means they retain the same quality no matter what resolution or size they are being displayed at. On a display where a JPG might appear blurry, an SVG will still look high-quality.

Editing capability is another unique feature. You can create and edit an SVG in Illustrator, whereas a PNG or JPG has to be editing in a pixel-based editing software even though the original file may have started in Illustrator.

Performance of an SVG file is much faster on loading since there is no file that needs to be download. No file? An SVG is all numbers that spell out the curves and lines of the vector artwork. This makes your website or mobile app work faster for visitors, improving the user experience.

Style control is another benefit of using an SVG file. You can control properties such as fill color, stroke color, sizing, and more through CSS without having to create and export multiple files.

Portable Document Format (PDF) is a file type that maintains editing capabilities of the Illustrator file while providing the recipient with a printable and viewable file that has all the quality and functionality of the original file.

Export Assets

Now it’s time to export your assets in the formats and sizes you need for your specific end user or device. Select the asset you want to export and choose the settings, file format(s), and sizes for the files. When iOS formatting is chosen, the files sizes display as .5x, 1x, 2x, etc. of the size of the original artwork. When Android is selected, that format sizing is labeled as ldpi, mdpi, hdpi, xldpi, etc.

Add scale and formats to the list by clicking on the + Add Scale section. Click the export button, and choose the location of the files, and a folder will be created with internal folders reflecting the different scales.

Updating Assets

Updating the assets in Illustrator does not require you to reload them into the Asset Export panel. Illustrator is smarter than that. Any updates that are applied to the artwork will immediately be reflected in the Asset Export panel. This pertains to all grouped or ungrouped artwork so if you update artwork with multiple objects and each object is in the Asset Export panel, all the pieces will update regardless of whether or not the final artwork is grouped. If you want to create a version of the same artwork, duplicate the artwork on the artboard, make the edits, and drag that file into the Asset Export panel. This will give you a unique version of that artwork.

When artwork is deleted from the file, the version of the Asset will also be deleted from the Asset Export panel. Assets only exist in the panel if they are in the file.