There has been quite a bit of debate lately about the web designer’s toolbox. The folks at 37signals apparently upset some people by questioning the position of Photoshop in the mock-up process, while others took the opportunity to exclaim their love for Fireworks. And then there was the question if a ‘web designer’ should know HTML and CSS or not. By any means, I’m not here to tell you what you should or should not use. Whatever floats your boat is fine with me. What I will share with you however are some tips and reasons why I use Illustrator for pretty much all of my design jobs.
Why?
I’m not a Photoshop, I’m an Illustrator. Photoshop to me is for editing, not for creating, not for designing. Illustrator gives you great control over pixels and bitmaps, plus the delight of vectors. There’s barely anything I can’t do in Illustrator. Of course, depending on your style and subject matter, you may want to opt for a bitmap editing app none the less. But I’ve really found my tool in Illustrator.
Illustrator has masks, non-destructive effects, layers and the like, just like Photoshop. But because it’s all laid out in vectors, it’s scalable to infinity and beyond. Drop shadows, rounded corners, glows, feathering, strokes, distortions and more are all adjusted as you scale elements and move them around. Text manipulation and tweaking gradients are also a lot easier in Illustrator in my opinion.
Setup
Let’s start by making sure Illustrator is set up for working in a web environment. Evidently, set your color mode to RGB and units to pixels. Illustrator CS3 introduced a new ‘web’ Document Profile which makes use of the new Crop Area feature but to be honest I rarely use this. It’s easy to edit your document size later on — however there’s a catch here as you’ll read below.
In your preferences, set the Keyboard Increment value to 1px — this is used for nudging with your arrow keys. On the Guides & Grid page, enter these settings:
Next, turn on the Snap to Grid option in the View menu. Now when you create or move elements in your document, they will always be positioned exactly on the pixel, effectively eliminating fuzzy lines in your mock-ups.
Fuzzy lines
Illustrator is a vector-based application on a pixel-based screen, so it has to approximate all coordinates to the nearest pixel. If a coordinate value isn’t a nice round number, Illustrator naturally resorts to anti-aliasing. Sometimes this can be a a bit annoying when you’re trying to get that tiny icon to appear razor sharp. You’ll find great help in Illustrator’s Pixel Preview mode in the View menu (Option-Command-Y on Mac OS X). Even at the highest zoom level, it’ll show you the exact way the pixels will be laid out at 100%, while you’re still able to see and edit the vector paths.
There may be a few cases when for example you have a stroke of 1px, perfectly positioned on your pixel grid and still it shows fuzzy edges in Pixel Preview mode. Try reducing the width to something like 0.98px, that should do the trick. A minor hindrance, but it doesn’t happen that often.
A note on document resizing
When you re-size your document, you’ll notice that the coordinates in the Transform palette haven’t changed. This can be very odd in a way, because according to the coordinates, the square in the picture below should be in the bottom left corner. The trick here is to reset the origin of the document: turn on the rulers (Command-R on Mac OS X), start dragging with your mouse from the blank square where the two rulers intersect, and drop right where you want the origin of the document to be — usually the bottom left corner. Boom, all your coordinates are correct again.
Coordinates wrong after document resize? Just reset the origin.
Unfortunately, Illustrator does not allow you to specify the origin from where the document should expand or contract. Unlike Photoshop, it’s always straight from the middle.
Try it, you may not want to go back
There you have it, a few little things that should get you started. For additional resources I refer you to the useful Vectips, and recently lynda.com published a nice set of screencasts entitled Illustrator CS3 for the Web (tip: you can obtain a unlimited 7-day trial account on lynda.com).
A big disadvantage of Illustrator is that it cannot work with multiple pages. Fireworks supports multiple pages in it’s CS3 version. You can set one template (e.g. the header of your site) and create related pages. You can also work with symbols in the same manner Flash treats symbols.
I wonder how you do the slicing. I guess this is not possible with Illustrator. So you import your designs into Fireworks or Photoshop after the design phase?
I solve the multiple pages issue by using layers and views. A view in Illustrator is basically a shortcut to turn certain layers on or off in one click. I rarely have to put more than 4 pages in one mock-up, so it works out quite good.
Oldskool slicing can easily be done with crop area’s in Illustrator CS3 — I just never work that way. Using the slice tools to split a big mock-up into a whole bunch of small images was great in the table lay-out era, but today?
If you are an Illustrator, i’m sure you have all the good reasons and workarounds to use it for whatever purpose you see fit. Keep in mind neither Illustrator or Photoshop was originally created for web design although they have gotten bloated to include web tools in recent years.
FireWorks was created for web design–just that, and has all the RIGHT tools. You import complex illustrations and bitmap images from the other 2 specialized apps and create your final layout in FW. This way, you have the best of all 3 worlds. Sure it costs more and a bit more hassle this way, but this is the right way to do it professionally.
And sure you can get away doing web sites with a bunch of other cheaper tools as well. Like anything else, there are a million tools and ways to do things–what’s important is what works best for each person and the “smart” way to do it.
[...] – bookmarked by 2 members originally found by eostrom on 2008-08-16 An Illustrator in an online world http://lensco.be/2008/06/30/an-illustrator-in-an-online-world/ – bookmarked by 6 members [...]
[...] current weapon of choice is still Illustrator – as I once outlined here – but its flaws are plenty. As Jason notes: Every option out there has its [...]