Historically, when you talk about designing for the web (designing anything for the web, like logos, mockups, headers, etc.), the underlying assumption is that you used Adobe Photoshop. Maybe you used Fireworks if you were a relatively new designer (no offense attended to you Fireworks users; it simply came out so later than Photoshop that only new users to Adobe tended to pick it up as opposed to those already familiar with Photoshop. I’ve actually heard many excellent designers have switched to primarily using Fireworks, and I’ve considered doing so myself). Point is, all of that turned upside down with Adobe Creative Suite 5, in which Illustrator finally got some features that had been needed for so long, such as Pixel Preview.

 

The Old Adobe Paradigms

 

Just for the sake of context, let’s examine the purpose of Photoshop and Illustrator respectively as they matured to what they are today. Since as long as anyone can remember, Photoshop has been a raster-based software, meaning that you opened Photoshop to work on images at the pixel level, making it great for editing photos. The Photoshop interface relies heavily on the idea of using multiple layers for an image, which lends itself well for manipulated or visually complex images. Because Photoshop is so pixel-based, resizing images could be risky and often led to pixilation.

Illustrator, for the longest time, was a vector-based program, meaning that, rather than focusing on pixels, you were focusing on lines and positioning. Detail in vector artwork could theoretically be infinite although eventually you will probably export the vector image into a raster format as vector images are not supported by older browsers and haven’t really made their splash onto the web although that may change as you are reading this.

 

Why Illustrator Got Tons Better With CS5

 

With the implementation of “Pixel Preview” and “Align to Pixel Grid,” I’ve found myself using Illustrator more and more when I would previously pop into Photoshop. Before these changes were present, I relied much more on Photoshop when creating logos, site widgets, or site mockups due to Photoshop’s pixel-view, which allowed me to align pixels perfectly on the grid. Typically I would design a vector graphic in Illustrator (because I could then scale it to any size), and then I would nudge and adjust pixels in Photoshop. With Illustrator’s “Pixel Preview,” I can make all these pixel adjustments in Illustrator and then save for the web in the file type of my choosing.

I should also note that, with Illustrator, you are not resigned to just push around line paths in positioning and length in order to obtain pixel perfection. You have the option to “Align to Pixel Grid” through a variety of different methods, including starting an Illustrator file with “Align Objects to Pixel Grid” checked, checking “Align to Pixel Grid” in the transform window, or checking “Align to Pixel Grid” in symbol options when working with a symbol. Oh, did I mention you can also select “Snap to Pixel” under the “View” menu when in Pixel View? All of these options help you better automate your pixel perfecting process, ultimately taking less of your time pushing around pixels in the design process.

 

You may be thinking, don’t you have pixel view inherently available in Photoshop? While this is true, you may find that you have a much more difficult time scaling rasterized graphics on Photoshop than you would scaling vector graphics in Illustrator’s pixel view. On top of that, you won’t have to fiddle with layers like you do in Photoshop. Everything on the page in Illustrator is directly adjustable, and you don’t have to select the right layer first as you would in Photoshop.

This is a guest post from Jacelyn Thomas. Jacelyn writes about identity theft protection for IdentityTheft.net. She can be reached at: jacelyn.thomas @ gmail.com.