Saving a Logo as an Email Signature via Save for Web (Legacy) in Illustrator

[taylorh3542508]

Hi everyone!

I am dealing with an issue that is starting to drive me crazy. I am working on creating an email signature (400px x 200px) for a client and it includes a logo that is made up of text. No matter how I create the image itself, it always comes out blurry when I save it for the web even if I use the Save for Web (Legacy) tool. The image needs to be saved as a PNG file for the client, so that is what I've been using.

I use the preview button on that tool constantly to see what it would look like on the web, and it still shows up blurry:

This is what the email signature looks like at 1200px x 600px at 300dpi as a plain vector image in Illustrator: 

Nice and clear and crisp.

Now, here is my issue. When I take the size of the artboard down to the desired size of 400px x 200px, it becomes intensely blurry:

I have tried truly everything:

-Created a 400px x 200px artboard in Illustrator in RGB format at 72ppi-->comes out with the same, very blurry results.

-Created a 400px x 200px artboard in Photoshop in RGB format at 72ppi-->comes out with the same, very blurry results.

-I've created a larger canvas size, saved it at a higher resolution and then gone back in and decreased the size of the image--> it still comes out blurry.

I am starting to lose my mind. I have tried to create it in Illustrator and then move it to Photoshop, vice versa, -re-created the artwork completely in Photoshop (text and all) to see if that helps, and without fail, it always comes out blurry.

If there is anyone who thinks they have an idea of something else I could try, I am all for it! Or if I am just doing something completely wrong, please let me know. I also wouldn't be opposed to someone taking the time to walk me through the correct process if I am in the wrong-I would really appreciate any help you all can give. Thanks so much!

[Ton Frederiks]

I am afraid that there is not much you can do, a pixel image is a pixel image.

Maybe increasing the resolution to 144 ppi and setting the anti-aliasing to Art Optimized will improve it a little.

[Monika Gause]

Your result looks fine to me.

What do people expect? That they can print their email signature on a billboard?

[Bobby Henderson]

You can make the lettering look a little bit sharper by doing a couple of things. First, design the layout using a 400 px X 200 px artboard. Next, use Illustrator's Font Height Options to set the physical capital letter sizes in whole pixel values. The baselines of those letters need to be aligned with the pixel grid. Those steps will deliver a noticeable improvement because the baselines and cap height lines of letters will be sharp. The end result still won't look perfect (like a vector image) but it will be better.

[d0nut247]

I think the issue you are having might just be that your design is too detailed to resolve in just 400 pixels wide. Imagine trying to draw it out on squared paper with just 400 squares across?

use pixel preview and screen zoom 100% and work on something that looks OK and works at that scale (on an art board set to 400x200). I think You'll see you need to put much less 'stuff' on there. 

[Matthew38607276ub9v]

Hey all, 

Just an FYI - I have been struggling with this for ages and I FINALLY found a work around. 

It's not ideal but it worked... 

Open the Illustrator file in illustrator and take a screenshot (I am on mac) - I then used this screenshot as the signature and it worked and is clear and even resizes automatically and is clear in all sizes. 

Sounds like a weak work around but hey, it worked. 

[Ton Frederiks · Accepted solution]

Try if Export for Screens > PNG > 2x and Art Optimized anti aliasing works too.

[Matthew38607276ub9v]

Oh wow, very nice! Thank you!

[Ton Frederiks]

That is because the Mac screens and screendumps have a resolution that is 2x the 72 ppi default resolution of Illustrator. Making a screendump and exporting at 2x will give both 144 ppi as the result.