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