2

Every time I try saving my logo from Illustrator, it comes out blurry.

The logo was done in Illustrator (as a vector file). I tried tracing the outline, rasterizing, saving in all types of files....The font still looks blurry. I have no idea why. I use a Retina Display mac and haven't tested it in a regular computer.

Suggestions? Below are a couple of different file saves...

Save #1

Save #2

Save #3

Save #4

Save #5

Improve this question
7
  • 1
    Needs clarification; what use case? Browser?.... what platforms & browser versions? Budget?
    – tomByrer
    Commented Dec 26, 2014 at 19:03
  • Hey @Joel Cas are you still having this issue?
    – Jenna
    Commented Dec 29, 2014 at 17:55
  • Hey @Jenna, yes I still am. I don't know how to save the logo for it to not look grainy and for the font to be perfect. I rasterized the whole logo.
    – Joel Cas
    Commented Dec 30, 2014 at 19:03
  • Ok Joel, so as Tom asked, what use case? The last one looks fine on my phone and computer...
    – Jenna
    Commented Dec 31, 2014 at 10:15
  • Hi @Jenna, what do you mean "what use case?" #Beginner
    – Joel Cas
    Commented Jan 1, 2015 at 17:26

2 Answers 2

Reset to default
4

Is your artwork still in vector format? Your last uploaded logo looks pretty good but you may find something useful below.

Saving file as a JPEG or PNG

First go to file - save for web. I would suggest saving at high (Just remember that the higher the quality, the longer the load time for a web page). If your working file is a vector then you can export at any size that you want. I would make sure to check Type Optimized. See bottom of the image. For PNG, I would use PNG-24 for best results. Just make sure you use "Type Optimized" again.

enter image description here

You can always preview the image in a browser in the save for web dialogue box. At the bottom click preview. You might need to select a browser first.

Below options require that you have knowledge of coding.

Saving files as a SVG file

You can save your logo as an SVG and scale the image to any size with css.

Css Tricks has a great tutorial on how to do this for the web.

Saving files for Retina Displays

Since you're using a mac with a retina display you can save 2 different files. Say you want your image at 50px. You would save 2 different files. 1 file at 50px and the retina version at 100px.

You would need coding experience to deploy the logo onto the website to show the retina version.

Here is a great tutorial for that: The Right Way to Retinafy Your Websites

There is also a great js file for this: Retina graphics for your website

Improve this answer
0

This blurriness is Illustrator's anti-aliasing when the shapes don't match the pixel grid. Turn on View > Pixel Preview to see how your image will look when exported. Then you can align the shapes to the pixel grid to minimize the blur. Here's an official Adobe tutorial on how to do it:

http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

Note that without the Pixel Preview feature on, the image in Illustrator will always look better than what you export - it's because you're working with vector shapes, and the output is rasterized.

ETA: To edit the text, you could convert it to a path and resize it to match the pixel grid, but I'd be wary - manipulating the typography without a good reason and experience can do more harm than good. Unless you're familiar with it, in that case - go ahead.

Improve this answer

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