Using Adobe Illustrator 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. (Thanks to Hennning for first showing me this technique).

Snap to pixel option

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

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 solves this problem. Thanks to Benjamin McDowell for posting this in the comments.]

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.

Shading example

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.

43 thoughts on “Using Adobe Illustrator for web design

  1. I have also 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.

    Thanks for writing this useful article.

    Benjamin McDowell.

  2. Thank you so much for these tips. I also prefer Illustrator to photoshop for web layouts – I find it so much easier to quickly manipulate things and use a very large artboard with multiple iterations of the same design. I have found AI’s Save for Web fussy at times, but your tips should help.

  3. Thank you so very much for this tutorial. I’m relatively new to Illustrator and the fact that I couldn’t produce “crisp” looking web graphics was driving me insane; the “snap to pixel” command is now my new best friend.

  4. Another way to get non aliased strokes in Illustrator is to Rasterize them under Effects at 72dpi and turn off anti-aliasing. It’s also a dirty workaround, but it does the trick.

  5. Thanks Justin, interesting trick. I’ve just been playing around with it and it does seem to work pretty well. Will have to investigate further. I think I still prefer the other method because it keeps the actual co-ordinates and dimensions of your object nice and neat.

  6. Thanks for these great tips! I also prefer using Illustrator for Web design, it’s so much simpler and more intuitive than Photoshop, as you say. It’s nice to know there are others out there who agree!

  7. What’s up with the highlighted search terms in this article? I followed a link from the Design category to get here; no search was involved. It makes the article really difficult to read.

  8. @Robin: I’ve tried following the subject link for ‘Design’ and I don’t get the coloured highlighting. The highlighting should only come up when you’re doing a search. Are you sure you’re not typing ‘design’ into the search box?

    It’s a good point about readability from search results though. Maybe I should tone down the highlighting a little.

  9. Thank you so very much for this tutorial. I’m relatively new to Illustrator and the fact that I couldn’t produce “crisp” looking web graphics was driving me insane; the “snap to pixel” command is now my new best friend.

  10. 99% of my work is done in AICS3 nowadays, and i came across the same issue of anti-aliasing creating less sharp web graphics than raster based tools like photoshop. i scoured the web for a tutorial on how to get crisp graphics but found none. after fiddling in photoshop, im glad i found this article. :)

  11. Thanks Benjamin for the tip but this apparently doesn’t work for strokes aligned to the outside (in my case).

  12. Thomas – you’re right, this doesn’t work for strokes aligned to the outside. You’ll need to align them inside for this to work.

  13. when i create just a simple box with a fill — no stroke — i get a 1px shadow around the ege, i have snap to pixel turned on! what gives :/

  14. oh yah – i just made a pixel perfect 300x220px shape in illustrator – copy it, paste in new document – wow, photoshop thinks it’s 301×221. ADOBE SUX.

  15. Pingback: Pixel-Perfect graphics in Illustrator « Yayoi's Blog

  16. Pingback: Illustrator Template Toolbox for Web, Mobile and App Developers | Prabaharan CS Blog

  17. Pingback: Illustrator Template Toolbox for Web, Mobile and App Developers

  18. Pingback: Illustrator Template Toolbox for Web, Mobile and App Developers « UKWDS!

  19. Pingback: 13 fantastic Illustrator web design tutorials | Garmahis

  20. Pingback: Visual Design for Website Design « Rachel Moffitt

  21. Although this post seems rather old, I have another tip to share:
    In CS4, if you set the stroke to 0.8px on rounded rects and align stroke inside, the corners have way nicer antialiasing than with 1px or 0.999px:

  22. Thank you for this posting.

    I am a novice of web designing work.

    So, I hardly am aware of techniques or rules or some principles.

    And this regarding layout tool for web-designing is really one of my wonders.

    Actually Illustrator is my tool for layout, but I was barely able to watch using Illustrator for layout.
    So, I thought that I had to change my habit; but, that’s not easy.

    In your posting, I managed to get confidence in my way.

    Last but not least, I would be very happy if you give me some references for beginners of web designing.

  23. Pingback: California Website Design

  24. Pingback: creare magazin virtual

  25. Pingback: kataskeui istoselidon,Κατασκευή Ιστοσελίδων

  26. Pingback: Katerina

  27. Pingback: web design

  28. Pingback: Κατασκευη Ιστοσελιδων

  29. Pingback: Mirth Solutions

  30. Pingback: If you need web hosting visit here for more infor.

  31. Pingback: Cool ipad

  32. Pingback: tvorba webstranok

  33. Pingback: drivers license, drivers license psd, fake drivers license, fake id, how to fake id, fake scan drivers license

  34. Pingback: best software company

  35. Pingback: money lending software

  36. Pingback: Site

  37. Pingback: mp3DirectCut Standalone

  38. Pingback: Illustrator Template Toolbox for Web, Mobile and App Developers

  39. Pingback: by drawing step pastel step

  40. Pingback: web development κατασκευη ιστοσελιδων

  41. Pingback: 13 fantastic Illustrator web design tutorials | CanvasTheme

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>