Adobe Illustrator CC Guide

How to export and save files

Illustrator is popular with designers because you can create graphics that can be used in a wide
variety of applications. You can easily save your work for print, video, or the web. The Export for
Screens workflow is a new way to generate assets of different sizes and file formats in one action
(Figure 1). When you save for the web, additional options are available that will generate usable CSS
code for use in other projects and applications, such as Dreamweaver.

Figure 1 Exporting for Screens dialog box for Artboards and individual assets

Saving your work to the Creative Cloud makes your files available to you anywhere and on any device or computer.
You can preview many creative file types directly in a web browser on your computer, tablet, or smartphone. These file
types include PSD, AI, INDD, JPG, PDF, GIF, PNG, Photoshop Touch, Ideas, and others. You can download some the
assets used in this tutorial here.

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 1
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
 Saving for print

To make optimum decisions about printing, you should understand basic printing principles, including how the
resolution of your printer or the calibration and resolution of your monitor can affect the way your artwork appears
when printed. Illustrator’s Print dialog box (Figure 2) is designed to help you through the printing workflow. Each set of
options in the dialog box is organized to guide you through the printing process.

Figure 2 Print dialog box

Printing a composite of artwork from the dialog box helps you to fine-tune your project for print. A composite is a
single-page version of artwork that corresponds to what you see in the illustration window—in other words, a
straightforward print job. Composites are also useful for proofing the overall page design, verifying image resolution,
and identifying problems that may occur on an imagesetter (such as PostScript errors).

How to print a composite of an artwork to PDF:

1. Choose File > Print.

The Print dialog box opens (Figure 2).

2. To print to a file, select Adobe PostScript® File or

Adobe PDF from the Printer menu (Figure 3).

Figure 3 Print dialog box Print Preset menu

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 2
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
3. Choose one of the following artboard options:
• To print everything on one page, select Ignore
Artboards in the General area of the dialog box
(Figure 4).
• To print each artboard separately, deselect
Ignore Artboards and specify if you want to
print all artboards (All) or a specific range, such Figure 4 General area of the Print dialog box
as 1–3.

4. Select Output on the left side of the Print dialog box,

and make sure Mode is set to Composite.

5. Set additional printing options.

6. Click Print.

The Save PDF dialog box opens.

7. Name the file, browse to a location, and click Save.

The composite is saved as a PDF (Figure 5).

Note: If your document uses layers, you can specify

which ones to print. Choose File > Print, and select an
option from the Print Layers menu: Visible And
Printable Layers, Visible Layers, or All Layers.

Figure 5 Printed PDF

Saving for video

Illustrator can create images of various aspect ratios so they appear properly on devices such as video monitors. You
can select a specific video option (using the New Document dialog box) to compensate for scaling when the final
image is incorporated into video.

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 3
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
Safe zones
The Video and Film preset provides several preset video- and film-specific crop area sizes (Note that the Artboard
option changes to Crop Size for this profile). The document is created with nonprinting guides that delineate the
action-safe and title-safe areas of the image (Figure 6).

Action-safe area Title-safe area

Figure 6 Video preset file size guides include action safe area (outer rectangle) and title safe area (inner rectangle)

Safe zones are useful when you edit for broadcast and videotape. Most consumer TV sets use a process called
overscan, which cuts off a portion of the outer edges of the picture, allowing the center of the picture to be enlarged.
The amount of overscan is not consistent across TVs. To ensure everything fits within the area most TVs display, keep
text within the title-safe margins, and all other important elements within the action-safe margins.
Illustrator creates only square pixel files, so to ensure that the sizes are interpreted correctly in video applications,
Illustrator adjusts the Width and Height values. For example, if you choose NTSC DV Standard, Illustrator uses a pixel
size of 654 x 480, which translates to 740 x 480 pixels in video-based applications.

How to save for video:

1. Choose File > New.

The New Document dialog box opens.

2. In the dialog box, click the Film & Video category tab.

3. Click View All Presets + button to reveal all options.

Review the blank document presets for HDTV, HDV,

DCI, NTSC and other video formats (Figure 7).

4. Select one of the Film & Video presets, or create your

own custom size using the Preset Details panel.
Figure 7 New Document dialog box

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 4
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
5. Click Create.
The new document window opens (Figure 8).

Figure 8 New video preset document

Saving for the web

Illustrator provides a variety of tools for creating layout for web pages or creating and optimizing web graphics. For
example, use web-safe colors, balance image quality with file size, and choose the best file format for your graphic.
Web graphics can take advantage of slices and image maps, and you can use a variety of optimization options to
ensure your files display well on the web. You use the Save For Web dialog box to select optimization options and
preview optimized artwork (Figure 9).

