need some help exporting JPGs from Illustrator for web purposes

New Here ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

Hi,

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!

TOPICS
Import and export

Views

132

Likes

translate

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
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jan 07, 2021 Jan 07, 2021
Can you try again using Art Optimized anti-aliasing? Here's what I get performing those steps compared to your export on the right:

Likes

translate

Translate

Translate
Adobe Community Professional ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

Please post the original image and the export that looks bad, as well as your export settings.

Likes

translate

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
community guidelines
New Here ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

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. 

 

3000px 72dpi-02.jpgexported.jpgsettings.png

Likes

translate

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
community guidelines
Adobe Community Professional ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

Can you try again using Art Optimized anti-aliasing? Here's what I get performing those steps compared to your export on the right:

comparison.png

Likes

translate

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
community guidelines
New Here ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

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!

Likes

translate

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
community guidelines
Adobe Community Professional ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

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.

Likes

translate

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
community guidelines
New Here ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

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.

Likes

translate

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
community guidelines
Adobe Community Professional ,
Jan 08, 2021 Jan 08, 2021

Copy link to clipboard

Copied

Cool. Take a look at Save for Web too though, which has more control, and all important antialias options, I forgot to mention! 😉

Likes

translate

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
community guidelines