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.

Tags: ,

Posted on Friday, February 20th, 2009 at 4:44 pm and filed under Design, Tutorials. You can follow any responses to this post through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

46 Comments

  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.

    Benjamin McDowell at 5:18 pm on 25 May 09

  2. That’s a great trick Benjamin, thanks. Seems to work for me too. I’ll update the article.

    Ben Hayes at 10:33 am on 26 May 09

  3. 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.

    Nora Brown at 2:56 pm on 26 May 09

  4. 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.

    Henry Do at 10:42 am on 28 May 09

  5. 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.

    Justin Suissa at 6:56 am on 1 Jun 09

  6. 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.

    Ben Hayes at 9:51 am on 1 Jun 09

  7. 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!

    Lucie at 6:30 pm on 5 Jun 09

  8. 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.

    Robin at 8:47 am on 25 Jun 09

  9. @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.

    admin at 9:37 am on 25 Jun 09

  10. 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.

    EM at 10:51 pm on 5 Oct 09

  11. 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. :)

    hoshimo at 2:23 am on 18 Nov 09

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

    Thomas at 6:09 pm on 23 Nov 09

  13. 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.

    Ben Hayes at 6:25 pm on 23 Nov 09

  14. 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 :/

    michael at 6:50 pm on 11 Dec 09

  15. 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.

    ps at 10:12 am on 26 Feb 10

  16. [...] For today’s problem without CS5, I found an excellent posts on how to align the Illustrator object to pixel grid here. [...]

    Pixel-Perfect graphics in Illustrator « Yayoi's Blog at 1:23 am on 3 May 10

  17. [...] UI design, why not have a read of these articles: Why build iPhone app mockups in vector format? Using Adobe Illustrator for web designiPad Wireframe Template (.eps) License: This file must not be hosted on any other site but you are [...]

    Illustrator Template Toolbox for Web, Mobile and App Developers | Prabaharan CS Blog at 3:14 pm on 1 Sep 10

  18. [...] It was mildly surprising how difficult this post was to put together, I really did expect to find a lot more. What is clear from this is that generally most designers would not even consider Illustrator for UI design, which was an even bigger surprise. So, if you are a UI designer who does prefer Illustrator over everything else, then you may consider this post as your treasure chest. If you are wondering what the benefits of using Illustrator for UI design, why not have a read of these articles: Why build iPhone app mockups in vector format? Using Adobe Illustrator for web design [...]

    Illustrator Template Toolbox for Web, Mobile and App Developers at 6:03 am on 2 Sep 10

  19. [...] It was mildly surprising how difficult this post was to put together, I really did expect to find a lot more. What is clear from this is that generally most designers would not even consider Illustrator for UI design, which was an even bigger surprise. So, if you are a UI designer who does prefer Illustrator over everything else, then you may consider this post as your treasure chest. If you are wondering what the benefits of using Illustrator for UI design, why not have a read of these articles: Why build iPhone app mockups in vector format? Using Adobe Illustrator for web design [...]

    Illustrator Template Toolbox for Web, Mobile and App Developers « UKWDS! at 10:19 pm on 2 Sep 10

  20. [...] Using Adobe Illustrator for web design This tutorial will explain the real strengths of Illustrator when it comes to designing web layouts as well as some shortcomings and workarounds. [...]

    13 fantastic Illustrator web design tutorials | Garmahis at 7:33 pm on 27 Oct 10

  22. 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:

    Sebastian at 6:45 am on 28 Apr 11

  23. …wanted to share an image too:
    http://www.sebastianwenk.net/Download/pixels.jpg

    Sebastian at 6:46 am on 28 Apr 11

  24. 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.

    Renee at 6:29 am on 20 Jun 11

  25. Web Design California…

    Using Adobe Illustrator for web design | The Sheep…

    California Website Design at 10:16 pm on 4 Aug 11

  26. creare magazin virtual…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    creare magazin virtual at 12:12 pm on 15 Sep 11

  27. kataskeui istoselidon,Κατασκευή Ιστοσελίδων…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    kataskeui istoselidon,Κατασκευή Ιστοσελίδων at 6:40 pm on 27 Sep 11

  28. Katerina Gklinou…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    Katerina at 6:43 pm on 28 Oct 11

  29. web design…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    web design at 10:47 pm on 29 Oct 11

  30. Κατασκευη Ιστοσελιδων…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    Κατασκευη Ιστοσελιδων at 1:45 pm on 9 Nov 11

  31. Mirth Solutions…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    Mirth Solutions at 8:45 pm on 19 Dec 11

  32. If you need web hosting visit here for more infor….

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    If you need web hosting visit here for more infor. at 2:40 pm on 23 Dec 11

  33. Cool ipad…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    Cool ipad at 5:39 pm on 25 Dec 11

  34. tvorba webstranok…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    tvorba webstranok at 11:42 am on 30 Dec 11

  35. drivers license, drivers license psd, fake drivers license, fake id, how to fake id, fake scan drivers license…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    drivers license, drivers license psd, fake drivers license, fake id, how to fake id, fake scan drivers license at 7:22 am on 1 Jan 12

  36. best software company…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    best software company at 10:40 pm on 1 Jan 12

  37. money lending software…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    money lending software at 2:27 am on 2 Jan 12

  38. Site…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    Site at 3:47 am on 7 Jan 12

  39. mp3DirectCut Standalone…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    mp3DirectCut Standalone at 11:00 am on 13 Jan 12

  40. [...] UI design, why not have a read of these articles: Why build iPhone app mockups in vector format? Using Adobe Illustrator for web designiPad Wireframe Template (.eps) License: This file must not be hosted on any other site but you are [...]

    Illustrator Template Toolbox for Web, Mobile and App Developers at 12:54 pm on 29 Jan 12

  41. by drawing step pastel step…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    by drawing step pastel step at 5:32 pm on 7 Apr 12

  42. web development κατασκευη ιστοσελιδων…

    [...]Using Adobe Illustrator for web design | The Sheep[...]…

    web development κατασκευη ιστοσελιδων at 3:56 pm on 6 Jun 12

  43. [...] If you are wondering what the benefits of using Illustrator for UI design, why not have a read of these articles: Why build iPhone app mockups in vector format? Using Adobe Illustrator for web design [...]

    Learn Anything @ Funkarachi – Illustrator Template Toolbox for Web, Mobile and App Developers at 2:34 am on 24 Feb 13

  44. Magnificent items from you, man. I have be aware your stuff previous to and you’re just extremely great. I really like what you have obtained right here, really like what you’re stating and the best way during which you assert it. You make it entertaining and you continue to care for to keep it smart. I can’t wait to learn far more from you. This is really a great website.

    Leads Opt-In System at 6:43 pm on 19 Apr 13

  45. Generally I don’t learn post on blogs, but I wish to say that this write-up very compelled me to take a look at and do so! Your writing style has been surprised me. Thanks, very nice post.

    nanaherbal at 9:08 am on 24 Apr 13

  46. Greetings, I believe your website might be having web browser
    compatibility issues. Whenever I look at your site in Safari, it looks fine however when opening in IE, it has some
    overlapping issues. I just wanted to provide you with a quick heads up!
    Aside from that, excellent blog!

    raspberry ketones canadian suppliers at 10:54 am on 24 Apr 13

Leave a comment