Adobe PDF (.pdf)

Although a PDF does not preview unless you click the file link on a webpage and it downloads onto the browser, you may want to save some images as a PDF by using Illustrator, rather than spend time placing them in a program like Adobe InDesign CC and then saving the file as a PDF. Either way, make sure that Acrobat DC Pro is installed on your computer so that you can use the Distiller to create the PDF. Refer to the icons in Figure 12-2.

When you choose this file format, you are presented with various tabs; many are familiar to you because they are like the ones in Photoshop. There are various presets, standards, and compatibilities that you can choose from drop-down menus. Refer to Figure 12-3 to see the General tab.

• General: The main settings that allows you to keep a standard and compatibility setting. Preserve the file should you want to edit it again, embed a thumbnail, optimize for fast web preview, view the PDF after saving, or retain layers for your PDF.

• Compression: Assorted options for downsampling bitmap images within the vector file. You can also compress text and line art. Refer to Figure 12-4.

• Marks and Bleeds: Like Adobe InDesign CC, Illustrator CC allows you to add trim marks to your images for items like business cards and flyers. You may want to add these as part of your online portfolio or if you prefer to skip this area and create your own custom trim marks. Refer to Figure 12-5.

• Output: This tab deals with color and file conversion. Hovering over a filed item will give you a description of that setting in the field below. Refer to Figure 12-6.

• Advanced: This area deals with font subsets and handling transparency when the file is printed for older PDF compatibility; otherwise, it is unavailable. Refer to Figure 12-7.

• Security: Sets security features for an image so that users who don’t know the password can’t open, print, or edit it. Refer to Figure 12-8.

• Summary: Lists all the settings that were made, as well as any issues or warning during creation. Refer to Figure 12-9.

If you plan to save the PDF, click the Save PDF button, as seen in Figure 12-3, or click Cancel to exit.

SVG (.svg) and SVG Compressed (.svgz)

Scalable Vector Graphics, as you saw in Chapter 1, are based on an XML coding vector image format for two-dimensional graphics with support for interactivity and animation. As you saw in Chapter 8, they can also be used to create colorful fonts and fonts for the web. Vector images can be scaled to any size and keep their basic form without losing quality, whereas JPEGs, GIFs, and PNGs appear pixilated when scaled up. SVGs are generally considered “lossless,” or don’t compress; however, an SVGZ or compressed SVG can be 20% to 50% of the original size.

Both options will get you to the SVG Options dialog box, as seen in Figure 12-10 with the More Options button pressed to expand the box.

• SVG Profiles: SVG has various presets that you can use based on your compression settings. Refer to Figure 12-11.

• Fonts: If your SVG file contains fonts, you can set them to either Type: SVG or a graphic outline. Outlines make the text non-editable later. Subsetting allows only some or all font characters or glyphs to be loaded into the file, as seen in Figure 12-12.

If you choose Use System Fonts, the user’s computer interprets how the fonts appear when viewed on screen. A setting like All Glyphs should retain the shape of the font that you used in the file.

• Options: Determines if images are preserved embedded or linked to the file. You can also set whether Illustrator can continue to edit the file after it has been saved as an SVG. Refer to Figure 12-13.

• Advanced Options: When the More Options button is pressed, you see these additional options. Refer to Figure 12-14.

• CSS Properties: Refers to how the Cascading Style Sheets styles within the code; for a more detailed description, you can hover over each one and view the definition in the lower description area of the dialog box.

• Decimal places: Refers to how precise the vector is in the artwork. You can set it from 1 to 7; a higher value results in a larger file.

• Encoding: Refers to the type of coding used for the SVG file. The default is Unicode (UTF-8).

A few more options in this dialog box are presented in Figure 12-15. Hovering over them provides a description in the lower part of the dialog box.

• Selecting Output fewer <tspan> elements: Reduces the file size, but it may alter the image slightly.

• Use <textPath> element for Text on Path: Preserves text on a path; otherwise, it is written as a <text> element. This keeps the XML code more compact, but it may not accurately preserve the appearance.

• Responsive: Allows the CSS to make the SVG image scalable in the browser. This is a good option for scalable websites.

• Include Slicing Data: If the image included slices, the location and optimization settings are preserved.

