I made a website layout in the latest version of Illustrator. In the layout there is a banner at the top. I made an artboard that is the exact size as the banner (900x400px). Inside that banner I placed a masked JPG (I made sure that the JPG is high-quality and big enough for the size of the mask/banner). On top of that image I placed some vector graphics. In illustrator everything looks great. Now, I try to export that artboard as a JPG, and then when I check the exported image in PS, it looks really bad. It's an image of a pine tree branch. And in illustrator the pine needles are sharp and nice, but in the exported JPG they have jagged edges. I tried many different settings, 100%, 80%, 72dpi, 150dpi, everything... No matter what I try, the edges of the pine needles remain jagged. The vector graphics on top of the image look fine. It's just the image file underneath that looks bad.
Can anyone provide any insight? Help is much appreciated!
Copy link to clipboard
Please post the original image and the export that looks bad, as well as your export settings.
Thanks for your reply.
I can't send you the files in question, as it's a confidential design proposal.
But I quickly recreated the problem with a different photo. I exported the photo at 2000x3000px 72dpi. I placed it in a 900x300px artboard (it's a RGB document, document raster effect settings are 72dpi). I slightly scaled down the image to about 60%. I then exported the artboard with Export as > JPG (max quality 150dpi). Btw, I'm on a 2019 Macbook pro, so I have a Retina display.
When I open the exported JPG in PS and view it at 100% the branches are clearly jagged. Again, the vector graphics are fine, so it's something to do with the photo.
Can you try again using Art Optimized anti-aliasing? Here's what I get performing those steps compared to your export on the right:
Hi Doug, thank you for that suggestion! It really improved the quality of the image. I never looked at that exporting option before, so thanks a lot for pointing that out. Problem solved!
I'd do this the other way around, i.e. import vector from AI into Photoshop. In any case I'd prepare the artboard @2X (1800 x 600 instead of 900 x 300) to cater for retina displays. Then if you do Save for Web from AI (you can reduce the output size to actual for the client preview purpose) you may get better results.
Hi Kenneth, thank you for your suggestion. Actually, the anti-aliasing option that Doug suggested really improved the quality of the image, so I think my problem is solved.
Cool. Take a look at Save for Web too though, which has more control, and all important antialias options, I forgot to mention! 😉