Highlighted

Unable to export advert in good quality, Text is blurry when i export to PNG.

New Here ,
Apr 27, 2017

Copy link to clipboard

Copied

Hello,

I am creating an advert 250 Px x 250 px in illustrator

& i want to export a good quality PNG keeping the same size.

Problem/ Story

1. I have created an art board of 250 px x 250 px

2. I created advert with text and vectors

3. I try to export to PNG in 72 DPI

4. The exported PNG has blurry text.

5. If i increase the resolution to 150/ 300 DPI

6. The image size will be become big

250_250_Tumi_test-01-01.pngScreen Shot 2017-04-27 at 2.03.19 PM.png

Above: Image1 is an exported version, And Image 2 is and actual illustrator file.

Question how do i keep image size as 250 PX and still have a good quality without blurry text.

Views

8.7K

Likes

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

Unable to export advert in good quality, Text is blurry when i export to PNG.

New Here ,
Apr 27, 2017

Copy link to clipboard

Copied

Hello,

I am creating an advert 250 Px x 250 px in illustrator

& i want to export a good quality PNG keeping the same size.

Problem/ Story

1. I have created an art board of 250 px x 250 px

2. I created advert with text and vectors

3. I try to export to PNG in 72 DPI

4. The exported PNG has blurry text.

5. If i increase the resolution to 150/ 300 DPI

6. The image size will be become big

250_250_Tumi_test-01-01.pngScreen Shot 2017-04-27 at 2.03.19 PM.png

Above: Image1 is an exported version, And Image 2 is and actual illustrator file.

Question how do i keep image size as 250 PX and still have a good quality without blurry text.

Views

8.7K

Likes

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
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

Nothing major as you only have a 250 px square to create that. You can try gif format, and play around with type and art optimized options.  Can you remove some words in the copy and make the text bigger?

Likes

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
Reply
Loading...
Apr 27, 2017 0
New Here ,
Apr 27, 2017

Copy link to clipboard

Copied

I need to keep all the text perhaps i can make it bigger. Let me try

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

If you have the option, I'd recommend File > Save As > SVG, and Type: Outline text in the dialog that appears. SVG is compatible with all modern browsers, but not compatible with Internet Explorer version 7 or earlier. You will get great type, and the rest of the ad will look great too.

Likes

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
Reply
Loading...
Apr 27, 2017 2
New Here ,
Oct 24, 2020

Copy link to clipboard

Copied

Thanks!!!!

 

Likes

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
Reply
Loading...
Oct 24, 2020 0
New Here ,
Nov 10, 2020

Copy link to clipboard

Copied

this is great! but do you know why is not cropping the size to the canvas but instead shows all elements in the artboard without treaming?

Likes

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
Reply
Loading...
Nov 10, 2020 0
Most Valuable Participant ,
Apr 27, 2017

Copy link to clipboard

Copied

I wouldn't call it blurry. I'd call it pixelated.

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

Try using the "Save for Web (Legacy)"

It has an option that optimizes the file for texts >>

Maybe this works for you
PNG_Options.png

Likes

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
Reply
Loading...
Apr 27, 2017 0
New Here ,
Apr 27, 2017

Copy link to clipboard

Copied

Screen Shot 2017-04-27 at 3.14.53 PM.png

Nope type optimized did not work

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

Can you tell me the name of the font and the size?

Just to try in my side...

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

Give SVG a try -- I think you'll like it.

Likes

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
Reply
Loading...
Apr 27, 2017 0
New Here ,
Apr 27, 2017

Copy link to clipboard

Copied

Screen Shot 2017-04-27 at 3.29.36 PM.png

Font: Roboto 18Pt & 12Pt in light and regular weights.

Likes

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
Reply
Loading...
Apr 27, 2017 0
New Here ,
Apr 27, 2017

Copy link to clipboard

Copied

The Agency wants it in one of older format PNG/ JPG...So SVG is not feasible.

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

