Lines become blurry & distorted when exporting to JPG.

[matthews63743827]

Hi Guys,

I am having a problem with exporting files for web.   I am creating my new documents at 72dpi.  I make a series of lines with a 1pt stroke and export the image (for web) at 72dpi.  I am also exporting my images at 100%, so there shouldn't be any distortion from scaling.  The resulting image has lines that appear to be 2pt gray lines while other lines look okay.  I've attached the image below, and you can see the horizontal lines are thicker and gray (appearing blurry).  Why is this happening?

Thanks!

Matt

[Simmer1]

Hi Matthew,

Sometimes this does happen with Jpgs.

Try exporting the file as a PNG-24. If you do not want a transparent background, simply uncheck the transparency option.

Thanks,

Sim

[matthews63743827]

Sim,

I tried this method, but the problem still exists.  I did try to change  "Art Optimized" to "None," which corrected the issue, but any other artwork or text I include in the illustration becomes extremely rough around the edges.

-Mat

[Mike_Gondek · Accepted solution]

Turn on align to align to pixel grid and recreate you art.

If you are new to align to pixel grid, you may have an easier time creating this in photoshop or consult this Draw pixel-aligned paths for web workflows in Illustrator

[matthews63743827]

Thanks, Mike.  This fixed my problem.  I'm not sure why Illustrator doesn't do this automatically...

[Monika Gause]

matthews63743827 schrieb:

Thanks, Mike. This fixed my problem. I'm not sure why Illustrator doesn't do this automatically...

It does do this automatically when you use the right document profile. In those document profiles that are suited for screen design the align to pixel grid is turned on.

And then there are several use cases where you just don't want this option turned on. Ever.

In fact this forum contains hundreds of threads of people who desperately search for a solution to turn off this function.

[Kevin Stohlmeyer]

Be sure to mark his answer as correct

[Mike_Gondek]

For my part you are welcome.

Illustrator does this automatically when you choose one of the web/rgb presets.

In the print world, people rely heavily on their software to be accurate and not shift the artwork around for a pixel grid that does not apply to print, so that is why this is off for the CMYK presets.

You never said what versions you are in, but in 2017 they improved align to pixel grid even further, by removing that from the transform palette and the new file menus, and moving that to the top right icon with a magnet.

[Simmer1]

Hi Matthew,

As you were exporting the image as Jpg it becomes pixel based. So when you zoom into the image the lines a becoming blurred.

Here is shot of some lines I created and saved as PNG-24 (screenshot taken when file is opened up in preview and zoomed in):

Are you adding text and additional artwork within Illustrator?

Also can you provide a screenshot?

Thanks,

Sim

[Jacob Bugge]

Matthew,

I believe your lines may simply be off the whole pixels that would give crisp and clear images.

With a 1pt stroke, the (centres of the) lines should be at half pixel values (X and Y respectively) as you can ascertain in the Transform palette.

You can use align to pixel grid as suggested by Mike, or just ensure the half pixel values.