Illustrator Articles

Cheat Sheet / Updated 02-23-2022

Many of the most dramatic changes in how Illustrator is being used are taking place in the realm of translating vector images to the web, and the underrated SVG format is the key link in that process. SVG files maintain the treasured scalability features of vector artwork and are supported nearly universally in websites and web development environments. When you prepare vector artwork for the web, it’s important to avoid Illustrator’s standard effects and, instead, use SVG filters. Illustrator comes with a decent (but minimalist) set of SVG filters, but here are some tips on how to find and add SVG filters as well as resources for creating your own SVG filters. For those who work with web and app developers, make their lives easier and more productive by checking out the cheat sheet for handing off SVG code.

Article / Updated 06-01-2020

SVG type provides the same valuable features found in all aspects of SVG graphics created in Adobe Illustrator CC: scalability, editability in Illustrator, and native support in all browsers. Those features in and of themselves argue for exporting your graphic content that contains type in SVG format when it's targeted for digital development. Even beyond the advantages you incur when you use SVG for graphics in general, some special features are available when you have type in those graphics. Exploit the value of scalable, searchable type As you might have noted, I’m excited about the fact that SVG type, when opened in a browser window, is searchable with the browser. Normally those browser search tools work with only HTML type. And SVG type is not only searchable; users can find text on a page, copy and paste, and look up content. For example, if a visitor to a juice bar is interested in whether or not the kale shakes have lemon juice, he can search the SVG file for that text, as shown here. Or for that matter, if a user isn’t sure what the heck kale is, he can select the text and search for a definition, as shown. To dial back a bit, you can export Illustrator graphics that include type for screens as PNGs, GIFs, or JPEGs. But they won’t be scalable, and they won’t retain the kind of type functionality demonstrated in the previous two figures. Optimize type functionality by saving SVGs I’ll return shortly to when and how to save SVG files and export to SVG. But while we’re on the topic of SVG type, you need to know that to make the SVG type behave in the way demonstrated, you must save your graphic as an SVG. And you must use specific settings so that the type acts the way it is supposed to when the SVG image is viewed in a browser. To save type within an image as SVG type, follow these steps: 1. With your graphic ready to hand off to a web developer, choose File→Save As. Navigate to the folder where you want to save the file and enter a filename. Keep filenames web compatible, which means use lowercase letters and numbers, do not use special characters (except the dash and underscore), and definitely do not use spaces. If you're resaving a file you’ve already saved to another format, you can keep your filename and location, and move on to Step 2. 2. In the format drop-down in the Save dialog, choose SVG and click Save. The SVG Options dialog opens. 3. Leave the SVG Profiles set to SVG 1.1 (the current version, supported by all browsers. The other options are not critical to what we are doing here, but briefly they are as follows: Subsetting option: Leave Subsetting set to None. The other options aren’t operative for SVG type for web. Image Location options: These options are applicable only if you have embedded or linked (or both) artwork in your Illustrator file. CSS Properties options: I describe the CSS Properties options later in this chapter, but the short explanation is that they are determined by the needs of the developer to whom you are handing off the files. When you're saving type as SVG, you can use any of the CSS Properties options. 4. In the lower section of the Advanced Options dialog, deselect the Output Fewer Elements and Use Element for Text on Path. Note that these options are selected by default. This section of your SVG Options dialog should look like the following figure. Deselecting these options might increase your file size slightly, but by deselecting them, you preserve how text looks and the properties I’ve been bragging about in this section (searchability, copy-and-paste, look up in browser, and other features, depending on the browsing environment). The Responsive check box is selected by default. This setting is not critical to preserving the special attributes of SVG type. Here, as with most options, your choice depends on the needs of your web developer. When in doubt, leaving the Responsive option selected is a widely applicable output option. 5. Click OK in the SVG Options dialog to save the file as an embeddable SVG. A few notes on SVG type: As of this writing, support for all features of SVG type is a work in progress. The basic features I’ve walked through here work in any browser, but support for different fonts might require some tweaking of code by your web developer partner. Are you wondering whether those cool select, edit, and search features of SVG text apply to text on a curve? The answer is revealed in the following figure. Spoiler: Yes! Add code snippets to SVG graphics Illustrator will never be anyone’s top-rated code editor, but it does include a cool little feature for associating code with elements of an SVG file. Let’s take a quick look at how to add a snippet of code when you want to add a link to part of an SVG graphic. The steps below walk through assigning JavaScript to an object that will make that object function like a link. 1. With an object selected, view the SVG Interactivity panel. You can display this panel if it is not active by choosing Window→SVG Interactivity. 2. Leave the Event set to the default, Onclick. This JavaScript command performs a function (make something happen) when a user clicks the selected object in a web page. 3. In the JavaScript box, use this syntax to define a link target: window.open("[URL]"); So, for example, if you were linking to the Wikipedia page on kale, the full line of code would be what I have in the figure: window.open("https://en.wikipedia.org/wiki/Kale"); 4. Save the Illustrator file as an SVG file. The file is ready to turn over to your web developer. (Or if that’s your other role, you can change hats and pick up the file in your favorite code editor to integrate it into a web project). Alternatively, you can simply embed the saved SVG file in a web page. The link won’t be elegant (until a web designer tweaks the generated CSS, it won’t include a typical link icon when hovered over, for example). But it will work, and it will definitely be serviceable for prototyping and testing before the web page is finalized. Don’t try using Illustrator’s slice technique for saving SVG files. The technology behind slices is raster-based and doesn’t mesh with vector-based output.

Article / Updated 03-15-2020

In Illustrator, place refers to bringing files into an existing document. Placed files can be embedded in a document or linked from an external source and included in an Adobe Illustrator CC document. Before you learn how to crop in Illustrator, you need to first place images. When files are linked, changes to the original file are reflected in the Illustrator document. When files are embedded in an Illustrator document, the umbilical cord, so to speak, is cut, and changes made to the original file are not reflected in the Illustrator document. Embed and link files To embed or link a file in an open Illustrator document, follow these steps: 1. Choose File→Place, navigate to the file in the dialog that opens, and click the file, as shown. By default, the Link option is selected. If you know you want to embed the file, not link it, deselect the Link option. If you’re not sure, leave Link selected (because it’s easier to change a linked object to an embedded one than vice versa). 2. Select or deselect Link. 3. To place the object in your document full size, simply click with the icon that appears. Or click and drag to size the placed object as shown. Managing linked files When a linked file is selected, it appears with a big X on the Illustrator canvas. The file can be transformed, moved, or sized like any object, but as long as it is linked, it can’t be edited. You manage the status of linked files in the Links panel. A number of options for managing the status of a linked file are available, but the most important and widely applicable is updating the connection when a linked file has been changed so that the latest version of the file appears in your Illustrator document. When a linked file has been updated outside Illustrator (for example, when a photo is touched up in Photoshop, or replaced with a different photo using the same filename), a warning icon appears next to the file in the Links panel. To update the placed content, click the Update Link icon in the Links panel (to refresh the link), as shown. Embedding linked files If you placed a file as a linked file but decide you want to edit it in your Illustrator document, you can easily convert the file from linked to embedded. After you break a link and embed a placed file, any changes to the original file will not be reflected in the Illustrator document. To change a placed object from linked to embedded, select it and choose Embed from the Links panel menu, as shown. Place text in a shape or path You can place text files (in TXT or RTF format) from a word processor. The placed text will be embedded, not linked. But it will automatically pour into the selected shape. The following steps place text in a selected shape. 1. Select the shape into which you are placing text. 2. Choose File→Place and navigate to the text file. When you choose File→Place and select a text file, the Show Import Options check box becomes active. Ignore it. Whether or not you select that check box, the next dialog that will open is the Microsoft Word Options dialog. 3. Click Place. The Microsoft Word Options dialog opens. Use the options in this dialog if you want to include a table of contents or an index, not import a table of contents or an index, and include (or not include) formatting. Available options depend on the source of the text file. 4. Click OK to approve your import options. 5. Click the edge of the shape to insert the placed text inside the shape, as shown. How to crop rasters in Illustrator You can crop placed raster artwork in Illustrator. Cropping a linked raster image breaks the linkage to the original file, so before you can crop a raster image you need to change a linked image to an embedded image. You can so on the fly with the following steps. 1. Select the image, right-click, and choose Crop Image from the menu that appears, as shown. 2. If a dialog appears, reminding you that cropping the image changes the link status to embedded, click OK. 3. Use the side and corner cropping handles to crop the image, as shown. a. Hold down the Shift key to maintain the original height-to-width ratio while you crop. b. Hold down the Alt key (Windows) or Option key (Mac) to maintain the original center point as you crop. c. Click and drag on the center point to move the crop area. The area to be cropped appears dimmed. 4. Press Enter (or Return) to crop to the area you defined in the preceding step. How to use clipping masks in Illustrator What if you need to crop a placed image or define an irregular shape that determines what part of the image shows through but also maintain the text file’s linked status? One solution is to draw and apply a clipping mask. Clipping masks hide sections of an image without cropping the image. To create and apply a clipping mask, follow these steps: 1. Draw a shape or path over the image demarcating a crop area, as shown. Normally, this shape will be a rectangle, like the one shown, but it can be any shape or path. 2. Select both the rectangle and the placed image by using Shift-click or any other selection technique, and then choose Object→Clipping Mask→Make. The result looks like a crop, but the placed (and linked) image only appears to be cropped. The entire placed image is still in the Illustrator document. If you want to display the entire image in your illustration, you can release the clipping mask by selecting the placed image and choosing Object→Clipping Mask→Release. 3. To change the location of the clipped image, choose Object→Clipping Mask→Edit, and select and move the mask, as shown. To edit an existing clipping mask for a selected object, choose Edit→Clipping Mark→Edit Contents.

Article / Updated 03-15-2020

Effects, like the ubiquitous drop shadow, are an essential element in every designer’s toolkit. You may have noticed that Adobe Illustrator CC’s Effect menu includes a substantial submenu for SVG filters. The available set of filters is expanding as Illustrator evolves to provide more support for SVG. By the way, if you’ve used Illustrator for years, you might remember that the Effect menu used to list effects and filters. Filters were like effects, except they couldn’t be easily edited after being applied. But SVG filters are not a revival of those types of filters; SVG filters are called filters because they operate through the SVG filter element in coding web pages. Here's another cool thing about SVG filters: As you discover shortly, you can import and even create your own SVG filters. When you apply an SVG filter, it may look similar to an non-SVG effect. For example, this figure shows two identical squares, but the one the left has a raster drop shadow effect applied and the one on the right has a vector (SVG) drop shadow filter applied. When I select the rectangle with the SVG filter, that filter appears in the Appearance panel, as shown. The different ways that effects and SVG filters change the path of an object have subtle but real implications. Some of those implications are relevant to only web and app developers, but from your end of the workflow, the important thing to keep in mind is to avoid mixing SVG filters and raster effects in projects because they affect objects differently. By the way, I can’t help sharing here that the square with the raster drop shadow in these figures is almost seven times larger than the one with the SVG filter. Just a brief public service announcement from the SVG industry on how you can lose (file) weight with SVGs. And as you may have surmised by now, raster effects are not programmable. When you turn them over to an animator or an HTML coder, your developer teammate is not going to have the same kind of freedom to control how raster effects work in an animation or a transition. Finally, when you apply SVG filters instead of raster effects to SVG artwork, you don’t have to worry about those filters degrading when the artwork is rescaled in a browser. How to apply SVG filters I’ve made the case for applying SVG filters whenever possible in SVG artwork. Let’s walk through how that happens: Select the object(s) to which you are applying the filter. Choose Effect→SVG Filters and select a filter. The SVG Filters submenu has a list of filters with names that at best are only semi-intuitive (such as AI_Shadow_1, which is a drop shadow) and more often just cryptic (such as AI_Dilate_6). You’ll have to experiment until you get a feel for how these filters work. With the object to which you applied the filter still selected, view the Appearance panel (choose Window→Appearance). Hover your cursor over the applied filter and click it to reveal the Apply SVG Filter box, shown here. Here you can change the applied filter, and use the Preview check box to see how the filter will look. You can also select and delete an SVG filter in the Appearance panel, as shown. How to import SVG filters Illustrator’s set of filters is useful but hardly pushes the limits of what you can do with SVG filters. If you code in HTML, you’ll find an accessible tutorial for creating your own SVG filters at w3schools. You also can purchase additional sets of filters online, and even find some nice sets of SVG free SVG filters. To install this set of filters or other filters, follow these steps: Choose Effect→SVG Filters→Import SVG Filter. In the dialog that opens, navigate to and double-click the SVG filters file you downloaded. The file will probably be an SVG file. Choose Effect-->SVG Filters to apply new filters to selected objects. After you import new filters, they appear on the SVG Filters submenu.

Article / Updated 03-15-2020

SVG graphics from Adobe Illustrator CC are rarely handed off to digital designers with backgrounds. Normally the graphics float above whatever background exists in the website, app, animation, or interactive context. Before discussing what’s involved in knocking out the background behind SVG artwork, focus on applying transparency to SVG graphics. You need to defining the opacity of artwork using the Transparency panel. For example, 50 percent transparency has been applied to the yellow shape in the figure, and you can see the transparency in effect. And yes, that image is an SVG file, with all the lightweight, fast-loading, and infinitely scalable features built into SVG. How to output SVGs with transparent backgrounds Designers are used to thinking in terms of backgrounds that are either made transparent or remain visible. We think about knocking out a background. PNG images and GIF images work like that—you either create with a background or you choose a transparent background in a program such as Illustrator or Photoshop to knock out that background. With GIFs and PNGs, you can have one transparent color that allows the background colors or images to show through in web pages. But the logic of knocking out the background is different in an SVG file than with PNGs and GIFs. Essentially, there is no such thing as an SVG graphic that has a non-transparent background because there is no background. In other words: by default SVG graphics save and export without a background. So, what’s the problem? Well, it’s easy to accidentally end up with a transparent background when saving or exporting SVG files! The following figure might have a white background, or it might have a transparent background. You can't tell just by looking at the Illustrator screen; you have to choose View→Show Transparency Grid. With Transparency Grid enabled, as shown, you can see that the bird has a white rectangle behind it, and that white background will “go with” the graphic if you save the file as an SVG or export it as an SVG. Let me emphasize and shine a light on this from another angle. When I go to export this image as an SVG, the Export for Screens dialog, shown, does not have an option for selecting a transparency color. I often encounter designers who insist on putting a background rectangle behind their SVG-destined artwork so they can see how the graphic will look when backgrounded by a color in the target medium (such as a web page or app). That’s okay, I caution them, as long as you remember to remove that background rectangle when you save or export the SVG. And in today’s high-pressure, high-productivity, fast turnaround world, who needs one more thing to remember? A better solution is to define a transparency “grid” with a single color that matches the environment into which the graphic will be placed. Why do I put grid in quotes? Because this technique cheats: With it, you define both grid colors as the same color, effectively simulating a web page or an app background color. To use that technique to create a custom background while you develop SVG artwork, follow these steps: Choose File→Document Setup. In the General tab, find the Transparency and Overprint Options section. The changes you want are controlled in this section of the dialog. Don’t worry about defining the grid size because you're effectively dispensing with the grid. In the Transparency Grid section of the dialog, click the first of the two grid color panels and choose a background color by using one of the various color palettes in the Colors pop-up shown in the following figure. None of these color palettes is particularly digital friendly, by the way. There is no palette for RGBA, hexadecimal, or other standard web color formats, but the color picker eyedropper can help you get the background color you are aiming to match. Select the second of the two grid color panels, and assign the same color to it. Remember, you can use the color picker eyedropper to grab that color. Click OK in the Document Setup dialog. All I’ve done in the previous set of steps was define how the Transparency Grid displays when it is enabled. So, if your Transparency Grid is not enabled, choose View→Transparency Grid. In this figure, I selected the artboard with the graphic, and I am previewing the project against a simulated background color. Apply transparency effects to SVG When transparency (such as 50 percent opacity) or transparency effects such as color burn, darken, or multiply are applied to SVG graphics, those effects retain the scalability of SVG. This figure shows the same graphic—three semitransparent orange rectangles—exported as a PNG file (top) and an SVG. You can see how the PNG file degrades in quality when I zoom in on it in a browser. What you can’t see is that the PNG file is almost twice as large as the SVG. Here’s a summary of the advantages to using SVG for transparency effects: The file size is qualitatively smaller. A web or app developer can tweak or edit the transparency values and assign interactivity. The image and the transparency will not degrade no matter how much the file is zoomed in on. By the way, if you’re curious about what the generated SVG code for this set of rectangles looks like, and how easy it is for a web or app developer to work with it, here’s the code for the first of the three SVG boxes, with 60 percent opacity applied: <svg id="orange-squares" <style>.cls-1{fill:#f7931e;}.cls-1{opacity:0.6 </style <title>orange-bars</title> <rect class="cls-1" y="0.13" width="74" height="66.85"/> </svg> If your HTML and CSS skills allow, you can paste the <style>; element into the <head>; element of a web page, and the rest of the HTML into your <body>; element, and you’ll have replicated the code I created in Illustrator. Let’s walk through the process of applying transparency and transparency effects to SVG artwork step-by-step: Select the View menu and be sure that Hide Transparency Grid appears on the menu. This check ensures that you're viewing the Transparency Grid. If the Transparency Grid display isn't turned on, you can’t accurately see the effect of the opacity settings you apply. Select objects to apply transparency to, and choose an opacity value from the Opacity slider in the Control panel, as shown. I'm using the default transparency grid for the screenshot to clearly illustrate the transparent background. Choose Window→Appearance and, in the Appearance panel, verify, edit, or hide (and show) the transparency Do not apply transparency to objects intended for SVG output by using the Layers panel. Doing that applies raster transparency, which degrades when SVG objects are enlarged. You can also apply Transparency effects such as color burn, darken, or multiply to SVG-destined artwork.

Article / Updated 03-15-2020

Ideally, Illustrator CC graphics intended for SVG output will have been created with a minimum of anchors and effects and with a minimum of raster objects. As you develop your own Illustrator-to-SVG workflow and habits, you’ll begin to internalize some of the demands of SVG files, and integrate those requirements more seamlessly into the design process. But the creative process for illustrators doesn’t always work that way. A traced sketch is going to have extra anchors. So, too, is artwork created with the Pencil tool. So whether you are dealing with artwork created with a minimalist approach to adding paths, or you inherit a project with anchor bloat, you will want to work at reducing file size by reducing anchors (and paths), using symbols wherever possible, and minimizing the use of raster images. Simplify paths for screen output The best way to see how much you can simplify paths is through trial-and-error. You do that by selecting artwork and choosing Object→Path→Simplify to display the Simplify dialog. Here you can experiment with different Curve Precision and Angle Threshold settings to see how many anchor points can be safely deleted from your artwork. The frog in the following figure, for example, was created reasonably efficiently but with some extraneous anchor points. By using the Preview check box to see the effect of reducing points, I can assess whether or not I can sacrifice some anchor points to reduce the file size. I can also use the Show Original check box to compare the original and simplified paths. Usually, though, that clutters the screen, and I prefer to judge “before and after” simplifying by toggling the Preview option on and off. Less Curve Precision reduces the file size less but retains the integrity of shapes more. In the example in the preceding figure, I set Curve Precision to a point where I reduced the file size to one third the original, but can still live with the accuracy. If this illustration had angles, I could have experimented with different Angle Threshold settings to see how much that would have reduced the file size without degrading the graphic. Reducing the file size with symbols Symbols also reduce SVG file size. For example, the file size of the graphic in this figure is 25 percent smaller when the graphic is saved as an SVG file with the candles as symbols, compared to each candle being a discrete object. I’ve seen and achieved even more radical reductions in file size when maximizing the use of symbols in architectural renderings (which might have dozens of trees, for example, that can be “symbolized.”).

Article / Updated 03-15-2020

You can export, save, and print several kinds of objects in Adobe Illustrator CC: an entire document; one, some, or all artboards in a document; selected objects; and assets. You share Illustrator files for a wide range of print and screen output options by exporting them to one of a long list of file formats. Exported files can't be edited in Illustrator. You save Illustrator files when you need to edit them in the future. Sometimes you export files for print or web output, and then save them. Sometimes you can save Illustrator files in formats that you can hand off to print or web designers and edit them. How to save Illustrator files You can save Illustrator files in any of these formats: AI, Illustrator’s native format and AIT (Illustrator templates). EPS, a widely supported vector format used for sharing files with other vector-editing apps and printers. Adobe PDF, a portable vector format accessible to anyone with Acrobat Reader. SVG or SVG (Compressed) files for screen output. Saving projects as EPS, PDF or SVG files gives you the option of retaining the ability to edit the files in Illustrator. Each of the options for saving Illustrator files has distinct options. If you are handing off a file in any of them, check with the team you are handing off to, to find out if there are specific settings they require. The following steps apply to saving files as AI, EPS, and PDF formats: Choose File→Save, File→Save As (to save an existing file with a new name), or File→Save a Copy (to create a duplicate copy of a file). Navigate to a location for the file and enter a filename. In the Format drop-down, choose one of the available formats (AI, EPS, or PDF). If the file format you want to use (such as PNG or TIFF) is not available in the Format drop-down, the format is available for export but not saving. Click Save to open the Options dialog for the file format you selected. The options will differ depending on the format but the following choices are widely available and useful: If you're saving to AI or EPS format, the Version drop-down defines the version of Illustrator with which you want your file to be compatible. If you are saving to PDF, the Compatibility drop-down defines what versions of PDF will be able to open the file. Legacy formats don’t support all features. Font embedding options allow you to embed fonts for users who will receive the file but may not have the required fonts. The Create PDF Compatible File option for saving AI files allows the file to be opened with Adobe Reader as well as apps that support importing Illustrator documents. The Include Linked Files option embeds any linked files in your illustration. The Embed ICC Profiles option is used by some print shops to ensure color integrity. Consult with your print shop on whether and how to use this option. The Use Compression option reduces file size. The Save Each Artboard to a Separate File option is available in Illustrator files with multiple artboards. Along with the resulting set of artboard-based files, a master file is created with all artboards. If you're simply saving an Illustrator project to access it, to edit it, or to share it with someone who has Illustrator, save the file as an Illustrator file. How to export files from Illustrator Illustrator files (as well as artboards, assets, and selections) can be exported to a variety of print- and web-compatible file formats. These files can't be edited in Illustrator, so you will almost always want to save as well as export projects as Illustrator files. Web designers may ask you for SVG files, which retain Illustrator editing capability. More likely, web designers will ask you for web-compatible PNG or JPG files. Print designers may be able to work with your Illustrator files. Or they might require TIF or other print-only raster images. In those instances, get the specs for the exported files from your print partner. You export files by choosing File→Export→Export for Screens or File→Export→Export for As (for print). Options vary depending on the output format. And, again, I’ll repeat a mantra that runs through this chapter and any discussion of output in this book: Ask the person to whom you are handing off the file what options he or she prefer. How to use artboards and assets for Illustrator output When you save or export Illustrator documents with multiple artboards, you can choose to export or save any set of artboards. For example, if you're exporting a document to PNG output for screens, the Use Artboards check box allows you to define which artboards to export. Communicating with your printer Today, print shops can turn Illustrator artwork into anything, from a poster to a coffee mug, a t-shirt to a message printed on glass. Each project has its own requirements, and the trick is to communicate effectively with your printer from the beginning. I asked Lydia Ochavo from UpPrinting.com, a widely used online print service, to share advice applicable to just about any print project in Illustrator. Here are some of her tips. Refer to the beginning of this chapter for notes on how to define documents to meet these specs: Print shops provide templates for frequently used output. Download and use them before you begin your project. UpPrinting has templates. Although Illustrator vector files are scalable, it’s safest to submit files to the printer sized to the actual output size. Most printers require a 1/8" bleed around your artwork. Make sure that all printable content is inside the bleed. Set raster resolution to at least 300dpi. Use CMYK color mode because professional print shops print only in CMYK. Many print shops prefer PDF format to Illustrator AI files. When you need an exact color match and your printer supports the use of Pantone color, use Pantone colors. Pantone colors are available from Swatch panels in Illustrator. You can use a Pantone color books to preview how a color will print. Those color books are available from your printer.

Article / Updated 03-15-2020

Within the canvas of Adobe Illustrator CC, artboards are discrete, sized spaces that make it easy to export, share, or print sections of the canvas. The canvas is the area of the Illustrator workspace where you create graphics. The canvas is basically everything you see on the screen except the interface (such as the menu, Control panel, and other panels). Artboards are both coherent and discrete. Too philosophical? Okay, here’s the point: Artboards inherit and share many properties of the document they lie within, such as color mode or raster effect resolution. And that’s nice because it means you can work on different graphics, including differently sized graphics, with shared properties. For example, you might have a project where you design a print poster, palm card, and plastic banner for an event. Although these will be different in size, they will likely use the same set of colors and maybe other features such as symbols. Or you might use multiple artboards of the same size to prepare a prototype of a mobile app that shows different states of user interaction. Here, dozens of artboards might be helpful. Again, this project has common document properties that apply to all artboards, such as RGB color and pixels as the unit of measurement. To help you get your money’s worth out of artboards, I first review some basic rules for creating and using them. Then I walk you through the two scenarios I just identified—print project and app prototype—to help you understand the efficacy of artboards and to expose you to key techniques for deploying artboards. What are artboards? You can have 1 to 1000 artboards per document. I’ve never used 1,000 artboards in a project, but it’s nice to know they’re there if I need them. As I explain in the beginning of this chapter, you can set the number of artboards for a document when you first create it, but you can also add and remove artboards after you begin work on a document. The Artboard tool is part of the Basic toolset. You create artboards in a document by selecting the Artboard tool and drawing interactively on the canvas, as shown. Or you can generate an artboard by clicking the New Artboard icon in the Artboard pane or the Control (or Properties) panel. The Artboard Options dialog shown here opens. Generating an artboard allows you to name the artboard as you create it, along with defining the dimensions and location digitally. You can manage artboards in many ways. The following shows you how to define and take advantage of the artboard options I think you’ll find helpful in organizing and sharing projects. To change artboard sizes in Illustrator or move an artboard interactively, follow these steps: 1. With the Artboard tool, click once inside the artboard. 2. Drag to move the artboard, as shown. 3. Click and drag on a side or corner (square-shaped) bounding box to resize the artboard, as shown. You can change any artboard property by using the Control or Properties panel: The Presets drop-down provides quick access to commonly used sizes. My favorite feature here is the Fit to Artwork Bounds option, which resizes the selected artboard to shrink in size to where it just fits around all the artwork within it. By sizing an artboard to an exact fit around its content, you avoid exporting or printing blank space in your graphic. The Name box is the easiest way to change the selected artboard name. The Move/Copy Artwork with Artboard option is on by default but can be turned off if you want to move an artboard while leaving the content where it is. The Artboard Options box opens a dialog with options that apply to all selected artboards in a document. I find the Show Center Mark useful when centering content in an artboard. You can use this dialog also to rename multiple selected artboards with sequential numbering. For example, if I rename a bunch of selected artboards DK, I end up with DK-1, DK-2, DK-3, and so on. The X value in the Control panel defines the vertical location; the Y value defines the horizontal location. The Width and Height values resize the artboard. Use the lock icon to lock the height-to-width aspect ratio while you resize. The Rearrange All icon opens up a panel with different options for arranging your artboards in an orderly way on the canvas. A couple of other artboard essential tips: To hide all objects that are not within an artboard, choose View-->Trim. To delete an artboard, select it with the Artboard tool and click Delete. Using artboards for a multidimensional project Let me illustrate a basic but typical multi-artboard workflow: one where you create different versions of the same graphic but with different dimensions. In doing that, I share some techniques and approaches you can apply to your own particular needs. Suppose that you are tasked with designing an ad that will run in different social media platforms and in different orientations: square, horizontal (landscape), and portrait (vertical). The ad must have the same basic content but fit the following size specs: Square: 1080 pixels Vertical: 1080 pixels wide by 1350 pixels high Horizontal: 1200 pixels by 628 pixels The following steps are an efficient way to set up the artboards for this project: 1. Create a new document with one 1080 px square artboard, as shown. a. Choose File→New, and bypass the New Document dialog by clicking More Settings. The More Settings dialog appears. b. Name the project Ads. c. In the Profile drop-down, choose Web. d. In the Number of Artboards box, enter 3. e. Set the artboard arrangement to Arrange by Row (the third icon). f. In the Height and Width boxes, enter 1080. The Units setting will default to Pixels, and the Color Mode to RGB. These and other defaults are fine. g.Click Create New Document. 2. Name the three artboards Square, Vertical, and Horizontal: a. If the Artboards panel is not displayed, choose Window→Artboards. b. Double-click the name of Artboard 1 and type Square. In the same way, rename the second artboard Vertical and the third artboard Horizontal. c. Choose View→Fit All In Window to see all three artboards, as shown. 3. Resize the Vertical and Horizontal artboards: a. In the Artboard panel, double-click the icon to the right of the artboard named Vertical. In the Control panel that appears, change the height to 1350 px and click OK. b. In a similar way, change the dimensions of the Horizontal artboard to 1200 pixels wide by 628 pixels high. 4. Arrange the artboards to create a more coherent display: a. Click Rearrange All Artboards in the Control panel. The Rearrange All Artboards dialog opens. b. Keep the Arrange by Row layout and the left-to-right Layout Order settings you defined when you created the document. Leave the spacing set to 20 pixels, and leave Move Artwork with Artboards selected, as shown, then click OK. This step keeps the basic layout structure in place, but resets the spacing between the resized artboards so they don’t overlap. 5. Design your ad on one of the artboards. 6. Copy the first ad content to the other artboards: a. Use the Selection or Direct Selection tool to select all the content in the first artboard, the one with the content. b. Choose Edit→Cut. c. Choose Edit→Paste on All Artboards. The Paste on All Artboards technique pays for itself when you're working with dozens or even hundreds of artboards! Of course, the pasted artwork doesn’t fit properly in differently sized artboards. Fixing that is the last step. 7. Edit the design of the horizontal and vertical artboards to make the square content fit, as shown. What do you do with a set of artboards? They are automatically saved as part of your Illustrator document. After that, you can export one, some, or all of them for screen or print output.

Article / Updated 03-15-2020

The first step in doing anything in Adobe Illustrator is to create a document. But right away you are confronted with important initial choices. Why? Essentially because Illustrator graphics can take two pathways: print, and screen. The way colors are defined and objects are measured varies greatly between these two paths. Am I saying that when you conceive of a project you need to know whether or not the output is aimed at print output or screen output or both? Basically, yes. Although you can change horses in the middle of the stream, you might create unnecessary complications in sizing and coloring objects. It's best to anticipate the output, and—to repeat my mantra—working backward from there. How to make basic choices for an Illustrator document Shortly I walk you through my curated set of options for creating a document, but all the options boil down to three essential choices: color mode, units of measurement, and dimensions: Print color or web color: Projects destined for commercial printing should probably be created with CMYK color. That said, even high-quality personal printers, and some commercial print workflows, accept or prefer RGB color. CMYK (cyan, magenta, yellow, and black) is referred to as subtractive color because these four colors are printed on top of each other to create a full range of colors. RGB (red, green, blue) is referred to as additive color because red, green, and blue dots of varying intensity are combined on a screen to generate a spectrum of color. Units of measurement: You use pixels for web and other increments (such as inches, centimeters, or points) for print projects. Dimensions (height and width): Because vector graphics are infinitely scalable, sometimes dimensions are not that relevant. But when illustrations are aimed at a specific device with a set width and height (such as a mobile phone app), viewport (a defined website width), or print output (such as a poster or postcard), you want to define an artboard (or multiple artboards) that match those dimensions. Artboards are defined spaces in the Illustrator canvas that can be easily shared for print or screens. Using document presets in Illustrator Illustrator comes loaded with document presets. You access these presets by clicking the Create New button in the opening Illustrator screen, or by choosing File→New. Those presets are grouped into the tabs shown here: Recent, Saved, Mobile, Web, Print, Film & Video, and Art & Illustration. The tabs at the top of the screen provide access to the different categories. After you select a category, the opening screen displays both presets and templates (more developed projects that you can customize). The View all Presets link pushes the templates down the screen and displays all the available presets. The following figure shows presets available in the Mobile tab of the New Document dialog, as well as the Preset Details panel on the right, which displays (and can be used to configure) basic color mode, dimension, and print settings. Presets are handy time-savers. And most of them are pretty self-explanatory: The Recent tab shows presets and custom document configurations you’ve used recently, and the other presets are organized by output. They provide instant access to color mode, units of measurement, and dimensions for different kinds of projects, as well as more detailed options (such as printer-only features) applicable to specific media. I think most readers will find adding profiles to the Saved tab in the New Document dialog to be more hassle than it is worth. But if you have a need to create saved profiles, and you are fluent in navigating hidden system folders, you can save new profiles. To save a new profile on a Mac, save a blank document with the appropriate settings to the New Document Profiles folder in this path: Users→Library→Application Support→Adobe→Adobe Illustrator 23→[your language]→New Document Profiles. To save a new profile in Windows, save a blank document with appropriate settings to the New Document Profiles folder in this page: Users→AppData→Roaming→Adobe→Adobe Illustrator 23→[your language]→x64→New Document Profiles. My preferred work-around for custom presets is to simply create blank documents with settings I need, and save them as an Illustrator document that I can edit and resave with new filenames. Define color mode, artboard size, and raster resolution Although the presets are nice, they don’t match every project you will do. So you need to know how to configure document features by hand. To define document color mode, units of measurement, dimensions, and other details, click the More Settings button. This opens the More Settings dialog, revealing the full set of options for new documents. The essential document setting options are as follows: Name defines the default filename when you save or export the entire document. Profile can shortcut the process of defining document settings by letting you choose or change the kind of document you are creating. Number of artboards defines how many artboards of the defined size will be generated. The set of diagrams to the right of the number of artboards defines how the artboards will be arranged. The Spacing drop-down configures the space between each artboard on the canvas, and the Rows/Columns spinner defines the number of rows or columns that will display artboards. Size drop-down options can shortcut the process of defining the width and height for your document. The options depend on the profile you selected. For example, if you choose a print profile, sizes include A4, a Letter, or a Tabloid, among others. If you choose Mobile profile, the options include iPad, Apple Watch, and Google pixel. Width and Height boxes define the width and height of your project. If you are generating multiple artboards, all the artboards will inherit this width and height. The Orientation options toggle between portrait and landscape orientation. Units is where you choose a unit of measurement appropriate to your project: pixels for digital output or points, picas, inches, millimeters, or centimeters for print. Bleed is relevant only for files sent directly to print production, such as postcards, posters, or other print media (for example, shirts or mugs). If you're preparing graphics to send directly to a print shop, consult with the printer on what kind of bleed to define, if any. Color Mode options are RGB for screen output and CMYK for commercial printing. Raster Effects settings define the resolution of bitmap effects (such as Photoshop Effects) applied to your illustration. Preview mode is normally left at the default setting. The Overprint option allows you to preview how commercial print output will look. Consult with your commercial printer on if, when, and how to use this options. After you configure document settings, click Create Document. What if you change your mind about a document setting? You can change settings at any stage of a project by choosing File→Document Color Settings (for color mode) or File→Document Setup (for everything else including units of measurement).

Article / Updated 03-15-2020

What if you need some help choosing colors in Adobe Illustrator CC? Illustrator has a couple of panels that can assist you in how to add color to images: the Color Guide panel and the Color Themes panel. Getting color advice The Color Guide panel generates a set of color swatches that go well with a base color that you define. That set of colors adjusts, chameleon-like, as you add (or delete) colors from your illustration. As you assign new colors, the Color Guide panel changes. To view the Color Guide panel, choose Window→Color Guide. The drop-down menu at the top of the panel, shown in the following figure, presents different color groups generated using different harmony rules—ways of generating complementary colors to the set of selected colors based on applying different mathematical calculations to numeric representations of colors. The Color Guide panel menu provides micro-control over what colors are displayed, as well as options for saving sets of generated colors: Students of color theory will find the Edit Colors menu option in the Color Guide panel helpful. Choosing this option displays a window where you can dynamically adjust the way colors are generated for the Color Guide, as shown. The Save Color Group to Swatch Panel tool adds the set of colors at the top of the Color Guide to the document Swatch panel. This panel is saved along with the document. The Color Guide Options dialog lets you constrain how many colors are generated in the Color Guide, and how closely they match colors used in the open document. Styling with Adobe Color themes Illustrator’s Color Themes panel integrates Adobe Color, the free-to-anyone tool for generating color schemes that is high on my list of free online graphic design tools. Adobe Color gives you access to searchable shared color schemes and makes it easy to create your own color sets, including from uploaded photos. Anyone can use it—and again, it’s free! But if you do license Adobe Illustrator CC in any form, you can log into Adobe Color and save color schemes. (To save color schemes, you need a subscription to Adobe CC.) Adobe Color is both a full-fledged app in its own right and intuitive, so I won’t document how it works here. I think you can explore it thoroughly on your own. After you create color schemes in Adobe Color, you can access those themes (as well as create your own or used shared themes) by choosing Window→Color Themes. Here are some ways in which you can avail yourself of the creative power of Adobe Color: To use Adobe Color from Illustrator to create new themes, click the Create tab in the Adobe Color Themes panel. To use shared themes, click the Explore tab. To access saved color themes, choose Windows→Color Themes and choose the My Themes tab. To access a shared theme, click the Explore tab. If you add a theme in Color Themes after you launch Illustrator, refresh the browser window running Adobe to update and add the latest theme(s). To use a somewhat truncated interface to create a new theme, select the Create tab. (However, creating new themes is more easily managed by using the full online version of Adobe Color.) After you find a theme or themes you want to use for your illustration, use the following techniques to apply colors from a theme in the Explore or My Themes tab to objects in a document: To apply a color from a theme to a selected fill, target a fill in the Control panel or Tools panel and then click the color in the Adobe Custom Themes panel (the My Themes tab). In the following figure, I’m applying a fill from my Stuffed Animals theme. To apply a color from a theme to a selected stroke, target a stroke in the Control panel or Tools panel and then click the color in the Adobe Custom Themes panel (the My Themes tab). In the following figure, I’m applying a fill from a shared color theme. To add colors in the Adobe Color Themes panel to your document’s Swatch panel, click the ellipses under a theme to open a pop-up menu and choose Add to Swatches, as shown. To add a single color (or selected colors) from a theme available in your Illustrator document, click the color to make it active and drag it from the Tools, Properties, or Control panel to the Swatches panel, as shown.