Adobe Illustrator CC Classroom in a Book 2015 release (2016)

15. Preparing Content for the Web

Lesson overview

In this lesson, you’ll learn how to do the following:

• Align content to the pixel grid.

• Work with the Slice and Slice Selection tools.

• Use the Save For Web command.

• Generate, export, and copy/paste CSS (Cascading Style Sheets) code.

• Save artwork as SVG.

Image

This lesson takes approximately 30 minutes to complete.

Download the project files for this lesson from the Lesson & Update Files tab on your Account page at www.peachpit.com and store them on your computer in a convenient location, as described in the “Getting Started” section of this book.

Your Account page is also where you’ll find any updates to the chapters or to the lesson files. Look on the Lesson & Update Files tab to access the most current content.

Image

You can optimize your Illustrator CC content for use on the web and in screen presentations using various methods. For example, you can slice artwork and save it for the web, export CSS and image files, and generate SVG (Scalable Vector Graphics) in the form of an SVG file or SVG code.

Getting started

Before you begin, restore the default preferences for Adobe Illustrator CC.

1. To ensure that the tools and panels function exactly as described in this lesson, delete or deactivate (by renaming) the Adobe Illustrator CC preferences file. See “Restoring default preferences” in the “Getting Started” section at the beginning of the book.


Image Note

If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See the “Getting Started” section at the beginning of this book.


2. Start Adobe Illustrator CC.

3. Choose File > Open. In the Open dialog box, navigate to the Lessons > Lesson15 folder. Select the L15_start.ai file, and click Open. This lesson contains a fictitious business name, address, and website address for the purposes of the project.

4. The Missing Fonts dialog box will most likely appear. Click Sync Fonts to sync all the missing fonts to your computer (your list may not match the figure). After they are synced and you see the message stating that there are no more missing fonts, click Close.

Image

If you can’t get the fonts to sync (a “Syncing Typekit fonts...” message doesn’t go away), you can go to the Creative Cloud desktop application and choose Assets > Fonts to see what the issue may be (refer to the section “Changing font family and font style” in Lesson 8, “Adding Type to a Poster,” for more information on how to resolve it).

You can also just click Close in the Missing Fonts dialog box and ignore the missing fonts as you proceed. A third method is to click the Find Fonts button in the Missing Fonts dialog box and replace the fonts with a local font on your machine.

5. Choose Window > Workspace > Reset Essentials to ensure that the workspace is set to the default settings.


Image Note

If you don’t see Reset Essentials in the Workspace menu, choose Window > Workspace > Essentials before choosing Window > Workspace > Reset Essentials.



Image Note

If you see a warning dialog box referring to spot colors, just click Continue.


6. Choose View > Fit Artboard In Window.

Image

7. Choose File > Save As. In the Save As dialog box, navigate to the Lessons > Lesson15 folder, and name the file WebDesign.ai. Leave the Format option set to Adobe Illustrator (ai) (Mac OS) or the Save As Type option set to Adobe Illustrator (*.AI) (Windows), and then click Save. In the Illustrator Options dialog box, leave the Illustrator options at their default settings, and then click OK.

8. Choose Select > Deselect, if necessary.

Saving content for the web

Using Illustrator CC, you can save your artwork for the web using a variety of methods and formats. If you need web images for use in a website or an onscreen presentation, you can use the File > Save For Web command. Images can be saved in several file formats, such as GIF, JPEG, and PNG. These three formats are optimized for use on the web and are compatible with most browsers, yet each has different capabilities.


Image Tip

To learn more about working with web graphics, search for “File formats for exporting artwork” in Illustrator Help (Help > Illustrator Help).


If you are building a website or want to hand off content to a developer, you can transform the visual designs in Illustrator to CSS styles using the CSS Properties panel (Window > CSS Properties) or File > Export command. Illustrator allows you to easily export CSS or copy and paste CSS from Illustrator into your HTML editor. You can also export Scalable Vector Graphics (SVG) using a variety of methods.

In the first part of the section on creating web content, you will focus on the pixel grid and on slicing content for export using the Save For Web command. Then you will translate your design into CSS for use in a website.

Aligning content to the pixel grid

Before you save content for the web, it’s important to understand the pixel grid in Illustrator. It’s critical that raster images look sharp, especially standard web graphics at 72 pixels per inch (PPI) resolution. To enable web designers to create pixel-accurate designs, you can align artwork to the pixel grid. The pixel grid is a grid of 72 squares per inch, vertically and horizontally, that is viewable when you zoom to 600% or higher with Pixel Preview mode enabled (View > Pixel Preview).


Image Tip

