Highlighted

Export to JPG/PNG basics

New Here ,
May 12, 2020

Copy link to clipboard

Copied

Hi,

 

I regularly design images (like website banners, social media images etc.) for my job in InDesign. I know the InDesign basics from school, but they never teached me how to export properly. I keep having issues with exporting my files to JPG or PNG. I always export at quality 'high' and resolution 300ppi and I check the box 'anti-aliasing', but mostly they are too big to use on web/social media when I use this settings. When I export with less ppi/quality they always come out pixelated or 'grainy' around text/objects.  I don't have this issues when I export to PDF.  Is there anything I'm missing, or can someone mention the 'basic rules' I have to take into account (or a website/video that explains it). Thanks very much!

Adobe Community Professional
Correct answer by rob day | Adobe Community Professional

Here’s an example using pixel dimensions in InDesign and an export to 72ppi PNG—the matching view in Photoshop at a 100% . The text is set from 54pt to 10pt:

 

Screen Shot 5.png

Topics

How to, Import and export, Publish online

Views

1.2K

Likes

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

Export to JPG/PNG basics

New Here ,
May 12, 2020

Copy link to clipboard

Copied

Hi,

 

I regularly design images (like website banners, social media images etc.) for my job in InDesign. I know the InDesign basics from school, but they never teached me how to export properly. I keep having issues with exporting my files to JPG or PNG. I always export at quality 'high' and resolution 300ppi and I check the box 'anti-aliasing', but mostly they are too big to use on web/social media when I use this settings. When I export with less ppi/quality they always come out pixelated or 'grainy' around text/objects.  I don't have this issues when I export to PDF.  Is there anything I'm missing, or can someone mention the 'basic rules' I have to take into account (or a website/video that explains it). Thanks very much!

Adobe Community Professional
Correct answer by rob day | Adobe Community Professional

Here’s an example using pixel dimensions in InDesign and an export to 72ppi PNG—the matching view in Photoshop at a 100% . The text is set from 54pt to 10pt:

 

Screen Shot 5.png

Topics

How to, Import and export, Publish online

Views

1.2K

Likes

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
Most Valuable Participant ,
May 12, 2020

Copy link to clipboard

Copied

InDesign is not the right tool for this. If you need web graphics, the best way to create them is in Photoshop. If you insist on using InDesign, export a PDF, open that in Photoshop and save as JPG or PNG from there.

Likes

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
Reply
Loading...
New Here ,
May 12, 2020

Copy link to clipboard

Copied

Thanks for your answer! 😊 It also happens when I design my images in photoshop and then export them to PNG. But I am very bad with Photoshop basics, so I probably don't have the settings right. I use this settings, and it's at 300ppi. So InDesign is only suitable for print?photoshop.PNG

 

Likes

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
Reply
Loading...
Adobe Community Professional ,
May 12, 2020

Copy link to clipboard

Copied

When I export with less ppi/quality they always come out pixelated or 'grainy' around text/objects.

 

If you set your InDesign ruler to Pixel units what are the dimensions of your page? Could you show a screen capture of a 72ppi banner export in Photoshop with the view set to 100%?

Likes

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
Reply
Loading...
Adobe Community Professional ,
May 12, 2020

Copy link to clipboard

Copied

Here’s an example using pixel dimensions in InDesign and an export to 72ppi PNG—the matching view in Photoshop at a 100% . The text is set from 54pt to 10pt:

 

Screen Shot 5.png

Likes

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
Reply
Loading...
Adobe Community Professional ,
May 12, 2020

Copy link to clipboard

Copied

Hi,

if your target media allows for Scalable Vector Graphics, best do your work with Adobe Illustrator and save to the SVG file format. That is very light-weight compared to a pixel image format. The quality is superior.

 

Details:

https://helpx.adobe.com/illustrator/how-to/export-svg.html

 

Regards,
Uwe Laubender

( ACP )

Likes

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
Reply
Loading...
New Here ,
May 12, 2020

Copy link to clipboard

Copied

Thanks! I already tried this, but our website, mailing program and social media unfortunately does not support SVG. 

Likes

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
Reply
Loading...
Adobe Community Professional ,
May 12, 2020

Copy link to clipboard

Copied

I regularly design images (like website banners, social media images etc.) for my job in InDesign

 

Before you start you have to know the banner’s required pixel dimensions. Is the page code loading a single version, or will there be media queries loading a higher res version for Retina or HiDPI screens. If you know the pixel dimensions you can setup your InDesign document’s width and height as pixels (with your  ruler units set as Pixels). If the JPEG or PNG export Resolution is set to 72ppi the exported image will have matching pixel dimensions.

 

Starting with Photoshop at the same pixel dimensions would not provide any better text quality. In either case you should assess the quality of the final JPEG in Photoshop with the view set to 100%, which displays the image to monitor pixels at a 1:1 ratio.

Likes

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
Reply
Loading...
Participant ,
May 12, 2020

Copy link to clipboard

Copied

"Starting with Photoshop at the same pixel dimensions would not provide any better text quality."

 

This is not entirely true. In Photoshop, you can choose from more anti-aliasing options for text, not just anti-aliase or not as in InDesign. Useful mostly on little texts. No problem using InDesign for bitmaps for LCD like 1920x1080 or so, but on smaller banners, it differs a lot.

Screenshot 2020-05-12 at 19.23.46.png

Likes

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
Reply
Loading...
rob day LATEST
Adobe Community Professional ,
Jun 03, 2020

Copy link to clipboard

Copied

I prefer InDesign’s anti-aliasing to any of the PS options. Photoshop Sharp on the left, which seems to be the most legible option at small point sizes,  vs. InDesign Anti-Aliased on the right:

 

Screen Shot 3.pngScreen Shot 4.png

Likes

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
Reply
Loading...