: 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

@Courtney577

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

Vote Up Vote Down

@Pope1402555

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

Vote Up Vote Down