13

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

Improve this question
4
  • Are you trying to save it in png/gif format? Is the hazy edge about the image bothering you?
    – hello_world
    Sep 24, 2013 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, 2013 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, 2013 at 13:15
  • If one of the below answers answered your question please accept it.
    – user9447
    Apr 5, 2016 at 19:37

4 Answers 4

Reset to default
11

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

Improve this answer
0
5

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.

Improve this answer
2
  • 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, 2013 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.
    – Slava
    Sep 28, 2013 at 19:36
5

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:

Improve this answer
1

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.

Improve this answer

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