Why with the jagged lines?!

[365megan]

My diagonal lines are jagged and stepped when exporting to .PNG and I can't figure out how to fix them. I've tried turning off GPU, exporting at different resolutions, and numerous other things. I even had someone from Adobe support remote control my computer and they couldn't fix it either. Is this just the quality I get? 

PNGoriginal in Ai

[matthewn43692242]

If you're looking at the PNG on a retina display (any display with a res higher that the normal 72dpi) the PNG will look jagged at normal zoom. Export at about 3x the size you think you need. Good print resolution is about 300 dpi. a PNG will export at 72dpi by default so at normal zoom it wont look too hot. If you have photoshop you can change the res from 72 dpi to 300 dpi to control the print size as opposed to the screen size.

[Conrad_C]

What are the pixel dimensions of the artboard, and does the artwork fill the artboard or is it a small area of it?

Which export method did you use for the PNG: Export for Screens, Export As, or Save for Web (Legacy)?

[Ton Frederiks]

What is the zoom factor of the image shown in Illustrator?

What are the dimensions of that image?

It looks like you are exporting a very small object.

[Monika Gause]

That PNG looks OK to me. It's just what you can expect. PNG is a raster image file after all.

[Mike_Gondek]

Open your .png in Photoshop and view filename@100%. Your screenshot looks good to me @ 100%, and obviously staistepped if you zoom in. If you need bigger you will need to export with more pixels,

[Ton Frederiks]

If you would attach the AI file, it would be easier to answer your question.

[365megan]

Apologies, my captions were incorrect in that first post. The blurry one was the PNG and the clear one was in Illustrator. I'm working at 100% zoom but I'm not sure of the exact dimensions of the image. So I started with a 3D model in Rhino, made 2D line drawings and then saved them as an .ai file with a 1inch = 0.125 conversion. That conversion gave me the best result in Ai and I didn't need to scale the images. From there, I was saving them as a .PNG and I've tried exporting (Export As...) in every resolution option I have, screen, medium and high as well as trying both anti-aliasing options. I should say that I'm then taking the .PNG and putting it on my website and there is where the distortion is really bad. My line drawing is good in Illustrator, smooth even when I zoom in, but it shows terribly on my website. I don't know if its just my screen or something with squarespace (my website host) or what the issue is. I don't how to attach the Ai file for review....

[matthewn43692242]

I think you might actually be dealing with what is refered to as "retina support" in the web browser. This means support for high-res screens. There are specific css solutions but I don't know too much about squarespace so I don't know if you have access to css or html code directly.

a "regular monitor is measured at 72 dpi, retina monitors are more like 220 dpi but the whole placement system is still based on an assumed 72dpi unit so you basically upload images that are about 2x or 3x the size of the space. Square space may figure out the rest on it's own.

If not, you'll have to edit the code. There are 3 or 4 ways to do it.

For example: (simplest solution)

• you have a space on the web page that is 400px by 800px.

• Upload an image that is 2x (800px by 1600px) 

• Hard-code the image size in html or css to 400x800

• This gives you double the resolution in the same display space. The image wil look sharper.

Search "retina support" & you'll easily find the 3 or 4 best optpns to do it. You may actually just want to export the image way bigger than you think you need & see if squarespace figures it out on its own.

[365megan]

From what I was reading on squarespace, I have a resolution limit of 60mp and I should use images that are between 1500 and 2500 pixels wide. I have no idea what size my current image is at nor how to change it....

[matthewn43692242]

You'll have to export it from Illustrator at a bigger size to begin with. You wont get an "size" option with PNG export in AI. You'll only get a resolution setting. Set it to about 600dpi & try that.

[matthewn43692242]

if you don't have photoshop you can download a free, opensource app called GIMP for image editing. Bad name but a great, solid, reliable app thats been around for many years. gimp.org. That will allow you to see and edit the size/resolution of any image format. Or you can try a trial of photoshop.

[365megan]

I’ll try that and see how it goes!

[Ton Frederiks]

Try View > Pixel Preview in Illustrator with a 100% zoom factor.

I am sure your design is too small to export without the distortion you showed.

[365megan]

ok, upping it to 600 ppi didn't do anything for me. Now I'm in photoshop, looking at my image size. Anything look weird?

[Monika Gause]

Please tell us the stroke width in Illustrator.

[365megan]

0.5 pt

[Monika Gause]

THat might just be too thin to get good results.

[matthewn43692242]

Well... The preview looks like it's zoomed waaay in but from the one diagonal line I can see it actually looks pretty smooth. You should be able to get smooth lines even with a .5pt stroke especially if you're exporting at a high res like 600dpi. In what context do you see the jagged looking lines? does it look bad in photoshop or only when you load it to the web page? Squarespace could be re-saving the image automatically.

Other posters may have a point here anout the size of the original drawing. You could scale up the whole drawing to 200% & use 1pt stroke instead of .5 & see if that helps.

[365megan]

The jagged lines come into play when I post to the website. They look good in Illustrator and photoshop, but look like crap when I load them onto my website. You guys will have to bear with me, I'm sure you can tell, I'm VERY new to these programs. So when you say "scale up the whole drawing" I'm not sure what that means or how to do it....

[matthewn43692242]

You did the right thing. If you want more control of the scaling in Illustrator just select the whole drawing by using the selection tool (black arrow) to drag a bog around everything then double-click the scale tool in the toolbar and scale to 200%. There will be an option to scale the stokes & effects. if you check that your stroke widths will scale in proportion to the drawing. If not, your stroke width will remain 0.5. .

[365megan]

ok, I used the scale tool to scale things up, not sure what exact size I'm at, I just made it bigger. My stroke weight is 0.5pt and I exported (Export As...) at 600 ppi with the Art Optimize anti-aliasing option to make a .PNG. When I loaded it onto my website, this was my result...

[Monika Gause]

The forum software at the moment unfortunately scales down or up the embedded images to its own delight. Nobody can be sure as to what we see. So you might want to post your website adress. This can also help, because someone might figure out if your HTML or your content management system messes up your images. Screenshots don't help here.

[matthewn43692242]

It's really looking more & more like the problem is with how sqaurespace is treating the image. You've really got to have a look at your exported 600 dpi PNG in Photoshop to see if it looks jagged. If it looks ok there but looks bad on the web page then you'll know the issue is with squarespace.

[365megan]

Yeah, I'm starting to think it's more a squarespace thing too...here's the link to the webpage.

https://www.360fivedesigns.com/shop-all/copy-of-6-dot-dining-chair-gnkja

the dimensional drawings are at the bottom of the pictures.