I’ve made a few visual improvements to the Leaves framework while putting together a friend’s book app. Leaves will let you add book-like functionality to your apps, letting you load in a PDF and get page turning interactivity. It’s not as advanced as iBooks — the pages remain axis aligned when turned, and double page spreads are not supported, but it’s open source and works pretty well out of the box.

One not-good thing is the default shading of turning pages. There are a few issues:

1. Dark shadows
2. Narrow shading regions
3. Mach banding due to 1 & 2

To create the shading, Leaves uses CAGradientLayer objects with linear blends. Non-linear blends will solve the problems, and although these can be approximated in CAGradientLayer with multiple gradient stops, creating shading bitmaps in a graphics program offers much more subtle control.

I created three new shading images in Illustrator and converted them to PNG files. I added some reflected light on the turning page as well. All of this was a very simple to do but I think it provides an enormous improvement to the user experience.

The required code changes are also quite simple, and limited to the LeavesView.m file. You can download the new LeavesView.m and gradient PNGs at the bottom of this post.

Download

Leaves Page Shading 1.0.1