• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Banner created in Illustrator and exported to PNG comes blurry

New Here ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

Hello, I have done some research on this already but nothing that i have found has helped me so far, so i decided i would post this up for help.  Thank you in advance to those taking the time to read this

 

I have a banner to create and send off for a virtual fair, and they specifically ask for the size 326x111 and png format.

I created the banner, which includes some images with clipping masks and some text. The artboard is RGB and sized 326x111.  I have tried saving for web to PNG24 and exporting as PNG (using artboard area), and in both cases the size is kept, but it comes out blurry in the png file

 

This is how it shows in illustrator

Azucena5CBD_1-1619280749313.png

 

And this is how it shows in PNG (opened up in paint)

Azucena5CBD_2-1619280781543.png

 

 

I  have tried blowing it up five times and then resizing the png file and it distorts it again

I have also tried the suggestion of opening up the EPS version in Photoshop and then saving it in PNG and it comes out blurry again 

 

When i try pixel preview, it shows the problem, but i dont know how to solve it. 

Azucena5CBD_3-1619281222751.png

 

If anyone has any idea, it would be great help. 

Thanks everyone and keep safe!

 

TOPICS
Import and export

Views

700

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

This can't be solved. You need to turn on pixel preview. Then design it in a way that text is legible. In the character panel at the bottom right there is a menu that sets the anti-aliasing. You might want to experiment with different settings. But that's it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

Right, but the issue isnt only for the text part, the images come out blury as well... 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

The problem is possibly that your monitor uses twice as many pixels to show the design in Illustrator.

To get the same quality on export you need to use export for screens and choose 2x.

The website builders need to scale the result to look good on high def screens.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

Thank you, i do not find Export for Screens, i use Illustrator CS6    😞 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

LATEST

144 ppi is what 2X means in export for screens.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines