Creating InDesign web ads saved at 72ppi they look blurry.
When saved at a higher ppi and then checking image size in Photoshop, the pixel dimensions off.
If you create a web banner ad in InDesign, what is the best way to save it?
Creating InDesign web ads saved at 72ppi they look blurry.
When saved at a higher ppi and then checking image size in Photoshop, the pixel dimensions off.
If you create a web banner ad in InDesign, what is the best way to save it?
I sometimes use InDesign to create images for the web. I've discovered a few tricks.
Pay attention to the pixel grid of your document. If you want boxes and horizontal and vertical lines to be crisp without anti-alising you need to make sure they align with the pixel grid.
Here the objects are aligned with the grid (I notice that one gray pixel. I have no idea why InDesign makes this "rounding error". The line does align with the grid in my document.):
Here they are not:
Sometimes small texts can look too weak. This white text almost seems light gray:
If I add a 0.2 pt stroke on the text it gets a tiny bit bolder and seems whiter:
InDesign doesn't always render pixels as crisp as you would want. In some cases it's possible to get a better result by exporting an image which is 2, 4 or maybe 8 times bigger than needed and then scale it down in Photoshop.
Here is an example (click it to see it at 100%):
I use InDesign to ocasionally create banners or social media covers, which I export in PNG or JPG at 72ppi and that's that. The clients don't complain, so I guess the banners are fine. Yes, they can look pixelated if you zoom in on the page, but that happens with any other web banner in the world.
If you're saving JPGs, you can experiment with the 'Quality' setting in the export panel, which may give you a sharper file. And that's pretty much all you can do.
You need to roll back two steps.
Indesign is not screen friendly (just opened new file for iPad, confirmed it's not), So any graphic that you place in Indesign is sized accroding to it's pixel or Real Life dimensions (depending on what file you created).
So when you create a bannner 100x30 px and place 50x30 px it will take that amount of pixels. No matter what the Actual or Effective PPI are.
So before exporting check that any graphic you have placed have Effective PPI of 72 (or higher).
This is why it's better to use Photoshop, it match the resolution of placed image with the target file and if you rescale it will show the result on the fly while InDesing might be misleading with it "typical" and "high quality" display.
The best way is to simply export double the size. Then save for web using Photoshop. If there are many images just create an action in Photoshop that resizes all the images with one click...easy peasy