2

I'm trying to create a crisp logo in Illustrator CC, and no matter what I do (have set up web document settings with align to pixel grid), when I go to save my logo as a PNG-24 web document and preview in the browser, the logo appears fuzzy!

Is there something I'm missing about how to make my logo export for my website with a crisp look?

Here is how it exports in PNG-24 format:

Here is how it exports in PNG-24 format

Here it is with pixel preview:

Here it is with pixel preview

For Ben: Here is how it looks in Illustrator -> Save for Web -> Preview (PNG) 100% enter image description here

Thanks in advance for any help!

  • Possible answer: graphicdesign.stackexchange.com/questions/15828/… – Benjamin Smith Jul 9 '15 at 13:31
  • Thanks Ben! I already had "anti-alias' unchecked under Effect -> Document Raster Effect Settings. – mseager Jul 9 '15 at 13:47
  • I did notice that the logo appears a lot fuzzier in Firefox than Chrome. Zooming out in firefox helps too. I thought it was just a firefox thing, but then I went to www.squaredspace.com in Firefox and zoomed into their logo.....it's perfect at even 300% zoom! So crisp. – mseager Jul 9 '15 at 13:49
  • 1
    @mseager for your last point. They could have either saved the images at 2x or 3x for retina displays. They also could have saved their logo as a SVG which will look good at any size. – AndrewH Jul 9 '15 at 13:51
1

You'll have to manually tweak this into pixel perfection. With the 'Direct Selection Tool' (A), select each and every anchor point along the paths of the shape, and make sure it is aligned on a grid coordinate. Also, make sure you have View > 'Snap to Pixel' enabled.

0

We had some problems at work with icons looking fuzzy. What we did is that we resized all the icons on illustrator as double the size they should be on the browser. When the developer was coding he divided the image by 2 or just set the dimensions manually divided by 2.

The exporting was done the same way "save for web" and with PNG 24.

After that all the icons and images had a crisp look. You can try that and see if it works for you too!

0

Try using the svg file format for logos. You would not get the anti-alias effect as svg does not use pixels but vectors.

  • Unless the coordinates for the points fall in fractionary pixels, which is why lines look fuzzy. – Luciano May 24 '16 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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