Figure 9 Save For Web dialog box

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 5
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
How to optimize an image for the web:
1. Choose File > Export > Save For Web (Legacy).

The Save For Web dialog box opens (Figure 9).

2. Click a tab at the top of the dialog box to select a

display option: Original, Optimized, or 2-Up.

3. (Optional) If your image contains multiple slices, select

one or more slices you want to optimize.

4. Select a preset optimization setting from the Preset

menu (Figure 10), or set individual optimization
options. The available options change depending on
the file format you select.

5. Fine-tune the optimization settings until you are

satisfied with the balance of image quality and file size Figure 10 Image Preset options
(Figure 11).

6. If optimizing an image with an embedded color

profile other than sRGB, you should convert the
image’s colors to sRGB before you save the image for
use on the web. This ensures that the colors you see
in the optimized image will look the same in different
web browsers. The Convert To sRGB option is selected
by default.

7. Click Save.

8. In the Save Optimized As dialog box, do the follow-

ing, and then click Save:
• Enter a filename, and select a location for the
resulting file or files.
• Select a Format option to specify what kind of Figure 11 Save For Web dialog box, 2-Up view
files you want to save: an HTML file and image
files, only image files, or only an HTML file.
• (Optional) Set output settings for HTML and
image files.
• If your image contains multiple slices, select an
option for saving slices from the Slices menu: All
Slices or Selected Slices.

The image is optimized for the web (Figure 12)

Figure 12 Optimized, exported image

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 6
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
 Export for Screens workflow

The Export for Screens workflow is a new way to generate assets of different sizes and file formats in one action. The
ability to quickly export makes the generation of imaging collateral simpler and faster - especially for web and mobile
workflows. You can export entire arboards using Export for Screens, or individual artworks like icons, logos, images,
mockups, and more using the Asset Export panel and Export for Screens dialog box (Figure 13).

Figure 13 Save Export for Screens dialog box: Artboards (left) and Assets (right), Asset Export panel (center)

For example, in a mobile app development scenario, the User Experience Designer may want to frequently regenerate
updated icons and logos. She can add these icons and logos to the Asset Export panel, and then export them to
various file types and sizes in one click of a button.

Useful features: Formats available:

• Export to multiple formats and sizes in one quick action. • PNG (PNG-8, PNG-24)
• Export to typical or custom sizes (scales): 1x, 2x, 3x, 0.5x, • JPEG (JPEG 100%, JPEG 85%, JPEG 50%,
1.5x, and more. JPEG 25%)
• The algorithm to generate PNG files has been revised to: • SVG
• Generate PNG files faster than before. • PDF
• Produce better transparency in PNG-8 files.

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 7
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
How to export entire artboards:
1. Click File> Export > Export for Screens.

The Export for Screens dialog box opens (Figure 13).

2. Select the Artboards tab and choose from the

artboards available to export. Click an artboard to
select or de-select it. You can also choose what you
want to export using the Select settings:
• All Select all artboards. Each artboard will be
exported individually.
• Range Select individual artboards to export,
from the available options. For example, 1, 2, 4-6
selects artboards 1, 2, 4, 5, and 6.
• Full Document Exports the entire document as
one artwork.

3. Specify the location and format settings for the

exported files (Figure 14):
• Location Specify the folder location where
exported files will be placed.
• Scale Specify the scale factor for the output file.
• Suffix Provide a string that will serve as the end
of the file names generated. Figure 14 Export for Screens detail, iOS options
• Format Specify if you need .png, .svg, .jpg, or .pdf file
output.
• Add Scale Click this button to add an additional output scale/format to export.
• Presets: Select for iOS or Android preset file output types.

4. Click the Export Artboards button.

How to export individual artworks:

1. Click Window > Asset Export to launch the Asset
Export panel (Figure 15).

Figure 15 Detail of the Asset Export panel

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 8
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
2. Do one of the following:
• Drag artwork into the Asset Export panel.
• Right-click an asset, and then choose Collect for
Export > As Single Asset from the context menu
(Figure 16).

The asset is added to the Asset Export panel.

Continue adding objects in the Asset Export panel
that you want to export.

Review the collected assets in the Asset Export panel.

A border indicates whether the asset is selected for
export or not (Figure 17).

Note: Only assets with a border are exported. Click a

thumbnail to select or deselect it.
Figure 16 Asset Export panel detail
3. Click the Export Settings triangle to view or add what
formats/sizes you want to export your files to:
• Scale Specify the scale factor for the output file.
• Suffix Provide a string that will serve as the end
of the file names generated.
• Format Specify if you need .png, .svg, .jpg, or .pdf
file output.
• Add Scale Click this button to add an additional
output scale/format to export.
• Presets: Select for iOS or Android preset file Export
output types. Settings

4. To generate files, click the Export button.

