How do I get my vector logos to look super sharp on the web?


I do a lot of work with Illustrator, but I've never been super happy with how my work looks on our website. I've tried various techniques - saving from Illustrator, and opening in Photoshop and saving - but I'm still missing something.

Ed. The logo was only ever supplied as AI. I get the same slightly fuzzy result whether I'm saving for web & devices from Illustrator, or taking the vector into Photoshop. I tend to scale in Illustrator to the required size, and then save for web (inc type optimised - there's text in the logo).

9/28/2013 10:46:00 AM

When rasterizing vector graphics, lines look sharp if they fall into pixel boundaries. This can be done by the rasterizer (rounding), but most vector graphic programs I know don't support that. One strategy to counter that will be to use a grid whose cells span and integer number of pixels (one cell 1x1 or 2x2 or 3x3, ... pixel).

For icons, a 16x16 grid is a good start, as it allows sharp icons of 16x16, 32x32, 48x84 etc. to be produced from the same vector graphic.

For a logo, a pixel grid with 1 cell = 1 pixel in the smallest representation of the logo is a good start.

Here's a tutorial that explains this technique: Vector Light Bulb Icon in Inkscape

9/24/2013 3:26:00 PM