You get the blurred lines because they are not positioned exactly on the pixel grid.
When an 1 pixel wide line (or in InDesign 1 pt, which is the same) falls between pixels, it is anti-aliased when converted to a bitmap and shades of grey are introduced. Anti-aliasing is nice for type and curves, but not for horizontal or vertical lines. If the line is positioned exactly on the pixel grid, it would be a sharp 1 pixel wide line.
What you would like to have in InDesign to avoid this is an "Align and Snap to Pixel Grid" like Illustrator has.
You can request this here:
In the mean time, try this for new documents designed for tablets:
Create a new document with the pixel dimensions of your tablet.
Go to the preferences and select Grids
For Document Grid, enter the same amount for horizontal, vertical and subdivisions. I put 100 in all of these boxes.
This creates a one pixelwide pixel grid.
In InDesign go to the View menu and select Grids & Guides: Show Document Grid (you can turn that off later) and Snap to Document Grid.
This will cause your lines to snap to the grid, but they will not be positioned on the pixel, but between the pixels because by default the stroke is aligned to the center of the lines. They do snap to the grid lines and will cover half a pixel on each side of the line. This will give you blurred ant-aliased lines.
To avoid this, make sure you do not have anything selected and go to Window/Stroke.
Click on the Align Stroke / Align Stroke to Inside icon (or Outside if you prefer).
This will cause all the lines and boxes to fall exactly on the pixel grid.
Save the document as an InDesign template and use this in the future to avoid the blurred lines.
On the far left lines that fall exactly on the pixel grid and next to them lines that fall between pixels. On the right the resulting bitmaps.
This worked great, alas when you group the objects and add them to a scrollable frame, I can see no way of keeping them perfectly aligned - maybe on the initial screen they are okay but when you start to scroll, you lose a bit of quality.. never mind!
but thanks for the help!!
Thanks for that Bob.
I also have another question regarding scrollable frames, I've been having trouble (all of a sudden) with text rendering.
So the text in the visible area of the page on screen load renders fine, and is of great quality, but then when you scroll the frame, the text underneath is blurry and looks appauling.
I could understand the "rasterising" theory if all of the text looked crappy, but with the text that is visible on page load looking great, I am slightly confused how it could render the immediate text perfectly and the "hidden" text not so well
Hopefully this makes sense!
It’s especially noticeable with PDF format folios. All I can tell you is to experiment with different fonts and stay away from those with very thin serifs as these seem to look worse. Also very thin fonts will look pretty bad, too, in comparison to those that haven’t been rasterized. One idea is to use PNG on those pages to rasterize everything so that the fonts at least look the same.
@Tim – what kind of folios do you create? PDF ones?
Then the static part is no problem at all concerning text representation.
Scrollable frames however could become a little blurry if you zoom in.
They, together with overlay types like "Buttons", "Slideshows" and "Audio Skins" are resampled.
And the resolution of the resampling process depends on the folio size:
1024 x 768 pdf-folios on an iPad3
2048 x 1536 pdf-folios on an iPad3
Uwe, I do majority pdf and for certain articles with different properties, import them differently.
The page with the crappy text was a PDF, I will experiment with the import options.
Bob, thanks for the heads up there - I can see how your suggestion would definitely help - it might not be pheasable at this current point in time though
I will experiment and report back - Thanks guys!
Europe, Middle East and Africa