How to save logo for web from Illustrator (logo looks pixelated after uploading)


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

12/25/2014 5:20:00 PM

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

1/9/2015 5:32:00 PM