Photoshop is an amazing tool. I know most UI and web designers got their start designing with Photoshop. I see a lot of websites like 365 PSD and Premium Pixels offer tons of UI freebies, all built with Photoshop. Yet Illustrator is so much more versatile and easy to use. Why don’t more designers use Illustrator?

I built my first website around 2003. Photoshop was huge. Illustratrator was still fairly new to me. Hell, the internet was still fairly new to me. No one could have imagined smartphones and the “mobile web” at that point – The iPhone was still 4 years away.

I’m almost embarrassed to admit this, but when I first started building websites I did the “save for web” and exported my photoshop files to HTML tables, because, well, that’s all I knew how to do at that point. I’d have a small window that loaded content via an iframe to use what little CSS knowledge I had to style really ugly, poorly written copy. Photoshop was my tool from design to build.

Needless to say, my first few websites were ugly and poorly built.

It was only a matter of time before I started using something else.

I didn’t have the foresight to save all those files for posterity, so I don’t know what the file sizes were, but I can guess they were pretty big. The better I got at design, and the more features I discovered, the bigger the file sizes got. Each version of the photoshop file might have been somewhere around 50 or 60 or more MB.

The more complex my designs became, the harder it became to manage the layouts. Overtime I came to realize that Photoshop was terrible for this type of work. No character styles, no layers, poor symbol management, a single artboard, clumsy element management, and large file sizes.

It was only a matter of time before I started looking for something to fix my poor workflow. Along came illustrator.

As I started to get better at design, and as I started to do more print work, PhotoShop started to take a back seat to InDesign and Illustrator. I got used to InDesigns character styles and Illustrator’s symbols. I liked that I could manipulate several elements at once easily. I liked how easy it was to manipulate vector shapes. I loved that I could export multiple artboards in InDesign, and more recently in Illustrator. I loved that I could arranged elements onto layers and I loved that I could isolate a group and manipulate its contents without selecting all the layers behind them.

But still, when it came to creating pixel perfect graphics for 72 DPI monitors, Illustrator fell short. I would still get blurry lines and graphics due to the elements falling on the fraction of the pixel. To design websites I had to go back to Photoshop. Photoshop was designed for pixels, and although it was clumsy, I could get pixel perfect artwork every time.

Then I found out I was doing it wrong, and my life changed forever.

And yet Illustrator isn’t perfect for UI/web design.

Because, really, Illustrator has every feature that a UI/Web designer needs. Snap to pixel support, for things like stroked simple shapes and lines. Symbol support for things like buttons, icons, and web elements. Character and paragraph styles for styling copy. Multiple artboard support, because who designs only the home page? Intuitive layer support for easily arranging your elements. Isolation mode to manipulate the contents of a group without locking and unlocking, or ungrouping elements. Nine Slice Scaling for symbols, which allows you to create a symbol that can grow horizontally and vertically without scaling it’s corners. I use this specific feature all the time to mock up alert windows, media players, etc.

And yet Illustrator isn’t perfect for UI/web design. There are some things that I wish Illustrator could do differently. There is an arbitrary 100 artboard limit. Which makes things like exporting icons for an application difficult.

I wish Illustrator could link graphic styles to elements, instead of just applying styles to elements. Similar to how Illustrator handles brush styles. So we could change a graphic style and it would alter any shape with that style.

In the next coming weeks I plan to highlight each one of these valuable features and compare it to Photoshop.

If I can get one web designer to even open Illustrator i’ll consider this series a success.

Stay tuned.