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!