1. Adobe Illustrator CC: The Professional Portfolio
Project 8:
Web Site Interface
Working with
color groups and
Live Color
Working with
Web Site design
elements
Exporting CSS
2. Adobe Illustrator CC: The Professional Portfolio
Color Groups
Swatches from panel
New swatches from selected artwork
4. Adobe Illustrator CC: The Professional Portfolio
Live Paint Groups
Live Paint Bucket tool
Click to split
overlapping objects
Fill with active color
Left/Right Arrow
keys navigate
color group
5. Adobe Illustrator CC: The Professional Portfolio
Align to Pixel Grid
View>Pixel
Preview
72 ppi resolution
preview
600%+ view
Transform panel
option
Especially evident
in straight lines
8. CSS Properties panel (cont.)
Tag selectors
Character styles
Adobe Illustrator CC: The Professional Portfolio
9. Exporting for Web
Document Raster Effects Settings
CSS Export Options
Adobe Illustrator CC: The Professional Portfolio
10. Exporting for Web
Document Raster Effects Settings
CSS Export Options
Adobe Illustrator CC: The Professional Portfolio
Editor's Notes
It is very common to create the look and feel of a Web site in Illustrator and then hand off the necessary pieces to a Web developer, who reassembles those pieces in an application such as Dreamweaver. We designed this project to reflect that workflow.
We also used this project to explore a number of additional productive and creative tools that are available in Illustrator. Although we can’t say that many projects will incorporate exactly this series of tools, we can say that many different projects will benefit from the skills you learn here.
Color groups are useful for organizing color swatches into logical and manageable collections. You can then make changes that affect all colors within a group, which takes the concept of global color swatches one step further.
You can create a new color group from existing swatches, or select artwork in the file and create a group with new swatches of colors that are applied in selected artwork. You can then click the Edit Color Group button to modify the swatches in the group.
Options in the Edit Color Group dialog box are the same as those in the Recolor Artwork dialog box. In fact, they are the same dialog box with a different title bar.
If necessary, you should refer back to Project 2 for more about the Recolor Art/Edit Color Group dialog box. (See Pages 110–113.)
Important note: If something is selected in the file when you open the Edit Color Group dialog box, you have the option to apply the selected group to the selected artwork. When Recolor Art is checked in the bottom-left corner of the dialog box, the edited group will be applied to the selected artwork; to leave selected artwork unchanged, you should uncheck this option.
A Live Paint Group is a special type of Illustrator group in which fills are not necessarily defined by object edges. Illustrator identifies overlapping areas and allows you to treat the separate areas as distinct objects, even though they are part of the same vector shape.
After you choose the Live Paint Bucket tool, you can select a specific color group in the Swatches panel. If you don’t choose a color group, the tool shows the default ungrouped swatches. The middle color in the cursor icon is the active one. Pressing the Left and Right arrow keys navigate through the colors in the selected group.
Clicking with the Live Paint Bucket tool converts the selected objects to a Live Paint Group, and fills the clicked area as identified by overlapping paths. You can also press Shift to paint the stroke of an object instead of the fill.
Keep in mind that moving objects in a Live Paint group is different than moving individual objects in a regular group. Illustrator recognizes the original placement of the fill color, almost as if there is an underlay of the fill color, and the “filled” object is revealing that area of the color. Moving the individual object changes which part of the color “underlay” is visible.
When you export CSS from Illustrator, any required raster images will automatically be generated during the export process. Aligning objects to the pixel grid helps to ensure the best possible results when you save images for the Web.
Choosing View>Pixel Preview shows the actual pixel grid at 600% view or higher. The grid represents 72-ppi resolution, so each square in the grid is 1/72 of an inch.
Objects will appear obviously bitmapped because you are viewing at such a high view percentage. However, you can see how the edges of shapes are defined by the position of pixels in the grid. This is an accurate representation of the pixel content that will exist in the final exported images.
When objects align to the pixel grid, straight lines reproduce more sharply because they no longer require anti-aliasing to fill the pixel grid. The shift in position is very, very slight — but it can make a significant difference in the sharpness of exported raster images.
When you create a new file, you can check the Align New Objects to Pixel Grid option in the New Document dialog box to automatically create new objects in alignment with the pixel grid.
Although you don’t need in-depth Web programming knowledge to design a web site interface in Illustrator, you do need to understand the basic principles behind exporting Illustrator files for Web display. The information on Pages 393-395 is a very basic explanation, but the terms and concepts will be vital to successfully using the Illustrator CSS Properties panel.
At the very least, you need to understand the following terms:
A tag identifies a specific page element on the HTML page. For example, a <div> tag identifies a division or area of the page, and a <p> tag identifies a paragraph of text. Available tags are defined by the version of HTML being used; you can’t simply make up tags.
A class is a user-defined identifier that an be used to distinguish or uniquely identify same-type elements (for example, <div class="feature-copy"> and <div class="feature-img">).
Using cascading style sheets (CSS), tag selectors define the appearance of HTML tags. These selectors simply use the tag name as the selector name; for example, the div selector defines the appearance of all <div> tags.
Class selectors define the appearance of any tag that is identified with the defined class. These selector names always begin with a period; for example, the .text-area selector would apply to any element that has the class="text-area" attribute.
When you export CSS from Illustrator, object names in the Layers panel determine the resulting selector names (as shown in the CSS Properties panel) and the file names that will result when you export the file’s CSS.
When you define an object name that is not the same as an existing tag, the resulting CSS selector will be a class selector.
In the CSS file, a class selector name always begins with a period (for example, .home-feature).
Class selectors are applied to specific HTML tags using the format class="home-feature".
Properties of the active CSS selector are listed in the lower half of the CSS Properties panel. In the example shown here, the background-image : url property identifies the file that will be used in any element that is identified with the home-feature class.
Tag selectors apply to all matching elements on the HTML page. For example, all p elements (identified with the <p> tag) will adopt the properties defined in the p tag selector.
If you define an object name that matches an existing HTML tag, the resulting CSS selector is a tag selector.
In Illustrator, character styles can automatically map to CSS selectors. By using the existing HTML tag names as the character style names, you can easily define the appearance of HTML elements based on what you see in your Illustrator file.
As you see in the CSS Properties panel in the example shown here, the p selector has several defined appearance properties. Any paragraph (<p>) text in the HTML page that links to the CSS file you export will have the same formatting.
Once you have defined all of the CSS selectors that will be required to properly format the HTML page, you can easily use the CSS Properties panel to export the CSS file, as well as any required images. If you choose Export All, all CSS selectors defined in the file will be included in the CSS file. If an object is selected on the artboard, you can also choose Export Selected CSS to export only the CSS that relates to the selected objects.
In either case, the CSS Export Options dialog box determines exactly what will be included in the resulting CSS file (the various options in this dialog box are explained in detail on Page 406.)
