Illustrator for Web Design

Adobe Photoshop has for years been the web designers tool of choice. Fireworks is the developers Photoshop. But Illustrator is my (and many others) web design application of choice.

I come from a print based design background and Illustrator is the industry standard single page design application (InDesign being used for multi-page documents or text heavy designs). When I made the leap to web design I took my knowledge of Illustrator with me and I’ve found it to be a far better web design tool than Photoshop.

Photoshop has lots to offer, that is without a doubt. It does it all including rudimentary vectors. But so does Illustrator including it’s own failings in pixel based editing. They both obviously have their own speciality.

In terms of workflow however Illustrator, in my opinion, has Photoshop trumped. Its ability to quickly and efficiently amend designs is by far superior.

Where do you create your logos? Illustrator I hope. The scalable vector format means your logo can be used time and time again at different sizes, colours and media without losing quality. Why go through the hassle of getting them into Photoshop? What happens when the client wants it bigger? In Illustrator this is the simplest of tasks. But unless you’ve imported a smart object into Photoshop you’ll have to re-do it.

It’s also the perfect format for exporting into Flash or god forbid…into Photoshop. You just can’t go wrong.

Now this isn’t a list of Ilustrator’s features, so I won’t continue on this train of thought, but just note: Illustrator is far quicker and easier for making amendments, without loss of quality.

Illustrator has the same save for web option as Photoshop so output is basically the same. Though in my opinion gif files are far superior from Illustrator esp. with the dither option turned off. But with CSS standard now and flexible layouts popping up everywhere, flat slicing isn’t going to cut it (excuse the pun). Images need to be able to overlap and move on top of each other, not butted up static in mind and body.

What you need is separate elements. This is easily achievable in Illustrator, now I know again Photoshop can do this but my god it’s easier in Illustrator. I tend to make a copy of my final site design just to slice up. This way all the elements can be laid out separately ready to slice. You can even slice up photos.

Note of warning! Make sure all your elements are sized pixel perfect. Don’t just drag a rectangle out for instance, type the figures in. Not only is this good design practice anyway but it also helps when slicing.

I like to choose where my images are sliced myself. Line up all your elements exactly on a pixel using the transform pallet. Drag a guide in and move it to the same pixel, again using the transform pallet. Continue this for all your “guide slices”. It’s essential your guides are exactly on a pixel line or else they’ll jump out of position. Now convert your guides to slices.

Save for web. Select options as desired. Save. Done! Separate elements sliced exactly where you want them ready for your flexible CSS layout.

If you have any Illustrator knowledge I suggest you give it a chance for your next design. If you don’t have any……. Learn it!

This entry was posted in design and tagged , by Rob. Bookmark the permalink.

About Rob

I'm the graphic designer here at inmeres. I studied BA Graphic design with a specialism in advertising at St Martins College in London. After I graduated I worked in a label printers which gave me a huge amount of print experience and most importantly, “what not to send” printers. I then worked for a local magazine designing various adverts ranging from half page to double page spreads and editorials. I then came to inmeres! Woo! Which is a great and i'm continuing to learn a lot. Out of work i'm a bit of a wanna-be photographer. I like to get it right in the camera, i'm not one for massive retouches in Photoshop (though i've been known to break this theory when i get bored and have a bit of a mental Photoshop mash up!) You can view some of my images here
79.48% of all statistics are made up on the spot
John A. Paulos

4 thoughts on “Illustrator for Web Design

  1. Thats a very interesteng article Rob and quite thought provoking.

    I would like to add one point though. In terms of exporting graphics for use on the web it is widely accepted that Fireworks’ compression capabilities are much greater than Photoshop’s. This results in a lower file size being produced by Fireworks with the same quality of appearance.

    I don’t know how the compression capabilities of Illustrator stand up against Fireworks or indeed Photoshop but from your article i am keen to find out…

  2. I am certain i find better compression from illustrator than with photoshop, however i’m not sure about Fireworks.

    It’s an interesting point though and i will do some tests to find out.


  3. Nice article. I’ve been inspired to use Illustrator for a rather long time now but every time I open the application I don’t know where to start. I use Photoshop everyday at work so I guess my personal trend continues.

    Have you found any good Illustrator tutorials out there?

  4. This is a great site, this link has some good tutorials in. Also if you follow the links you’ll find more tutorial sites.


    I will be posting some on here soon. If you have any requests for a tutorial, use the contact form and i’ll arrange to get some done.