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

Question

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).

Answer 1

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

Answer 2

There are a lot of things you can do.

1. Use image format with lossless compression, like PNG
2. Ensure your vector path is aligned to pixel grid as much as possible
3. Enhance contrast between image and background (either by color, by brightness or both)
4. Apply sharpen filter in your image editing software
5. Use a combination of effects, darker border + lighter glow (on a light background) OR ligher border + darker glow (on a dark background), like this:

6. Another technique is, resize your vector logo to 200%, merge it with your background, flatten it to bitmap, and then resize the bitmap back to 100%. Sometimes it makes difference.

As a web-graphics software I strongly reccommend Adobe Fireworks, as it is more suitable for pixel-perfect design, besides other reasons.

Answer 3

You didn't give much info on what your process is and this wasn't mentioned but I thought I would throw this option out to you. If you are designing frequently in Illustrator and are searching for a way to display your graphics there is an alternative that can be done in Illustrator known as SVG.

SVG is becoming frequent with site backgrounds and with capabilities of re-sizing without loss in detail I have seen more using it with icons. I have included some resources you could maybe read on in regards to using SVG here:

• Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
• How to Add Scalable Vector Graphics to Your Web Page
• Using SVG

Answer 4

You can resize you vector file in Illustrator. Save it as PDF, with preset: compression - color bitmap images - bicubic downsample to: whatever size you like - compression: 'JPEG' - image quality: 'maximum'. Save it and place the PDF file in Photoshop in a pre-sized 300 PPI file (example 125 x 125 pixels). Save as PNG. This you can place in a site. It's pretty sharp.