Note: To change the folder location of the asset you’re

exporting, or to specify details like a file suffix, use the
Export for Screens dialog. Click the dialog box icon to Export for
open the Export For Screens dialog. All options set in Screens
the Asset Export panel are retained in the Export For button
Screens dialog.

Figure 17 Asset Export panel

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 9
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
 Generating CSS code

You can easily create the design for an HTML page in Illustrator. This serves as a good visual guide for a web developer,
who can then code the layout, styles, and objects into a page in an HTML editor. However, replicating the exact
appearance and position of components and objects is a time-consuming and tedious process.
With Illustrator, you create the layout for an HTML page and then also generate and export the underlying CSS code
that determines the appearance of the components and objects on the page. CSS allows you to control the appearance
of text and objects (similar to character and graphic styles). You can choose to export the CSS code for individual
objects or for the entire layout designed in Illustrator.
In the CSS Properties panel (Figure 18), you can do the following:
• View the CSS code for selected objects.
• Copy the CSS code for selected objects.
• Export one or more, or all selected Illustrator elements to a CSS file.
• Export rasterizable images used.
• Generate browser-specific CSS code.

Export Options Export Copy Selected Generate

Selected CSS CSS CSS
Figure 18 CSS Properties panel

How to view and extract CSS code:

1. To generate CSS code, ensure that objects in your
Illustrator document are named in the Layers panel
(Figure 19).

2. Select Window > CSS Properties.

The CSS Properties panel opens (Figure 18).

Figure 19 Layers panel

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 10
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
3. In an open Illustrator document, do one of the
following:

• Select one object (Figure 21). The CSS code for

the object is displayed in the CSS Properties Figure 21 Selected image
panel (Figure 22).
• Hold Shift, select multiple objects, and then click
the Generate CSS button in the CSS Properties
panel.
• Press Ctrl/Cmd + A to select all the objects, and
then click the Generate CSS button in the CSS
Properties panel.

The generated CSS code is displayed.

4. To obtain the CSS code that has been generated, do

one of the following: Figure 22 CSS code for selected image
To copy selected code, select specific code, and then:
• To copy to the clipboard, click Copy Selected
Style.
• To export to a file, click the flyout menu, and
then click Export Selected CSS.

To copy all the code, make no selection in the CSS

code, and then:
• To copy to the clipboard, click Copy Selected
Style.
• To export to a file, click the flyout menu, and
then click Export All.

5. While saving CSS code to a file, set the CSS options in

the CSS Export Options dialog box (Figure 23).

The exported CSS is ready to be placed within another

application, such as Dreamweaver (Figure 23).
Figure 23 CSS Export Options dialog box

Figure 24 Exported CSS in Dreamweaver

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 11
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
 Saving to Creative Cloud

Your Adobe Creative Cloud account comes with online storage so your files are available to you anywhere and on any
device or computer (Figure 24). You can preview many creative file types directly in a web browser on your computer,
tablet, or smartphone. These file types include PSD, AI, INDD, JPG, PDF, GIF, PNG, Photoshop Touch, Ideas, and others.

Actions button

Figure 24 Creative Cloud Files page

How to save to Creative Cloud:

1. Log into your Creative Cloud account.

2. Drag and drop assets from your desktop to the Files

page on Creative Cloud (Figure 25).

You can also upload and manage your files on

Creative Cloud by using the Actions button on the
Creative Cloud Files page (Figure 24).

Figure 25 Drag and drop files

© 2018 Adobe Systems Incorporated. How to export and save files Illustrator Guide 12
This document requires Adobe Illustrator CC 2018. Technical instructions may differ depending on your version.
3. To delete files, select the Archive option by clicking
the menu triangle in the lower-right corner of the file
(Figure 26).

4. Click the Archive button to confirm.

The item is moved to the Archive page (Figure 27).

5. To permanently delete files, select the files to delete

permanently and click the Permanently Delete option
in the Action menu (Figure 28).

6. In the confirmation dialog box, click Permanently

Delete (Figure 29).

Figure 26 Menu triangle

Figure 27 Creative Cloud Archive page

Figure 28 Action menu

Figure 29 Permanently Delete confirmation dialog box

For more information

Get instant access to free courses, workshops, & Adobe and the Adobe logo are either registered trademarks or
teaching materials and connect with the creative trademarks of Adobe Systems Incorporated in the United States
and/or other countries. All other trademarks are the property of
education community on the Adobe Education Adobe Systems Incorporated
345 Park Avenue
their respective owners.

© 2018 Adobe Systems Incorporated. All rights reserved.

Exchange: https://edex.adobe.com/. San Jose, CA 95110-2704
USA This work is licensed under a Creative Commons Attribution-
www.adobe.com Noncommercial-Share Alike 3.0 Unported License.

13