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
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 1×1 or 2×2 or 3×3, … pixel).
For icons, a 16×16 grid is a good start, as it allows sharp icons of 16×16, 32×32, 48×84 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
Attribution
Source : Link , Question Author : Possikiem , Answer Author : Peter Walser