How to Create Fixed-Layout iBooks, Part 3

Before we can continue building our fixed-layout ebook we'll need some content to put in there. This is, of course, the reason we're here undertaking this project, so I would presume you already have something you want to make an ebook out of, and as we're focusing on fixed-layout format you've likely got some heavy art to include. First, however, you must understand the nature of the medium that you'll be working in.

In standard ebooks the size and placing of elements onscreen can change, which makes everything relative to everything else. But in fixed-layout ebooks everything is...well... fixed, and consequently the size and position of every element is absolute. In order to place those elements accurately, therefore, you must know precisely where you want them to be and how to put them there. This will require a slightly technical explanation, so bear with me for a moment.

DISPLAY RESOLUTION

The current iPad screens contain 1024x768 pixels at a resolution of 132 pixels per inch. However, the pixel density of 132 is irrelevant since the total number of pixels is fixed. In print, a resolution of 100 pixels per inch would make a 1000x1000 pixel image print out at 10" x 10" square, whereas a resolution of 200 pixels per inch would make that exact same image print at only 5" x 5". But on a fixed digital screen both images will appear exactly the same, although a higher resolution image will generally look crisper since the original art will tend to have more detail.

The iPhone4S and iPod Touch have a screen resolution of 960x640 pixels at 326 pixels per inch. With nearly three times the density of pixels, the smaller screen has nearly as many total pixels (614,400) as the larger, but lower resolution iPad (786,432 total), even though the iPhone display is only 3.5" and the iPad nearly three times that at 9.7". This is why the smaller screen has the ability to display almost as much detailed content as the larger one.

To make matters worse, resolution will continue to increase until the larger tablet screens reach the pixel density of the smaller ones. Fortunately for us, 326 pixels per inch is pretty much the upper limit of the human eye's ability to discern individual details, so increasing pixel density further would be pointless. But when the iPad's 9.7" screen reaches the iPhone's level, its total pixel area will be 2529x1897 for a massive total of 4,797,513 pixels, every one of which you'll need to fill with content and color.

Now, some of those pixels can be duplicated, so that, for example, one pixel in a 1024x768 image created today will be displayed by a 4 pixel square in the 264-ppi 2048x1536 display rumored to be coming on the iPad 3 due out this April. Theoretically, the image should look pretty much the same, although in fact it will be zoomed and pixelated and somewhat fuzzy by comparison, since that 1024x768 image will only fill the middle of a screen with four times as many pixels (twice as many wide, and twice as many high), and it will be the display processor that calculates what color to make those extra pixels, not you. Crisp edges will become fuzzy where black meets white and the display logically selects three shades of gray as a compromise for the three new pixels it must fill in when zoomed to full screen resolution.

More importantly, these are all pixels that could contain more detail and present a clearer, crisper image. For this reason it is recommended that you always create artwork at the highest resolution possible to future-proof your hard work against the higher resolution screens that are surely coming. In the iBookstore Asset Guide Apple themselves recommend using images that are "at least twice their intended display size" for this reason, as well as enabling users to zoom in to see more detail.

FILE SIZE LIMITS

Complicating matters are two further issues we must take into consideration. First is Apple's two million pixel limit for each individual image. This is apparently not a hard and fast rule, but images larger than this may not display properly, or cause the iBooks app to crash. Given this restriction, the largest single image size legally allowable in the iPad's 4:3 aspect ratio would be 1224x1633, a total of 1,998,792 pixels. Of course, you can place more than one of these on a page, and two of them side by side makes up a full landscape spread. But this brings up our next consideration, which is total file size.

Since .epub files use .zip compression in their packaging, they must adhere to the zip archive's current 2 Gb limit, and this is a hard and fast rule which cannot be broken. Now, two gigs is a pretty enormous file, so there's really not a lot of concern here. But as files get bigger and enhanced ebooks include more content, it becomes increasingly possible this limit might be reached, particularly if a lot of video is embedded. The 28 images included in my Ring Saga sample chapter bring its total size to over 24 Mb - a long way off from two gigs, but it's only one chapter of a proposed 450-500 page project, each page of which is roughly 1 Mb at a quality setting of 10 in Photoshop. More compression can, of course, bring these file sizes down, and may be necessary for the final complete ebook. But where quality is concerned, the less compression the better. It's a compromise each ebook artist will have to make for themselves. And if screen resolution continues to increase, even these image sizes will be too small.

The bottom line is that when you're creating high quality artwork for a graphic novel or illustrated ebook with full-page images, you should ideally create them as close to the two million pixel limit as possible and work from there. I create my original artwork at upwards of 4000x3000 pixels or so and then shrink to fit. The iPad, by the way, automatically resizes larger images to fit the screen, in whichever orientation it's being viewed. You can double-tap to view full screen, or pinch and zoom to view the image at full size.

ACTUAL IPAD SCREEN SIZE

Although the iPad's total screen size is 1024x768, Apple's "recommended page size" in the Asset Guide is only 985x738, due to space taken up by the faux book pages and menus. Consequently, this is the size I've used in the template to give you the official example. However, since the upper and lower menus go away (leaving blank space above and below the pages), if you want to completely fill a horizontal view with a two-page spread, the actual optimized page size you should use is 1024x682, or increments thereof. At this aspect ratio, the maximum image size within the two million pixel limit would be 1732x1154 (1,998,728 pixels).

Recent updates have included the option to turn off the faux book borders in standard iBooks editions, via the font display menu, but since this menu is not available in fixed-layout iBooks, the faux book pages are there whether you want them or not. This may change at some point down the line, of course, particularly seeing that the new .ibooks format no longer has them (although they may just be turned off in the few textbooks I've looked at). But for the time being, you'll want to take them into consideration when creating your art layouts, as I have done above, since removing them will slightly alter the full page aspect ratio.

SPANNING IMAGES

Fixed-layout iBooks actually allow you to use a single image to fill a two-page spread by spanning the image across the pages. However, given all I've just said I highly recommend against this, since Apple's pixel limit only applies to each individual image. If you use one image to fill two pages, you have effectively cut the maximum size of your artwork in half, with only one million pixels per page. This is still enough to fill up the pages currently, but only just, and tomorrow it will look like crap. Additionally, it's a whole lot of extra effort and confusion to format for no real good reason. It is vastly easier to cut an image precisely in half in Photoshop than to span it across two pages. You have to create two separate page files either way, and the seams match up perfectly. This is what I've done in the Ring Saga sample, so have a look at that as an example.

However, in the interest of giving you a full range of options, I'll include the information anyway, as there may be occasions when it could be handy. For example, if a smaller image runs across two pages of, say, a magazine-style layout, or a travel guide or some such, particularly since this would allow you to adjust the image placement without having to go back in to Photoshop and crop it up again.

But I won't get into that just yet. First we'll build some single pages.

NEXT UP: Creating Your Cover