• Include XMP: Allows the SVG to include important metadata like author, date created, and date modified. Some of this information is found in your original AI file when you go to File ➤ File Info.

• Less Options: Hides the advanced features. You can use a text editor, like Notepad++ or Dreamweaver, to edit your SVG code. Refer to Figure 12-16.

• Globe icon: Allows you to preview the image in a browser. Click OK if you want to save the file as an SVG or SVG compressed; click Cancel to exit the dialog box.

Artboards Tab

Artboards are set when you create a new PSD or AI file, as seen in Figure 12-19.

An Illustrator AI file can contain multiple artboards of varying sizes. Refer to Figure 12-20.

This is good for when you must create several layouts for a client and want to keep the layouts in a single file for organization and comparison. You can edit these artboards in the Tools panel by clicking the Artboard tool (Shift+O) and using the tools in Artboard mode, as seen in the Control panel. Refer to Figure 12-21.

To exit Artboard mode, click the Hand tool (H) in the Tools panel.

You can further organize your artboards using the Artboards panel; it is separate from the Layers panel. As seen in Figure 12-22.

You can add, duplicate, delete, and rearrange artboards using this panel.

Let’s go back to Export for Screens dialog box, as seen in Figure 12-23. When working with artboards that you want to export, make sure that the Artboards tab is selected in the upper left preview.

If you want to deselect all artboards, click the Clear Selection button in the lower area of the dialog box.

You can then browse for an export location, set whether the folder opens after export, and create a subfolder within that folder.

For file formats available to export from artboards are PNG, JPEG, SVG, and PDF.

As you saw in Chapter 4, each of these file formats have various settings of higher or lower quality; however, when applying these settings in Illustrator CC, you find that they are in a slightly different location.

You can set the scale size for each one and in various formats for export at the same time. Refer to Figure 12-25.

You can add more by clicking Add Scale, or remove by clicking the X on the right.

Suffix refers to the scale and the format you set and uses that to create a unique name for your file. You can also choose whether the file is for iOS or Android devices, clicking on this setting will add more formats to the list and allow you adjust the formats.

Prefix refers to text added to the front of the file name or each file create. If you don’t want a prefix, then leave this area blank.

If you need to refine the settings for your file formats you can adjust them in the widget icon in the Format area.

PNG

This is the same as PNG-24. Refer to Figure 12-26.

If you want to set your PNG background to a different custom color, you will need to use a PNG 8.

PNG 8

In this dialog box in Illustrator CC, PNG 8 has many settings similar to a GIF file. Note that the Export for Screens option does not allow you to save a GIF file. You need to use a different dialog box for that when you use Save for Web (Legacy). For now, refer to Figure 12-27.

As you saw with PNG, you can set the anti-aliasing and interlace; however, here you are limited to 256 colors. You can still set the background as transparent, but with PNG-8, you can also choose a matte background to replace the transparency with either white, black, or other, which brings up the color picker so that you can choose a custom color (see Figure 12-28).

JPEG

Whether you choose JPG 100, JPG 80, JPG 50 or JPG 20, you are presented with the same options for compression and profile. The only difference is that the numbers refer to the quality of the compression; 100 is the highest quality and 20 is the lowest quality. Refer to Figure 12-29.

As you saw in Photoshop CC, the following are compression methods.

• Baseline (“Standard”): Recognized by most web browsers. Good for photos that need decent quality.

• Baseline Optimized: Compresses the file a little more. Depending on the image, quality is indistinguishable from baseline standard.

• Progressive: Creates an image that displays gradually as it downloads. It appears as if the image is rendered as scan lines (like old-fashioned TVs). The browser shows a reduced quality image of half the scan lines while it resolves the complete image. You can set between three and five scans to take place on this setting (see Figure 12-30); however, with a fast Internet connection, this setting is not used as often.

Refer to the PNG settings in this Option 2 section for the anti-aliasing options.

A JPEG is embedded with the ICC profile of sRGB, if checked.

SVG

You can set your exported artboards with the SVG setting, as seen in Figure 12-31.