To learn about working with text and anti-aliasing, see the PDF named “TextAntiAliasing.pdf” in the Lessons > Lesson_extras folder.


When the pixel-aligned property is enabled for an object, all the horizontal and vertical segments in the object get aligned to the pixel grid, which makes strokes appear especially crisp. When you create a new document, you can set the Align New Objects To Pixel Grid option at the document level. This makes all artwork that can be aligned to the pixel grid (this does not include Live Shapes such as rectangles) align to it automatically. You can also align content to the pixel grid after the content has been created, as you will do in this section.

1. Choose File > New. In the New Document dialog box, choose Web from the Profile menu. Click the triangle to the left of the word “Advanced,” toward the lower-left corner of the dialog box.

Image

In the Advanced settings, you can see that Color Mode is RGB for all artwork you create, Raster Effects is Screen (72 ppi), and Align New Objects To Pixel Grid is selected.

2. Click Cancel.

3. In the WebDesign.ai file, choose File > Document Color Mode, and you will see that RGB Color is selected.

After you create a document, you can change the document color mode. This sets the default color mode for all new colors you create and the existing swatches. RGB is the correct color mode to use when creating content for the web or for onscreen presentations.

4. Select the Zoom tool (Image), and zoom in to the cup icon with the word “Accessories” beneath it, roughly in the middle of the artboard, to zoom in closely.

5. Choose View > Pixel Preview to preview a rasterized version of the design.

Image

6. Choose 600% from the View menu in the lower-left corner of the Document window (in the Status bar), and make sure you can still see the cup icon above the “Accessories” text.

Image


Image Tip

You can turn off the pixel grid by choosing Illustrator CC > Preferences > Guides & Grid (Mac OS) or Edit > Preferences > Guides & Grid (Windows) and deselecting Show Pixel Grid (Above 600% Zoom).


By zooming in to at least 600%, and with Pixel Preview turned on, you can see a pixel grid appear, as in the figure. The pixel grid divides the artboard into 1 pt. (1/72-inch) increments. For the next steps, you need to see the pixel grid (zoom level of 600% or greater).

7. Select the Selection tool (Image), and click to select the larger white shape that is part of the cup. Notice that the straight edges of the shape look a little “fuzzy.”

Image

8. Click the word “Transform” (or X, Y, W, or H) in the Control panel, and select Align To Pixel Grid at the bottom of the Transform panel.

Image


Image Tip

You can choose Select > Object > Not Aligned To Pixel Grid to select all artwork in the document that is eligible to be, but is not currently, aligned to the pixel grid. You can then select Align To Pixel Grid in the Transform panel. Be careful! If you align text that has been converted to outlines, the text can change appearance in ways you didn’t intend.


Objects that are pixel-aligned but do not have any straight vertical or horizontal segments, are not modified to align to the pixel grid. For example, because a rotated rectangle does not have straight vertical or horizontal segments, it is not nudged to produce crisp paths when the pixel-aligned property is set for it.

9. Choose View > Fit Artboard In Window.

Notice that the entire artboard is not fit in the window. This is because Pixel Preview is on and you are viewing the artwork at 100%.

10. Click the word “Transform” (or X, Y, W, or H) in the Control panel, and then click the Transform panel menu icon (Image).

Image

Notice that Align New Objects To Pixel Grid is selected. This option sets all new artwork to be aligned to the pixel grid automatically. If this document were created using a Print profile, it would not be selected, but you could turn it on here. Bringing nonaligned objects into documents with the Align New Objects To Pixel Grid option enabled does not automatically pixel-align those objects. To make such objects pixel-aligned, select the object, and then select the Align To Pixel Grid option from the Transform panel. You cannot pixel-align objects such as Live Shapes, rasters, raster effects, and text objects because such objects do not have real paths.

11. Press the Escape key to hide the Transform panel.

12. Choose Select > Deselect (if available), and then choose File > Save.

Slicing content

If you create artwork on an artboard and choose File > Save For Web, Illustrator creates a single image file the size of the artboard. One way around that would be to create multiple artboards for artwork, each containing a piece of the web page like a button, and save each artboard as a separate image file.


Image Note

To learn more about creating slices, search for “Create slices” in Adobe Illustrator Help (Help > Illustrator Help).


You can also design your artwork on an artboard and slice the content. In Illustrator, you can create slices to define the boundaries of different web elements in your artwork. For example, if you design an entire web page on an artboard and you want to save a particular vector shape as a button for your website, that artwork can be optimized in GIF or PNG format, while the rest of the image is optimized as a JPEG file. You can isolate the button image by creating a slice. When you save the artwork as a web page using the Save For Web command, you can choose to save each slice as an independent file with its own format and settings.

