: 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

@Heady304

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.

Vote Up Vote Down

@Smith574

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

Vote Up Vote Down

@Berryessa866

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

Vote Up Vote Down

@Fox8063795

There are a lot of things you can do.


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





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.

Vote Up Vote Down