Here you see many of the settings that are available in Option 1 File ➤ Save As and saved as an SVG. Refer to this area in Option 1 for clarification on each setting, but note that they have been arranged in a slightly different order then what is seen in Format Settings dialog box in Figure 12-31.

You can adjust how the SVG is internally styled, how to handle fonts and images, the internal object IDs, the precision of the vectors (decimal), and compression (minify). Responsive allows the CSS to make the SVG image scalable in the browser.

PDF

This option allows you to make some quick choices on how to save your files for PDF. Refer to Figure 12-33.

If you need to save your PDF for the web, File ➤ Save As (Option 1) is a much better option because you can adjust the settings more accurately.

If you need to save your new setting, click the Save Setting button; otherwise, click Cancel. Just be aware that if you create new files with different settings in a different project, check this area first to avoid applying any unwanted settings in your a new project.

Once you have organized all the settings in the Export for Screen dialog box, you can click the Export Artboards button, which saves them in the folder that you chose earlier. Refer to Figure 12-34.

Assets Tab

The other tab option in the Export for Screens dialog box is the Assets tab.

Assets refer to individual objects or a group of several objects that are all on one artboard or are on several artboards. If you are working with more than one artboard, you need to add the objects to the Asset Export panel. Refer to Figures 12-35 and 12-36.

Assets can be objects (vector shapes) or many objects that are grouped together (Object ➤ Group) that you want to export as one image. You would choose to do this to keep the final file smaller rather than have all the extra blank space that a full artboard takes up. This is good for small objects and buttons on a webpage.

Most of the other settings on the Artboards tab are the same as the Assets tab. Refer to the “Artboards Tab” section.

However, there are a few differences when only some objects are selected the select will appear as a dash and when all are selected it appears as a check, as seen in Figure 12-37.

Also, the button in the lower right has changed to Export Asset, and you can save your assets to the folder of your choice.

There are two other related ways that you can convert your objects’ assets.

File ➤ Export Selection

When an object is selected on an artboard with the Selection tool (V), choose File ➤ Export Selection to add that asset to the Selection options of the Export for Screens dialog box and to the Asset Export panel, as seen in Figure 12-38.

However, as you continue to do this, you might notice that you have more assets than objects on the artboard. What’s going on here?

Asset Export Panel

To add assets, you can select and drag them into the Asset Export panel.

If you want to remove one, select it and click the Trash icon. Refer to Figure 12-39.

Note

If no assets appear, you can drag or Alt-drag them into this preview area, or click the new Assets button when an object or shape is selected. Refer to Figures 12-39 and 12-40.

In the Export Assets panel, you can rename by clicking the asset name, as seen in Figure 12-41.

Type the new name, and then click outside the asset to confirm.

In the lower portion of the panel, you find the same export setting as you saw in the Export for Screens dialog box. Refer to Figure 12-42.

When an asset is selected, you can use the Information (I) icon to see the number of objects selected or exported. The square icon launches the Export for Screen dialog box, and the Export button determines which folder the file is exported to. The Asset Export panel also allows you to access file settings in its Format Settings menu, as seen in Figure 12-39. As well as open the export folder after export.

Note

You can also right-click on an object that is not yet in the Asset Export panel and choose Export Selection to add it to the Asset Export panel, as seen in Figure 12-43. Alternatively you can use the icons in the Asset Export panel.

When you choose Collect for Export ➤ As Single Asset, if one or more objects are selected, they are placed in the Asset Export panel together.

When you choose Collect for Export ➤ As Multiple Assets, if one or more objects are selected, they are placed in the Asset Export panel separately, as seen in Figure 12-44.

Layers Panel: Collect for Export

You can find another icon on the Layers panel called Collect for Export, as seen in Figure 12-45.

Because all the artboard items are (in this case) on one layer, all the objects are collected as a single asset in the Asset Export panel, as seen in Figure 12-46.

Note

If there are multiple layers in a file, then those assets on another layer disappear in the Asset Export panel if the layer eye is turned off. So be aware of this if part of an image goes missing during export, as seen in Figure 12-47.

As you can see the Asset Export panel is very useful in organizing which shapes or objects you want to save for the web.

Bitmap