Next, you will create a new layer that will contain the slices, and then you will create slices for different parts of the artwork.

1. Click the Layers panel icon (Image) to open the Layers panel. Option-click (Mac OS) or Alt-click (Windows) the Create New Layer button (Image) at the bottom of the Layers panel. In the Layer Options dialog box that appears, change the name of the layer to Slices, and click OK. Make sure that the new Slices layer is selected and is at the top of the layer stack.

Image


Image Note

To learn more about creating layers, see the section “Creating layers and sublayers” in Lesson 9, “Organizing Your Artwork with Layers.”


When you create slices, they are treated as objects and are listed in the Layers panel and can be selected, deleted, resized, and more. It helps to keep them on their own layer so that you can more easily manage them, but this isn’t necessary.

2. Press Command+– (Mac OS) or Ctrl+– (Windows) to zoom out.

3. Select the Zoom tool (Image), and drag a marquee around the Pluralist logo at the top of the artboard.

4. Select the Slice tool (Image) in the Tools panel. Click and drag a slice around the logo. See the figure for help. Don’t worry about it fitting perfectly right now; you will edit it later.

Image

When you create a slice, Illustrator divides the surrounding artwork into automatic slices to maintain the layout of the page. Auto slices account for the areas of your artwork that you did not define as a slice. Illustrator regenerates auto slices every time you add or edit your own slices. Also, notice the number in the upper-left corner of the slice you created. Illustrator numbers slices from left to right and from top to bottom, beginning in the upper-left corner of the artwork.

5. Choose View > Fit Artboard In Window.

6. With the Selection tool (Image) selected, click the sailing ship in the middle of the artboard.

7. In the Layers panel, select the Slices layer to ensure that the new slice is on it.

8. Choose Object > Slice > Create From Selection.

This is another way to make a slice from existing content. Take a look at the Object > Slice menu because there are a lot of great commands in there.

Image

9. Choose Select > Deselect.

Selecting and editing slices

Editing user-created slices is necessary, for instance, when sliced content changes or when what is included in the slice needs to change.

1. Press Command+– (Mac OS) or Ctrl+– (Windows) to zoom out. Select the Zoom tool (Image), and zoom in to the Pluralist logo at the top of the artboard.

2. Select the Slice Selection tool (Image) from the Slice tool group in the Tools panel by clicking and holding down the Slice tool (Image).

3. Click in the center of the slice over the Pluralist logo. The selected slice is highlighted, and four corner bounding points appear.

The Slice Selection tool allows you to edit slices you’ve created using different methods. You can also select a user slice with the Selection (Image) or Direct Selection (Image) tools by clicking the stroke (edge) of the slice or from within the Layers panel.

4. Position the pointer over the lower-right corner of the selected slice. When a double arrow appears, click and drag toward the center of the logo until it fits tighter around the logo content. Make sure to include all of the logo content within the slice area.

Image

5. Position the pointer over the left side of the selected slice. When a double arrow appears, click and drag right a bit closer to the edge of the logo.

Image

When adjusting slices manually, you should include all appearance attributes, such as drop shadows, in the slice area. This can be difficult if the shadow is blurry. Using the Object > Slice > Create From Selection command creates a slice that surrounds all appearance properties, such as effects, if those effects are applied directly to the artwork and not to the layer the artwork is on (with multiple objects on the same layer). Using the Slice Selection tool, you can click and drag a slice, copy and paste it, delete it, and much more.

6. Try adjusting the other sides of the slice so that they are closer to the logo.

You want to ensure that the artwork and effects such as drop shadows are contained within slices so they will not appear to be cut off when the image is later optimized.

7. Choose Select > Deselect.

8. Choose View > Lock Slices so that you cannot select them.

Using the Save For Web command

After slicing your artwork, if necessary, you can then optimize that artwork for use on the web. You can use the File > Save For Web command to select optimization options and to preview optimized artwork. The key to the effective use of images on a website is finding the balance of resolution, size, and color to achieve optimal quality.

1. Choose View > Hide Slices.

While working on your artwork, you don’t have to have the slices showing. This allows you to concentrate on selecting artwork without selecting slices. You can also hide the layer that the slices are on if you created a layer for them in the Layers panel.

2. Select the Selection tool (Image), and click the dark blue bar behind the logo.

3. Choose Object > Hide > Selection.

The logo will look like it has disappeared, but that’s because it’s white. When you save sliced content using the Save For Web command, all content that is showing in a slice will be flattened into a raster image. If you want to have transparency in the selected artwork (part of the image will be see-through), you need to first hide what you don’t want to save. The areas where you see the artboard in a slice can be transparent, depending on the type of image you choose.

