As many people know Illustrator was born as a print based application - it is a vector application. With the launch of Illustrator 10 we started to see some web implementation, but with the new Illustrator CS3 there are a lot of new web applications compatible with Photoshop CS3 and Flash.

The good news is that we can use Illustrator CS3 to create web pages, not just Photoshop, and I will highlight some aspects that they can be relevant for our work.

First of all we need to understand what Illustrator can do and what it can’t do, because we always have to remember that it is a print based application (even if now it has got moving towards the web).

ILLUSTRATOR CAN DO:

object based editing: moving groups quite easily

repurpose art: any art design can used in illustrator can be used for web, print, anywhere, and also can be resized without loosing the shape of the object

flash integration

ILLUSTRATOR CAN’T DO:

no pixel control

no rollover

limited support for animation

We can start opening a new document and setting up the preferences for web.

Open a new web document: set up width and high for 800x600 unit’s pixel, colour mode RGB, 72 dpi, and preview mode in pixels. Usually for default Illustrator will set up a new document in the print style, so it will be A4, cm or mm, CMYK, 300 dpi (because for the print it is always a higher resolution).

As you can see our document area is huge, but Illustrator (for the web) is using a cropping area where you can place your art work.

Now we can set the preferences:

General: we put the keyboard increment: 1px, so all the time that we use the arrows to move our art work it will move only 1px.

Units and display performance: general: in pixel; stoke: in pixel; and type: in points.

Guides and Grid: gridline every 10px, and subdivision: 10px; in this case our grid will be set up 1px by 1px.

Go to view: and turn on “snap to grid”, it this way we are sure that our work is going to be aligned all the time with our grid and everything will be measure by 1px.

Pixel preview

Maybe you noticed that when we work with Illustrator the lines in vector work are always nice and clean, even if we zoom in and out more then 100%; but when we export our work to a pixel preview all the shapes and lines seem to have a fuzzy or an extra grey border around, even if the outline is 1px.

This is because Illustrator has been created for a print application and when we turn it on a pixel preview it tries to fill the gaps between the pixels with an extra gradient. To avoid the blurry and fuzzy edge we have to always the keep on the “snap to grid” artwork and try not to use the stoke but instead the filling. For example: if I have to create a line of 1px high, I can use the rectangle from the tool bar and give it 1px high.

Illustrator CS3 for web (part 2) coming next week.