Bitmap (.bmp) images can be saved for the web, but often their file size is quite large, so other file sizes are generally recommended. Export As is the only way that you can save a bitmap file from Illustrator CC. Save it with an RGB setting and a resolution of 72 ppi, as seen in Figure 12-49.

JPEG

The JPEG Options dialog box is very similar to Export for Screens, and most of the settings are the same; however, here you can control things like the color mode, as RGB, CMYK, or grayscale. You have this option here because you may want to export a CMYK version of the image for a print project. When you are exporting for screens, as you did earlier, RGB is the only choice you should use. Refer to Figure 12-50.

You can also adjust the quality with the slider, text box, or drop-down menu to more accurate levels of compression.

In the options you can control compression, the resolution 72, 150 or 300 or other custom resolution. In the Export for Screens dialog box (see Option 2) 72 dpi is the only option because the files are viewed on the Internet. Anti-aliasing type and ICC Profile options can also altered. Image map is currently unavailable, but you can easily create these in Dreamweaver as you will see in Part 6.

PNG

PNG Options is also very similar to the Export for Screens dialog box. The only difference is that you can alter the resolution to 72 ppi, 150 ppi, 300 ppi, or other. In the Export for Screens dialog box (see Option 2), 72 dpi is the only option because the files are viewed on the Internet. Refer to Figure 12-51.

SVG

SVG Options’ settings are similar to Export for Screens (see Option 2) and Save As in Option 1. Please refer to these sections for a more detailed description of the settings. Refer to Figure 12-52.

If any setting is unfamiliar to you, hover over a word for a hint.

CSS

Although CSS is not a graphic file, you can save many Cascading Style Sheet settings from your Illustrator files from the CSS Export Options dialog box for later use in Dreamweaver. Refer to Figure 12-53.

Many of these settings refer to settings found in your SVG file, or could be used for styling images or items used in animation that you create with CSS in a program like Dreamweaver CC. Often, images with gradients or special filters require vendor prefixes. Some artwork may be rasterized because not all browsers support special effects in the same way. If you need to adjust the resolution setting, you can choose Other from the drop-down menu and set a different resolution.

CSS Properties Panel

If your AI file contains CSS properties, they are in the CSS Properties panel. Refer to Figure 12-54.

You can reach the export options either via the CSS properties menu or the icons in the lower portion of the panel.

If there are no valid CSS properties to export, you receive a warning, as seen in Figure 12-55.

CSS properties generally work best with text formatting. Refer to Figure 12-56.

However, when you go to the Export Options dialog box and select Generate CSS for Unnamed Objects, you can now get the CSS from the objects selected on your artboard. Refer to Figure 12-53 and Figure 12-57.

Illustrator CC generates a temporary class for all items with CSS properties. You can then either export the CSS via the panel or copy and paste the information directly into Dreamweaver CC.

GIF

This is the only way that you can export a GIF file format out of Illustrator CC, as seen in Figure 12-61.

Most settings are the same as Photoshop CC Save for Web (Legacy) so refer to Chapter 4 for a more detailed explanation. As with Export for Screens option you can set Image Size to None, Art, or Text Optimized.

The Color Table for GIFs has the same setting as the dialog box in Photoshop CC; however, you will notice that there is no option for animation since you can only create stationary GIF image graphics from Illustrator CC and must use Photoshop or Adobe Animate CC for animation creation.

JPEG

Most settings are the same as Photoshop CC’s Save for Web (Legacy), so refer to Chapter 4 for a more detailed explanation. As with the Export for Screens option, you can set Image Size to None, Art, or Text Optimized. Refer to Figure 12-62.

PNG-8 and PNG-24

Most settings are the same as Photoshop CC’s Save for Web (Legacy), so refer to Chapter 4 for a more detailed explanation. As with the Export for Screens option, you can set Image Size to None, Art, or Text Optimized. Refer to Figure 12-63.

Browser Dither (at the bottom of the dialog box ) shows how graphics appear in some browsers. Refer to Figure 12-64.

When you are done, save your file. You look at creating slices in Illustrator in Chapter 13. If your file contains no slices, this area of the dialog box is unavailable.

When you save, notice that only Save as type: Images Only is available, not HTML or Images and HTML . You look at how to get around this issue when you explore slices in Chapter 13. Refer to Figure 12-65.