4. Choose View > Show Slices.

Image


Image Note

To resize the slices, you need to make sure they are unlocked. Choose View > Lock Slices. (If a checkmark appears to the left of the menu item, they are locked.)


5. Choose File > Save For Web.

6. In the Save For Web dialog box, click the 2-Up tab at the top of the dialog box to select that display option, if it’s not already selected.

Image

This shows a split window with the original artwork on the left and the optimized artwork on the right (usually). You can tell which is the original artwork because it shows “Original: ‘WebDesign.ai’” along with a file size below one of the preview areas. The optimized preview shows a file type such as PNG-24 and a file size below the preview area.

7. With the Slice Select tool (Image) selected (by default), click in the optimized area on the right. Click to select the slice that covers the Pluralist logo at the top of the artboard, if it isn’t selected already. A red arrow is pointing to it in the figure.

Image


Image Note

You may need to choose Fit On Screen from the View menu in the lower-left corner of the dialog box to see all of the artwork.


You can tell when a slice is selected because the artwork isn’t dimmed and it has a light brown border around it.

8. In the Preset area on the right side of the dialog box, choose PNG-24 from the Optimized File Format menu (below Name), if it isn’t already selected. Make sure the Transparency option is selected (below the Optimized File Format menu).

Image

You can choose from four file formats, including GIF, JPEG, PNG-8, and PNG-24, as well as set the options for each in the Preset area. The available options change depending on the file format you select. If your image contains multiple slices that you are going to save, be sure to select each separately in the preview area and optimize all the slices.

9. Choose Selected Slices from the Export menu, if necessary.

Image

Any slices that you select in the Save For Web dialog box will be exported. You can select multiple slices, after you’ve assigned optimization settings to them, by Shift-clicking the desired slices. By choosing All User Slices from the Export menu, all slices that you created will be exported.

10. Click the Preview button in the lower-left corner of the dialog box to launch the default web browser on your computer and to preview the sliced content. After previewing the content, close the browser, and return to Illustrator.


Image Note

If nothing happens after clicking the Preview button, try clicking again. You may also need to click the Select Browser Menu button (Image) to the right of the Preview button and choose Edit List to add a new browser.


11. In the Save For Web dialog box, click Save. In the Save Optimized As dialog box, navigate to the Lessons > Lesson15 folder, and open it. Change the name to Logo.png, and click Save.

Image


Image Tip

In the Save For Web dialog box, the Done button will save the optimization settings with the file, without actually generating any images. The Cancel button will not save the settings or generate images.


In your Lesson15 folder is a new images folder that Illustrator created. In that folder, you can see the single image that is labeled according to the name entered in the Save Optimized As dialog box, with the slice number appended to the end.

12. Choose View > Hide Slices.

13. Choose Object > Show All.

14. Choose Select > Deselect, and then choose File > Save.

Creating CSS code

As mentioned earlier, you can transform the visual designs in Illustrator to CSS styles using the CSS Properties panel (Window > CSS Properties) or the File > Export command. This is a great way to move the styling from your web design in Illustrator straight to your HTML editor or to hand it off to a web developer.


Image Note

Exporting or copying CSS from Illustrator CC does not create HTML for a web page. It is intended to create CSS that is applied to HTML you create elsewhere, such as in Adobe Dreamweaver®.


Cascading Style Sheets are a collection of formatting rules, much like paragraph and character styles in Illustrator, that control the appearance of content in a web page. Unlike paragraph and character styles in Illustrator, CSS can control not only the look and feel of text but also the formatting and positioning of page elements found in HTML.

Image

An example of CSS code


Image Note

