Export quality help

[claytonc68780763]

Hi forum.

I am new to Illustrator and forums in general so please excuse my ignorance.

I recently designed an email signature for my office and when I tried to export it, I could not get the quality I was hoping for.

In the Illustrator window the quality is great but as soon as I "save for web" the quality disappears.

Below is an image of the working dartboard:

Below is the image of the "save for web" preview:

Note the difference in quality...

I am trying to retain the artboard size of 500px by 150px. I don't know how to save this signature and get crisp lines.

Another thing is that on my monitor it shows up crisp, but on my Mac with Retina Display its blurry. A colleague mentioned that it was the resolution difference between the monitor and mac (monitor < mac).

I want the signature to be perfectly clear on all displays, not just low res monitors.

Please help!

P.S. I could post the file if it would help and someone could tell me if my settings are wrong?

[Doug A Roberts]

500 x 150 px is a small image. note that you're zoomed in to 300% in the preview window there. at 100%, it should look comparable to the vector original, but since you're converting it to pixels, you won't be able to zoom in any more and expect it to look crisp.

[Monika Gause]

With just 500x150 px this is what you get.

Inside Illustrator it's vector based artwork. No matter how far you are zoomed in, it will always render at highest possbile resolution.

When exporting in a pixel based format, it gets permanently converted to the pixel grid. When you zoom in the pixels get bigger.

BTW: THat's too much text for such a small size.

Set up a file: vector or raster, resolution, color mode and file format

[claytonc68780763]

Thanks Monika and Doug.

It seems though that my boss has a crisp email signature just in an old design. Would this have been designed on Photoshop perhaps?

Back to my original post, Are you saying there is no way to crisp the image using illustrator?

[Doug A Roberts]

yes, sure. make it using larger pixel dimensions and it will appear more crisp.

what size is your boss's signature image?

[claytonc68780763]

The problem is that I dont want the signatures to be too big.

My boss's sig is roughly those same dimensions.

On a monitor the difference isn't clear. On my retina screen, the difference is noticeable.

[Doug A Roberts]

can you post the actual files rather than screenshots of them? otherwise its not possible to compare fairly.

[claytonc68780763]

I dont have the original signature. I redesigned it myself from the original image so I only have the .ai for the new (light blue) image. Doug A Roberts​

[Doug A Roberts]

the image you posed is 844 x 262 px and looks correct at 100% for that size. if i reduce the screenshot of your sig to 500 px across, it looks sharp on screen, but of course it's considerably smaller.

[Monika Gause]

If you want this to be really accessible and want people to be able to contact you, then you should better stay away from putting all the contact details into a raster image. Many people have turned them off completely. They will never read your phone number anyway.

Aprt from that: see Doug's answer. Make it double the size and then scale down in the HTML code of the e-mail. But all of this is risky. You never know what e-mail clients are able to display and what people have set up in their e-mail software.

[claytonc68780763]

What do you mean 'stay away from putting all the contact details into a raster image'?Monika Gause

Would it work if I made the original artboard 2 or 3 times the size and then scaled down to the desired dimensions in the saving process?

[Doug A Roberts]

claytonc68780763  wrote

Would it work if I made the original artboard 2 or 3 times the size and then scaled down to the desired dimensions in the saving process?

no, you'd end up with the same image. monika is saying you should save a larger image and use HTML to scale it to 500 px across, if that's what you need. then it'll look sharper on retina screens.

[claytonc68780763]

Doug A Roberts

I doubled the image size and hit "save for web" option. The preview window at 100% looks good but obviously the exported image is now too big. If I reduce the image size in either illustrator or the png using preview it effects the quality again.

I just dunno what to dooooo.

[Doug A Roberts]

don't actually reduce the size. scale it in whatever email client you're using.

[claytonc68780763]

The problem is I want to export to an image that my colleagues can just plug into their email client and not have to mess with HTML because even though I work at a tech company, only the developers and a few others actually know how to do that.

Is there no way I can just up the resolution and keep the size the same?

[Doug A Roberts]

claytonc68780763  wrote

Is there no way I can just up the resolution and keep the size the same?

double the ppi as well as the size. seems to work fine in outlook at least.