Vector art for clean web graphics
If you've ever used vector art in either Photoshop or Illustrator for the web, you may have been frustrated that your lines aren't clean, and a 65 pixel wide rectangle doesn't necessarily slice down to a neat 65 pixel wide image. When I was made aware of the cause, it felt like a no-brainer. But I figure it's a good time to pass along what I've learned should some one else find it as useful as I have.
Coming from a print background, I'm big on using vector drawing software, namely Adobe Illustrator, in place of raster software like Photoshop for creating original art. Vector artwork scales indefinitely, which is a great boon in print, and the tool set offered in Illustrator is comparable to Photoshop, and superior in other ways. Also coming from a print background, I had never paid much attention to the easily overlooked Pixel Preview option.
Roots
My first substantial use of Illustrator in web design was in creating a set of emoticons for MacAddict's online forums. The smilies are based on the magazine's mascot, Max, and the art was created in Illustrator. Illustrator proved to be fantastic tool for creating this sort of work, because it's so versatile and easy to edit. The drawback, however, was preserving detail in such a few of pixels (the original smilies were about half the size as the current ones). I discovered that I could keep the art work black and white, but reduce the stroke weight of the lines to .76pt to preserve good line quality and detail. I didn't know why .76pt was the magic number; I discovered it through trial and error, but it worked, so I moved on.
There were other oddities that I had noticed, and I typically chalked them up to Illustrator being a tool focused on printed media. I noticed that the bounding box for a given piece of art was often a few pixels off when exporting transparent png files, and I noticed that my clean 1px lines often exported as two pixels wide -- particularly when dealing with 2 color files. I used to take the flawed art exported from Illustrator into Photoshop to re-crop it, dismissing the extra pixel as a fluke and again, moved on.
Enlightenment
It wasn't until years later that I discovered what was happening, and it hit me like a ton of bricks. While collaborating on the fcXHTML Widget, we were passing Illustrator files back and forth to achieve a design that we were all happy with. At one point I was having trouble aligning some exported files in the widget, and when I brought it up, Shawn said that I should check out the Pixel Preview option and adjust the art accordingly. A little skeptical, I re-opened the Illustrator file, and activated Pixel Preview (View -> Pixel Preview) and didn't see a lick of difference.
Then I zoomed in.
Lo, there it was. As plain as day. The problem is that my vector lines were falling in between solid pixels, and so a clean, aliased 1px line would render as a two pixel wide, anti-aliased line. It's a subtle thing, something that goes entirely un-noticed when casually viewing the art at 100% scale. But while zoomed in, it stands out like a sore thumb.
Vector isn't just for Illustrator anymore
Photoshop doesn't have a pixel preview option, it is a raster program, and as such it's always in Pixel Preview mode. But recent versions of Photoshop offer a greater compliment of vector tools. Not just the tried and true paths, but shapes as well &mdash particularly the rectangle shape tool. If an artist draws a rectangle and applies a 1px stroke effect to that rectangle, the artist must be careful to examine the exact position of the rectangle to ensure that its stroke falls on a pixel, and not between two pixels lest it render as a blurry two pixel wide line. It'll lead to that 65 pixel wide rectangle actually being a 65 pixel wide rectangle, and it'll make for a cleaner, bolder design with the crisp edges that the artist intends.
While working with vector-based art on a web developement project that requires pixel-perfect precision, Pixel Preview is a must. It ensures a clean line, and offers the power and flexibility to create better, more unified web designs. For example, a one pixel wide stroke can blend seamlessly into a CSS border, but a blurry two pixel line cannot. Just something to bear in mind when we reach for the bezier tools. Thanks again Shawn, you've saved me a lot of hassle since you pointed this out to me.
- under:
- Web Development
- Posted on
- 2005-11-16