To learn more about CSS, visit the “Understanding Cascading Style Sheets” section of Adobe Dreamweaver Help (https://helpx.adobe.com/dreamweaver/using/cascading-style-sheets.html).


The great thing about generating CSS from your Illustrator artwork is that it allows for flexible web workflows. You can export all of the styling from a document, or you can just copy the styling code for a single object or a series of objects and paste it into an external web editor, like Adobe Dreamweaver. But creating CSS styling and using it effectively requires a bit of setup in your Illustrator CC document, and that’s what you’ll learn about first.

Setting up your design for generating CSS

If you intend to export or copy and paste CSS from Illustrator CC, slicing is not a necessary part of that process, but setting up the Illustrator CC file properly before creating CSS allows you to name the CSS styles that are generated. In this section, you’ll look at the CSS Properties panel and see how you can set up the content for style export using named or unnamed content.

1. Choose View > Fit Artboard In Window, and then press Command+– (Mac OS) or Ctrl+– (Windows) to zoom out.

2. Choose Window > Workspace > Reset Essentials.

3. Choose Window > CSS Properties to open the CSS Properties panel.

Image


Image Note

The CSS Properties panel shown here is an example and will not reflect exactly what you see in your panel.


Using the CSS Properties panel, you can do the following:

• Preview CSS code for selected objects.

• Copy CSS code for selected objects.

• Export generated styling for selected objects to a CSS file (along with any images used).

• Change options for the CSS code exported.

• Export the CSS for all objects to a CSS file.

4. With the Selection tool (Image) selected, click to select the blue rectangle behind the navigation and logo at the top of the artboard (see the following figure).

Take a look in the CSS Properties panel, and you will see that a message appears in the preview area. Instead of CSS code (which is what the preview area typically shows), the message states that the object needs to be named in the Layers panel or you need to allow Illustrator to create styling from “unnamed objects.”

Image

5. Open the Layers panel, and click the Locate Object button (Image) at the bottom of the panel to easily find the selected object in the panel.

Image


Image Note

You may need to drag the left edge of the Layers panel to the left to see the entire name of the object.


6. Double-click the name of the selected <Rectangle> object in the Layers panel, and change the name to navbar (lowercase). Press Enter or Return to make the change.

7. Look in the CSS Properties panel again, and you should see a style named .navbar.

When content is unnamed in the Layers panel, a CSS style is not created for it by default. If you name the object in the Layers panel, the CSS is generated, and the name of the style created matches the object name in the Layers panel. Illustrator creates styles called classes for most content.

Image


Image Note

If you see a style named “.navbar_1_,” it’s usually because there is an extra space after the name “navbar” in the Layers panel.



Image Tip

You can tell a style is a class in CSS because the name has a period (.) before it.


For objects in the design (not including text objects, as you will see), the name you give them in the Layers panel should match the class name in the HTML that is created in a separate HTML editor, like Dreamweaver. But, you can also forgo naming the objects in the Layers panel and simply create generic styles that you can then export or paste into an HTML editor and name there. You will see how to do that next.

8. With the Selection tool, click to select the brown circle behind the cup you aligned to the pixel grid earlier. In the CSS Properties panel, a style will not appear since the object is unnamed in the Layers panel (it just has the generic <Path> name).

Image

9. Click the Export Options button (Image) at the bottom of the CSS Properties panel.

The CSS Export Options dialog box that appears contains export options that you can set, such as which units to use, which properties to include in the styles, and other options, such as which Vendor prefixes to include.

10. Select Generate CSS For Unnamed Objects, and click OK.

Image

11. Look in the CSS Properties panel again. With the brown circle still selected, a style called .st0 appears in the preview area of the CSS Properties panel.

Image


Image Note

I dragged the bottom of the panel down to see more of the CSS.


.st0 is short for “style 0” and is a generic name for the formatting that is generated. Every object that you don’t name in the Layers panel will now be named .st1, .st2, and so on, after turning on Generate CSS For Unnamed Objects. This type of style naming can be useful if, for instance, you are creating the web page yourself and you are going to paste or export the CSS from Illustrator and name it in your HTML editor or if you simply needed some of the CSS formatting for a style you already have in your HTML editor.

12. Choose Select > Deselect, and then choose File > Save.

Working with character styles and CSS code

Illustrator will create CSS styles based on text formatting, as well. Formatting, such as font family, font size, leading (called line-height in CSS), color, kerning and tracking (collectively called letter-spacing in CSS), and more, can be captured in the CSS code. Any character styles that are applied to text in your design are listed in the CSS Properties panel as a CSS style and have the same name as the character style. Text that has formatting applied, without a character style applied, will have a generic CSS style name when Illustrator generates the style.


Image Note

Currently, paragraph styles are not taken into account when naming styles in the CSS code that is generated.


Next, you will create and then apply a character style to text.

1. In the CSS Properties panel, notice the style named [Normal Character Style], toward the top of the panel.

In the CSS Properties panel, only character styles that are applied to text appear. The Normal Character Style is applied to text by default, so it appears in the panel. If you create character styles but don’t apply them to text, they will not appear in the CSS Properties panel.

2. Choose Window > Type > Character Styles to open the Character Styles panel.

3. Select the Zoom tool and zoom into the text on the left end of the footer. Specifically the text with the heading “BRAND.”

4. Select the Type tool (Image) in the Tools panel. Select the entire paragraph that begins with “The Pluralist is a lifestyle brand...”

5. Option-click (Mac OS) or Alt-click (Windows) the style named “p” in the Character Styles panel to apply it to the selected text.

Image

6. Select the Selection tool (Image), and with the text object still selected, you will see the character style named “p” in the CSS Properties panel list. This indicates that it is applied to text in the design. You will also see CSS code in the preview area of the panel.

Image


Image Tip

You can also use the character styles listed in the CSS Properties panel as a way to apply the styles to text.


Selecting a text object will show all the generated CSS code for the styling used in the entire text area. With just the text selected, the CSS is not shown in the CSS Properties panel.

7. With the Selection tool, click the type object in the footer that contains the “Shopping” heading. Look in the CSS Properties panel, and you will see a series of CSS styles listed. These are the styles applied to all the text in the type area.

Selecting a type area gives you the ability to see all the CSS code generated from the styling. It is also a great way to be able to copy or export all the text formatting from a selected type area.

Image

Working with graphic styles and CSS code

CSS code can also be copied or exported for any graphic styles that are applied to content. Next, you’ll apply a graphic style and see the CSS code for it.

1. Scroll back up the artboard so that you can see the Ship and the “SAIL WITH A WHALE” text above the footer. With the Selection tool (Image), click to select the blue rectangle behind the ship. You may want to zoom out a bit.

2. Open the Graphic Styles panel (Window > Graphic Styles). Click the graphic style named “GradientBox.”

Image


Image Tip

Like selecting a character style in the CSS Properties panel to apply the formatting, you can also select content and select an Object style listed in the CSS Properties panel to apply it.


Looking in the CSS Properties panel, you will see the object style named “GradientBox” listed, because it is applied to content in your document.

You will also see CSS code for a style. Mine is named “.content_3_,” but yours may be different. The CSS code is the same as for the GradientBox graphic style you just saw since that graphic style is applied. But it’s not naming the style with the “GradientBox” name, since the graphic style is just a way to apply formatting and the CSS code is being generated for that particular object. Remember, this is an unnamed style because you didn’t rename the rectangle object in the Layers panel.

Image

3. Leave the rectangle selected, and then choose File > Save.

Copying CSS

At times, you may need to capture only a bit of CSS code from part of your design to paste into your HTML editor or to send to a web developer. Illustrator lets you copy and paste CSS code easily. Next, you will copy the CSS for a few objects and learn about how grouping can change the way CSS code is generated.

1. With the rectangle still selected, click the Copy Selected Style button (Image) at the bottom of the CSS Properties panel. This copies the CSS code currently showing in the panel.

Image


Image Note

You may see a yield sign icon (Image) at the bottom of the panel when certain content is selected. It indicates that not all of the Illustrator appearance attributes (such as the multiple strokes applied to the shape) can be written in the CSS code for the selected content.


Next, you will select multiple objects and copy the generated CSS code at the same time.

2. With the Selection tool (Image) selected and the rectangle still selected, Shift-click the brown circle to select both objects. Once again, you may need to zoom out a bit.

Image

In the CSS Properties panel, you will not see any CSS code since you need to have Illustrator generate the code for more than one selected object.

3. Click the Generate CSS button (Image) at the bottom of the panel.

Image


Image Tip

When CSS code appears in the CSS Properties panel for selected content, you can also select part of the code and right-click the selected code and then choose Copy to copy just that selection.


The code for two CSS styles, .st0 and .content_3_ (yours may be different), now appears in the bottom half of the CSS Properties panel. Your style names may be different, and that’s okay. To see both styles, you may need to scroll down in the panel. Yours may also be in a different order, and that’s okay.

With both styles showing in the CSS Properties panel, you could copy the styles and paste them into your HTML editor code or paste them into an email to send to a web developer, for instance.

4. With the Selection tool, click to select the ship.

In the CSS Properties panel, you will see CSS code for an .image style. That code contains a background-image property. When Illustrator encounters artwork (or raster images) that it can’t make CSS code from or a group of objects, it rasterizes the exported content (not the artwork on the artboard) when you export the CSS code. The CSS code that is generated can be applied to an HTML object, like a div, and the PNG image will be applied as a background image in the HTML object.

Image

5. Select the Zoom tool, and zoom into the cup and brown circle. Drag a marquee selection across the brown circle and cup shapes to select all of them.

6. Click the Generate CSS button (Image) at the bottom of the CSS Properties panel to generate the CSS code for the selected artwork.

Image

You will see the CSS code for all the selected objects in the panel. If you were to copy the CSS code now, the images would not be created, only the code referring to them. To generate the images, you need to export the code, which you will do in the next section.

7. Choose Object > Group to group the objects together. Leave the group selected for the next section.

Notice that, in the CSS Properties panel, a single CSS style is now showing (.image). Grouping content tells Illustrator to create a single image (in this case) from the grouped content. Having a single web image would most likely be better if you intend on placing it on a web page.

Exporting CSS

You can also export part or all of the CSS code for your page design. Exporting CSS code has the distinct advantages of creating a CSS file (.css) and exporting PNG files for content that is considered unsupported. In this section, you will see both methods.

1. With the group still selected, click the Export Selected CSS button (Image) at the bottom of the CSS Properties panel.

Image

2. In the Export CSS dialog box, make sure that the filename is WebDesign. Navigate to the Lessons > Lesson15 > ForCSSExport folder, and click Save to save a CSS file named WebDesign.css and a PNG image file.

3. In the CSS Export Options dialog box, leave all settings at default, and click OK.

Image


Image Tip

You can choose a resolution for rasterized artwork in the CSS Export Options dialog box. By default, it uses the Document Raster Effects resolution (Effect > Document Raster Effects Settings).


4. Go to the Lessons > Lesson15 > ForCSSExport folder on your hard drive. In that folder, you should now see the WebDesign.css file and an image named image.png.

As stated earlier, the CSS code that was generated assumes that you are going to apply the CSS styling to an object in your HTML editor and that the image will become a background image for the object. With the image generated, you can use it for other parts of your web page as well. Next, you will export all the CSS from the design, after setting a few CSS options.

5. Back in Illustrator, choose File > Export. In the Export dialog box, set the Format option to CSS (css) (Mac OS) or the Save As Type option to CSS (*.CSS) (Windows). Change the filename to WebDesign_all, and make sure that you navigate to the Lessons > Lesson15 > ForCSSExport folder. Click Export.


Image Note

You can also export all of the CSS from your design by choosing Export All from the CSS Properties panel. If you want to change the export options first, you can set them by clicking the Export Options button (Image) at the bottom of the CSS Properties dialog box.


6. In the CSS Export Options dialog box, leave all the options at their default settings, and click OK. You most likely will see a dialog box telling you that images will be overwritten. Click OK.

Position and size properties are not added to the CSS code by default. In certain situations, you will need to export CSS with those options selected. The Include Vendor Pre-fixes options are selected by default. Vendor prefixes are a way for certain browser makers (each is listed in the dialog box) to add support for new CSS features. You can choose to exclude these prefixes by deselecting them.

7. Go to the Lessons > Lesson15 > ForCSSExport folder, and you will see the new CSS file named WebDesign_all.css and a series of images created because the Rasterize Unsupported Art option was selected in the CSS Export Options dialog box.

Image


Image Note

Your file sorting and icons may look different in the ForCSSExport folder, and that’s okay.


8. Return to Illustrator, and choose Select > Deselect.

9. Close the CSS Properties panel, and choose Window > Workspace > Reset Essentials.

10. Choose File > Save (if necessary).

Saving artwork as SVG

SVG (Scalable Vector Graphics) are used to define vector-based graphics for the web that won’t lose quality if they are zoomed or resized, such as a logo. They are a vector format that describes images as shapes, paths, text, and filter effects. The resulting files are compact and provide high-quality graphics on the web, in print, and even on resource-constrained, handheld devices. Most major modern web browsers—such as Mozilla Firefox, Internet Explorer 9+, Google Chrome, Opera, and Safari—have at least some support for viewing SVG.

Illustrator allows you to select vector artwork, choose Edit > Copy, and then simply paste the SVG code that it generates into HTML in an HTML editor, or you can export or save as an SVG (.svg) file. In this section, you’ll export as SVG (.svg) and explore the SVG export options using the File > Export command.


Image Note

There are two methods in Illustrator for generating SVG. You can choose either File > Save As or File > Export. The Export option is what is covered in this section. If you choose File > Save As and choose SVG in the Save As dialog box, you will see in the SVG Options dialog box a message and a link indicating a more modern SVG export. Clicking the Try button will take you to another SVG Options dialog box found when you choose File > Export.


1. Choose View > Pixel Preview to turn off Pixel Preview.

2. Choose View > Fit Artboard In Window.

3. With the Selection tool (Image) selected, click the tent icon on the green circle in the center of the artboard. This selects a group of shapes.

4. Option-drag (Mac OS) or Alt-drag (Windows) a copy of the tent icon off the left edge of the artboard (outside of the artboard area).

Image

5. Choose Object > Artboards > Fit To Selected Art.

When saving artwork as SVG, the artboard size is important. Notice that the artboard is cropped very closely to the edges of the tent icon now. The artboard size will determine the dimensions of the SVG file just like it would in PNG or JPG. Since the Fit To Selected Art command simply resized and moved the one artboard in the document, you will need to undo this later or make a new artboard for the web design content.

Image

6. Choose File > Export. In the Export dialog box, set the following options:

• Choose SVG (svg) from the Format menu (Mac OS) or SVG (*.SVG) from the Save As Type menu (Windows).

• Name the file tent-icon.svg.

• Navigate to the Lessons > Lesson15 folder (if necessary).

Image

• Select Use Artboards and leave All selected. (There is only one artboard currently in the document, the size of the tent icon, so there is no need to select which artboard in the Export dialog box. If there were more than one artboard, you would need to select Range and type in the correct artboard number for your icon, in this case.)

7. Click Export.

In the Export dialog box, when you choose to export as SVG, by default the Use Artboards option is not selected. This means that all artwork (even if it’s outside of an artboard on the canvas), regardless of how many artboards in the document, will be saved in one SVG file. If you select Use Artboards and click Export without choosing which artboards, each artboard will be exported as a separate SVG file. By setting a range in the Export dialog box, you can determine which artboards are saved as separate SVG files. If you wanted to save a series of icons as SVG, for instance, you could create artboards for each and select Use Artboards to create a series of SVG files—one for each artboard.

8. The SVG Options dialog box will open. There are several options for creating the SVG, but the default settings work well most of the time.

Image


Image Tip

If you didn’t select the Use Artboards option in the Export dialog box, you could click the world icon at the bottom of the SVG Options dialog box to launch your default browser and view the SVG file. Similarly, if you wanted to see the actual SVG code that is created, you could click the Show Code button in the SVG Options dialog box to open the SVG content in an editor.


The SVG Options range from how styling for elements should be written in the code to how any fonts should be handled. To learn more about the SVG Options, search for “SVG” in Illustrator Help (Help > Illustrator Help).

9. Click OK in the SVG Options dialog box.

If you were to look in the Lessons > Lesson15 folder, you should see tent-icon-01.svg.

10. Choose Edit > Undo Fit Artboard To Selected Art to put the artboard back behind the main page design. You may need to undo several times.

11. Choose File > Close to close the WebDesign.ai file without saving.


Copy and paste from Illustrator

You can also select and copy artwork in Illustrator and then paste it into your favorite text editor (like Brackets) and SVG code will be generated and pasted. Instead of generating an SVG file, the code is pasted inline.

This can be useful if you want to edit the code yourself or even manipulate the contents with CSS or JavaScript.

Image



SVG and fonts

When it comes to fonts in artwork exported as SVG, you need to be careful. Not all browsers fully support all fonts used in your SVG file. It’s best to use a web-safe font or convert the fonts to outlines. Since converting fonts to outlines can increase file size greatly, best practice is to outline fonts only when you have a few words in the artwork, for instance. If you feel comfortable working with the generated SVG code and CSS, you can also create a reference to a hosted font, for instance, but that is beyond the scope of this section.

When you export as SVG (File > Export), in the SVG Options dialog box, there are two options for fonts: SVG and Convert To Outlines.

Image

SVG is the default option and is the format defined by the W3C (World Wide Web Consortium). The SVG option offers maximum support by SVG viewers, but the text may not be very refined. The second option, Convert To Outlines, can be useful if you want to convert your text content into SVG paths and ensure that the text looks like it did in Illustrator. This can be used, for instance, for an icon with a few characters in a word like “Home.” If you use more complex fonts, such as script fonts, the file size of your SVG file can increase greatly if you choose Convert To Outlines. Converting fonts to outline in SVG can also make the SVG file less accessible.


Review questions

1. Why do you align content to the pixel grid?

2. Name the three image file types that can be chosen in the Save For Web dialog box.

3. Describe the difference between named and unnamed content when it comes to generating CSS.

4. What is SVG, and why is it useful?

Review answers

1. Aligning content to the pixel grid is useful for providing a crisp appearance to the edges of artwork. When Align To Pixel Grid is enabled for supported artwork, all the horizontal and vertical segments in the object are aligned to the pixel grid.

2. The three image file types that can be chosen in the Save For Web dialog box are JPEG, GIF, and PNG. PNG has two versions: PNG-8 and PNG-24.

3. Named content is content whose layer name in the Layers panel has been changed. When content is unnamed in the Layers panel (the default layer name is used), a CSS style is not created for the content by default. If you name the object in the Layers panel, the CSS is generated, and the name of the style created matches the object name in the Layers panel. To generate CSS styles for unnamed content, you need to enable this in the CSS Export Options dialog box by clicking the Export Options button (Image) in the CSS Properties panel.

4. SVG, or Scalable Vector Graphics (SVG), is a file format that is used to define vector-based graphics for the web that won’t lose quality if they are zoomed or resized, such as a logo. The resulting files are compact and provide high-quality graphics on the web, in print, and even on resource-constrained, handheld devices.