pixelated text illustrator

[Elena RO]

Hi everyone, 

I need your help to fix an issue with Illustrator. 

I have created a text using the font BonvenoCF-light and when I export it to PNG in the original size it comes perfectly fine but when I reduce the dimension to 350px, 400px, and 600px it becomes very blurry.

The website developer needs those sizes to use the logo for the mobile version.

Any suggestion?

Thanks 

[Ton Frederiks]

Images are made of pixels. It depends on the size of the font, the kind of font (a light font has thin stems) if there are enough pixels available when exported as an image. 

Hard to tell without seeing the problem.

[Eric Dumas]

Hi,

I would test this:

• make a copy of  your design - keep your original ai file safe
• outline your spare design (Object > expand) or (Type > Create outlines)
• export as SVG
• open in web browser

[Anna Lander]

show please the screenshot of the original artwork (in Illustrator) and the PNG set (all sizes).

Did you reduce the dimension when exported or changed the full-size PNG?

[Anubhav M · Accepted solution]

Hello @Elena RO,

Sorry to hear about this experience. As pointed out by Ton, if you use a Raster format such as PNG to export your logo it may become a lot less legible (pixelated) depending upon the resolution of the final export and the complexity of the artwork.

I would recommend exporting logos as SVGs as suggested by Eric to maintain legibility across all sizes as it is a vector format and thus allows for scaling to work better in such scenarios.

Also, you may share the file here or via DM so we may provide you with more insights on what can be done to better enhance the final output.

Looking forward to your response.

Thanks,

Anubhav

[Elena RO]

Thank you guys for the useful replies,

please see below the picture of my artwork in .ai and PNG

 

[Anubhav M]

Hello @Elena RO,

Sorry for the late response. I hope the problem is resolved by now. If not kindly try exporting as an SVG after creating outlines as suggested by Eric or export as PNG at a higher resolution to alleviate this problem.

Kindly update this thread if you need further assistance. We'd be happy to help.

Thanks,

Anubhav

[Denise Y]

I have a similar problem and I have followed all recommendations, even what was suggested by Eric. The SVG looks pixalated in the browser as well. Not sure what to do as I am quite new to Illustrator. Any advise?

[Bobby Henderson]

Are the elements in your SVG file vector-based? Any pixel-based images saved inside a SVG file will still look pixelated (especially when scaled up or zoomed in size). Vector-based objects are resolution independent; they can scale to any size and still look razor sharp.

[Denise Y]

The font I am using is pixalated. All other things are fine.

[Monika Gause]

Can we please see that?

Together with layers panel, appearance panel and the name of the font would help.

When is it pixelated? After exporting, in the browser ...?

[Denise Y]

Already in Illustrator I see it is pixalated.

The font is Agency FB Bold.

I would like to attach my .ai file but I am getting the following:

Correct the highlighted errors and try again.The attachment's logo.ai content type (application/postscript) does not match its file extension and has been removed.

Any advise?

[Denise Y]

Probably not allowed. Attached is a screenshot. You see that all letters with slanting or diagonal lines are pixalated. The other ones are fine.

[Bobby Henderson]

The letters in font files, such as Agency FB Bold, are vector-based. If the letters are somehow looking jaggy, pixelated, etc within Adobe Illustrator then it sounds like a graphics card and/or computer monitor display issue. What resolution setting are you using with your computer monitor? Do you have GPU acceleration enabled? In lower resolution display settings any graphical items with diagonal lines may appear jaggy, even if it is vector-based artwork. Diagonal lines in artwork will look more clean on full HD or higher resolution displays.

[Denise Y]

Ok cool, so I did everything right regarding the logo in Illustrator!? Will have a look at my monitor settings and see if I have a higher resolution to select.

Thanks so much everyone, highly appreciated 🙂

[Monika Gause]

The font is already outlined in your file.

There are pixels in your monitor. And there are a lot of slanted lines in that text. So maybe your monitor is just not very high resolution?

[Denise Y]

 I have attached the png file of the logo. Can you guys see if it is pixalated on your screen or if it is fine like that?

[Bobby Henderson]

Your PNG image looks alright on my setup. I imagine a SVG version of it would look as good, but would behave better if scaled to larger sizes (or if the browser view was zoomed by someone viewing the web page).

[Denise Y]

Great, I was actually going crazy as I didn't know what to do. My second screen as well as my laptop screen go only to 1920 x 1080, which is probably not enough or graphic card related. Thanks for your help 🙂