Participating Frequently

Question

Illustrator is exporting blurry PNGs

23 replies
6757 views
Translate

Every PNG I export from Illustrator is blurry regardless of the export settings I choose or the method I use to export. I've read all the other posts associated with this issue and tried all of the suggestions and nothing seems to work. I created the design in Illustrator to the exact dimensions needed (500px x 200px) and I've even tried changing the units in AI's Preferences with no results. The application is to provide my companies branding to be displayed on a thrid party vendor application. They only accept PNG, GIF, or JPG formats. I've attached a video showing what I'm dealing with and the settings/parameters I'm using. When I export to PDF, the quality is perfect. Even though PDF is a vector and PNG is a raster the same quality should be achievable because it has been in the past. FYI...All my software and OS are up to date.

This topic is closed to new replies. Start a new post to keep the conversation going.

S

Stephanie325551925gso

Participating Frequently

Hi, I'm having the exact same problem. Did you end up figuring it out?

Translate

Ton Frederiks

Community Expert

Try exporting at 2X (144ppi) and scale the result 50% when using it for web purposes.

Translate

D

dana_6480

Participant

I have the same issue. It is not a 'zooming in issue'. When the are exported, they are fuzzy at the same scale that I drew them.

Translate

Monika Gause

Community Expert

@dana_6480 schrieb:

I have the same issue. It is not a 'zooming in issue'. When the are exported, they are fuzzy at the same scale that I drew them.

Please share screenshots or the PNGs themselves.

Translate

B

Bobby Henderson

Community Expert

In addition to other suggestions mentioned, in order to create PNG images from exported Illustrator artwork with sharp rather than blurry edges the artwork often needs to be tailored to line up with the target pixel grid as much as possible. Text baselines should line up with the grid; it's even better if the cap letter heights also line up with it. Any object edges that don't align with the pixel grid will be aliased or blurry.

Translate

S

SommerPGAuthor

Participating Frequently

I will have to look into how to do this and get back to you. Thanks for your input.

Translate

Brad @ Roaring Mouse

Community Expert

If you require a defined pixel dimension like 500 x 200 as requested by the website, and your Illustrator document is set to those dimensions, you MUST export your artboard PNG as 72ppi to get an image that's exactly 500 x 200. You can confirm this by opening the resulting image in Photoshop (or even in the file info in Finder/explorer)

500 x 200 is very small in reality in that it doesn't give you much to work with, so anti-aliasing will be very prominent. Your results are exactly what is possible within that limitation. In fact, if you do a test export without anti-aliasing OFF, you will see how chunky the pixels are at those dimensions, hence why anti-aliasing is necessary.

Translate

S

SommerPGAuthor

Participating Frequently

I see what you're saying about the dimensions being exact but even exporting at 72 PPI with anti aliasing on the end result is still blurry (see attatched screen shot.) I've even doubles the px dimensions so the image would be scaled down and it's the same.

Translate

Jacob Bugge

Community Expert

SommerPG,

There are two things I should do in a way different to yours: firsly to use Type Optimized, secondly to use a resolution of 288 rather than 300, or a suitable resolution for a device of choice,

Translate

S

SommerPGAuthor

Participating Frequently

Exported with those settings and it's still the same. It doesn't appear to have anything to do with the export setting because when I have the illustrator file open and I select pixel preview, i can see how pixelated the design is. I've attached screen shots for reference showing the export using your suggested settings, one without pixel preview on, and one with pixel preview on.

Translate

Monika Gause

Community Expert

You need to set the preferences > General. Turn off "Print preview at 100%"

Then you need to view the pixel preview at 100%

Your screenshot does not show the 100% view.

Translate

Ton Frederiks

Community Expert

If you zoom in on a png you will always see pixels. If you zoom in in Illustrator, Illustrator calculates the most perfect representation for that zoomfactor. Check if they accept SVG, most modern browsers support it and you can keep it scalable and vector.

Translate

S

SommerPGAuthor

Participating Frequently

While SVGs are supported by most browsers, many platforms don't allow them because they pose a security risk.

Translate

Anubhav M

Community Manager

Hello @SommerPG,

I am sorry to hear about your experience. Would you mind sharing some more details, like the exact version of the OS/Illustrator, a public link to a sample AI and PNG file after uploading it to Dropbox/Google Drive/etc., and screenshots of the settings used so we can better assist you?

Looking forward to hearing from you.

Thanks,

Anubhav

Translate

S

SommerPGAuthor

Participating Frequently

I've attatched the actual ai file. i have exported with many different settings and it doesn't seem to affect the export quality of the PNG. i just keep getting the same blurry results so i don't think it has anything to do with the export settings. What I do notice is that in pixel preview I can see that the design is pixelated. You can also refernce the video on my original post to see my exporting process.

Translate

Ton Frederiks

Community Expert

Unfortunately you cannot attach .ai files in this forum.

But you can attach .ai files witn the extension renamed to .pdf or when saved as PDF with Illustrator editing enabled.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.