In that case, as Mike Gondek suggested, making the type larger would help.

Aside from that you have a choice of blurry text caused by antialiasing on the edges or of jaggy-looking text because there isn't any antialiasing.

Or you could try for something in between by tweeking the colors. If you choose File > Export > Save for Web, and select PNG-8 as the file format, you can tweek the colors.

I zoomed way in on a piece of text so you could see better what's happening. The text is starting with semitransparent pixels along the edge that make it look blurry:

With the Eyedropper in the save for web dialog, click on a color that you think is contributing to the blurriness. I clicked on the medium gray at the top of the "T".

That highlights the color in the color table on the right of the dialog.

Double-click on the highlighted color in the color table to bring up the picker. Change the color to black or a darker gray. I chose a very dark gray, and the results are below:

You can continue that way, maping colors that seem to make the text less blurry looking. If you go too far maping too may colors to the exact same color, the type will look jaggy and pixelated.

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

I would send the word 'Customer" down one line, and then make that group of type larger, and move upwards so the Silos is above the air balloon. The also make the name parargraph underneath larger, and remove or move the silo on the right out of the way.

That will help, but you really are trying to get too much into 250 x 250, and this is what you need to do for  digital design. You won't find crisp small type unless it is .svg on a retina display.

Likes

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
Reply
Loading...
Apr 27, 2017 0
New Here ,
Apr 27, 2017

Copy link to clipboard

Copied

Screen Shot 2017-04-27 at 4.36.26 PM.png

PROBLEM SOLVED FOR NOW 🙂

I found an Ad hoc way to do this, till I find a right way to do this, It worked!!! Type quality is exactly same as on art board.

1. Since the banner is for web.

2. I set illustrator art board to view actual size

3. I took screenshot on my mac.( Command+shift+4) exact 250x square.

4. Cleaned the image edges.

5. Banner done for now 🙂

Thanks all for helping.

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

You are welcome.

The last image you posted is 498 pixels though, so hope you indeed got what you need.

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

Screen Shot 2017-04-27 at 6.44.34 PM.png

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

Clever workaround -- I like it!

Likes

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
Reply
Loading...
Apr 27, 2017 0
New Here ,
Apr 27, 2017

Copy link to clipboard

Copied

It looks like problem not solved!

Thanks Mike I will fix the graphic details once font issue is resolved.

I don't know how its working! The image is 249 Px when i import to illustrator.

If i import to photoshop its 498 px

Screen Shot 2017-04-27 at 4.50.00 PM.png

Screen Shot 2017-04-27 at 4.52.55 PM.png

Likes

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
Reply
Loading...
Apr 27, 2017 0
Adobe Community Professional ,
Apr 27, 2017

Copy link to clipboard

Copied

I cannot replicate this problem. If I make a screen capture at 100% size in Illustrator, paste it into an Illustrator file and paste it into a Photoshop file, it is still the same size.

Likes

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
Reply
Loading...
Apr 27, 2017 1
Adobe Community Professional ,
May 01, 2017

Copy link to clipboard

Copied

Not sure how your screenshot got to 200% of size. Do not know if you are on mac or PC and what key commands or third party software you may have used to make the screenshot. In any case looks like you r method was misleading and gave you a 498+ pixel image, so I stand by my original advice as the best I can advise.

Likes

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
Reply
Loading...
May 01, 2017 1
Explorer ,
May 30, 2019

Copy link to clipboard

Copied

To solve this problem, you should try this instead of save as web (alt+ctrl+shift+s)

Way I.

1.File> Export > Export for Screen (Ctrl+Alt+E).

2.After appeared dialog box, change save as directory as you wish at Export to.

3. After that hit Export Artboard.

Way II.

search at YouTube by => How to export png file (logo) from Adobe Illustrator without Pixelating image

Thank you so much. Have a great day.

Likes

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
Reply
Loading...
May 30, 2019 0
Resources