Using Adobe Illustrator (Ai) for web design.


The majority of web designers seem to use Photoshop, but Illustrator has some real strengths when it comes to designing web layouts. Moving and resizing elements on the canvas is much faster and more intuitive, and this helps make the process more fluid. Illustrator does have some shortcomings – mainly its lack of strict adherence to pixel-based measurements. But these can be worked around. In this article I’m going to discuss some tips and techniques for using Illustrator to design web pages. Personally, I’ve used both Photoshop and Illustrator to design many web layouts, and Illustrator remains my tool of choice. Fireworks is also worth looking at.

Snap to pixel

In Illustrator CS1 and older, getting objects to ‘snap to pixel’ properly was difficult. Even when you set your units to “pixels”, positions on the canvas are very sensitive and tend to end up as fractions of a pixel. This introduces anti-aliasing artifacts when exporting the image so that your web graphics don’t look very ‘crisp’.

To get a ‘snap to pixel’ effect in these older versions of Illustrator, first set up your grid so that you have a grid line every 128px with 128 subdivisions. That in effect gives you a pixel grid, but with a usable number of lines visible. Then turn on “snap to grid” under the “View” menu. This keeps all your movements and transformations locked in to the nearest pixel, and keeps your graphics nice and crisp.

Snap to pixel option see image 1

As of CS2, Adobe introduced a specific ‘snap to pixel’ option, which you can see under the View menu after you select “Pixel preview”. This will keep all your objects snapped to the nearest pixel.

Clean outlines see image2

By default, a stroke line around an object will follow the centre of the outline. This means that a stroke line of 1 pixel will have 0.5 pixels either side of that line, and we’ll end up with anti-aliasing artifacts. To solve this, always select “Align stroke to outside” or “Align stroke to inside” from the Stroke options window.

Adding a 1px stroke

Unfortunately, even when you do this, and have “snap to pixel” turned on, Illustrator will randomly introduce an extra 1px anti-alias shade below the top edge of a rectangle. This is one of those annoying Illustrator bugs that (almost) makes you wish you’d just stuck with using Photoshop. This bug seems to occur in both CS3 an CS4 versions. The only way around this that I know of, if it is absolutely critical, is to draw the stroke separately as very thin rectangles – see below.

[Update: setting the stroke weight to 0.999px instead of 1px solves this problem. ;)]

Drawing lines

In theory, the centre of a line lies between two pixels, and hence we get anti-aliasing problems when drawing lines with “snap to pixel” selected. Rather than nudging the centre measurement of a line by 0.5 pixels (which will give you a clean line), I prefer to draw lines as very thin rectangles. For example, a 1px horizontal line can be made up of a 1px high rectangle. In a similar way, controllable shading can be achieved by creating thin rectangles filled with a black to white gradient, setting the blending mode to “multiply”, and then reducing the opacity as required.

see image3

Use layers

Unlike Photoshop, by default Illustrator allows any element on the canvas to be selected and moved/modified with a single click. This makes designing more fluid and quicker – resizing an object requires less clicks. It also makes it important to set up a few different layers, so that you can lock some layers while you work on others. I tend to place some example browser chrome on a top layer (to help get an ‘in-context’ preview of the design), a layout grid on a second layer, main content on a third layer, and structural elements like boxes or columns on a ‘ground’ layer. But depending on the complexity of the design, you may want to set up more layers – don’t forget to name them to help you keep track.

Use character and paragraph styles

Another area where Illustrator scores is its ability to define character and paragraph styles. Say you have a full web page design with a fair amount of content: text may appear in different columns, break-out boxes and sidebars. Now say you want to try tweaking the link colour, or changing the font of the headings. Instead of selecting each instance of link text in turn and making the colour adjustment, you can just make a global change to your “link” character style. It takes a little longer to set up, but you can end up saving time, especially if you’re the kind of perfectionist designer who likes to keep fiddling with things.

Working with bitmaps

For some things, like editing photos, you’re going to have to use Photoshop. It’s often worth ‘placing’ PSD files into Illustrator so that transparency works properly. Placing an image (as opposed to just copying and pasting via the clipboard) also means that Illustrator can automatically update the image when you make changes to the file within Photoshop, which can be handy. Note that you can do some quick ‘cropping’ work in Illustrator by making a ‘Clipping Mask’.

Getting help

There are lots of decent books and online tutorials around, although few of them focus on using Illustrator for web work. I’ve always preferred to teach myself, using the Adobe help files. A good place to go if you get really stuck is the official Adobe Support Forum. There are some knowledgeable power users there, although don’t expect an answer right away. Illustrator does also have the odd strange bug every now and again, so if you really can’t work out what’s going on, it might not be your fault! 99% of the time though, the answer is there somewhere in the help files.

Note: * If you’ve been struggling with Illustrator blurring the top edge of a 1 px “aligned to inside” stroke, After a lot of experimentation, I discovered that changing the stroke weight from 1 px to 0.999 px solved the problem for me. It’s a nasty hack, sure, but maybe it’ll help.

image1
image2
image3

+ There are no comments

Add yours