Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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

share|improve this question
    
Are you trying to save it in png/gif format? Is the hazy edge about the image bothering you? –  hello_world Sep 24 '13 at 11:48
1  
Is your site built on a CMS like Wordpress, because Wordpress (and probably others) automatically crunches image quality to reduce file size. –  deecemobile Sep 24 '13 at 12:12
    
Are you sizing the image in the browser, either up or down? If so, don't do that :) Since there are three people who have questions, perhaps you could edit your question to link to your export or something similar? That would help us answer. –  Brendan Sep 24 '13 at 13:15
add comment

3 Answers

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:

enter image description here

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

share|improve this answer
    
Thanks. I think aligning to pixel grid is where I'm going wrong. I've heard good things about Fireworks, but I've never used it. Cheers. –  Possikiem Sep 28 '13 at 10:39
    
Try Modify > Snap to pixel option. You can also let fireworks align individual pixels for you in top left corner or in the center of a pixel. Inside Path panel, under Edit points label. Good luck. –  Alph.Dev Sep 28 '13 at 19:36
add comment

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

share|improve this answer
    
Aligning to pixel grid now...thanks. –  Possikiem Sep 28 '13 at 10:40
add comment

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.

enter image description here

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:

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.