Constructing a Basic Illustrated Fixed-Layout eBook

I recently published an illustrated children’s fixed-layout ebook. I learned a lot going through the creation process, some of it through online resources, but some through trial and error. Below are some sketches of how I put the book together and what I learned along the way. perhaps this will be helpful to others setting out on a similar journey.

Disclaimer: I make no claims that the methods I used are the most efficient nor best practices.

What you’ll need:

  • A story
  • Artwork created in a vector drawing program that exports SVG, such as Adobe Illustrator or Inkscape (even if you use Illustrator, as I did, you’ll need Inkscape later in the tutorial)
  • A good text editor, such as Notepad++
  • Basic knowledge of HTML and CSS–pages in an ebook are really just web pages; the instructions below assume that you are comfortable digging in text files, basic formatting, HTML file structure, etc.
  • A photo editing program like Adobe PhotoShop for creating a textured background

Some ebook tutorials start with InDesign, but I skipped InDesign because building ePubs by hand would help me better understand (and troubleshoot) them. So I just used a text editor instead.

The first step is to create a textured background with these dimensions: 3098×2065. Our goal is to create a background that spans both pages in a landscape spread at a high enough resolution to take advantage of retina-class displays without exceeding publisher file size limitations. This resolution is also a nice compromise between the 4:3 aspect ratio of iPads and the 16:9 aspect ratio found on most Android tablets.

Draw your artwork in a vector drawing program on a canvas also sized 3098×2065. Leave room for your text. Just like in a paper book, artwork can span across the center of the canvas, but text shouldn’t (in a paper book, text that spans the center will be hard to read because of the crease; ebooks don’t have creases–except as skeuomorphs–but readers have only the left or right page displayed at once, and keeping the text on the left or right will make programming the book easier).

Apple and Google both accept an open format called ePub. Amazon, on the other hand, uses its own format, called KF8 (which is based on ePub). There are lots of differences, of course, but two important ones for our purpose. First, in ePub, each page is its own HTML file. That means a two-page spread is two HTML files. In KF8, a two-page landscape spread is one HTML file. Thus, if you want the book to be available both in Amazon and in other bookstores, you have to build two sets of HTML files.

The second important difference is that ePub supports transparent PNGs, but KF8 does not, so I used SVG for the Kindle version. If a final page of a hypothetical book looks like this:

wholepage

Then if you could change your perspective a bit and view the book from the side, the ePub version might look like this:

epub-demo

The full landscape spread is really two HTML files rendered right next to each other. I think of the file in three layers, the background layer with the texture, the PNG-based layer with transparency, and finally the text layer on top.

The KF8 version, on the other hand, looks like this:

svg-demo

Still three layers, but instead of two HTML pages, it is one. And the middle layer is SVG-based instead of PNG-based. I needed to do this because KF8 doesn’t support PNG transparency, but it does support SVG transparency. (If I were starting again from scratch, I might try SVG on both platforms; I was expecting SVG to be harder to work with than it was, which was why I used PNGs in the ePub version. However, it is possible that not all major ebookstores support SVG.)

I elected to start with building an ePub for the iBookstore and Google Play Books rather than starting with the Kindle version. This was driven partly by my attraction to open standards, but also because Apple has some nice references and samples for building fixed-layout ePubs.

To build a simple fixed-layout ePub, follow these steps.

  1. Download this sample as a template. An ePub is really just a zip file, so change the extension to .zip and save the file structure to your hard drive.
  2. Save the left side of your background graphic as even_background.jpg and the right side as odd_background.jpg. Replace the files in the sample ePub with your images. Each image should be 1549×2065, just under Apple’s 3 million pixel limit per image.
  3. Save your artwork for each page as a transparent PNG. Don’t include the background or text in your PNG. Illustrator’s slice tool comes in very handy here.
  4. Copy your text into each appropriate XHTML file as shown in the sample. Position the text using CSS.
  5. Study the sample package.opf and toc.xhtml files and adapt as needed.
  6. Replace the unique book identifier in the package file with a UUID that you generate at one of the available online generators. You don’t need an ISBN if you are only selling as an ebook.
  7. I found that if you don’t package the files together into a zip file in a particular way, you’ll get errors in the ePub validator. On Windows, I had to first create an empty zip file, then copy only the mimetype file into the zip file. Apparently it needs to be the first file in the archive. Then you can copy the folder structure in. Then browse the zip file and remove any thumbs.db files that Windows has created. Then change the extension from .zip to .epub.
  8. Run it through the online ePub validator.
  9. The easiest way to test on both iOS and Android is to copy the ePub file up to Google Drive or similar service and open on your mobile device.

To create the Kindle version, start with a copy of your unzipped ePub. Our goal here is to create another ePub file, one that is compatible with the Kindle converter.

Remember, for the Kindle version, each two-page spread is one XHTML file. Thus, swap out the left and right background images for one whole two-page image.

  1. Replace the PNGs with SVG files. To do this out of Illustrator, you need to follow a few steps. First, export each file from Illustrator as an SVG file.
  2. Use File, Open to bring this file into Inkscape.
  3. In Inkscape, save as “Plain SVG” (not Inkscape SVG).
  4. Open the SVG file in a text editor.
  5. In the metadata at the top of the file, delete out the section that refers to rdf. I’m actually not even sure what rdf is, but I know that the ePub validator doesn’t like it, and it doesn’t seem to affect how the SVGs render. The text string you want to delete starts and ends with with “rdf:RDF”.
  6. Once you’ve got SVG images instead of PNGs, the process is very similar as making our first ePub. Make sure you remember to change the viewport size in the XHTML files.
  7. In your Kindle ePub, you don’t need a separate XHTML file for the cover.
  8. Once you’ve created this ePub and it validates, download and install Amazon’s Kindle Previewer. You can drag your ePub to it and it will convert it to KF8.

I tested the KF8 file in Kindle for iPad and it didn’t really work at all (and, indeed, the Amazon bookstore doesn’t show iPad as a supported platform for my book) and on Kindle for Android, where it worked fine. I don’t have a Kindle color tablet, so I have to rely on the Kindle Previewer program.

Here’s a sample ePub that I ran through Kindle Previewer to create the KF8 file. Take a look at the changes I made in the package.opf file as compared to the first ePub.

This stuff is still in its infancy and the technology is moving fast. The lack of good tutorials definitely made it a challenge, so I’m going my part by suggesting a workflow above that might be helpful to someone starting out with the same goal.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s