Graphics Programs Reference
In-Depth Information
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 Illustrat-
or. 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).
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 by choosing Web from the Profile menu in the New Document
dialog box. This makes all artwork (that can be aligned to the pixel grid) align to it auto-
matically. 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 Pro-
file menu. Click the triangle to the left of the Advanced content, toward the bottom
of the dialog box.
In the Advanced settings, you can see that the Color Mode is RGB for all artwork
you create, the Raster Effects are Screen (72 ppi), and Align New Objects To Pixel
Grid is selected.
