Alright, you’ve signed up for an account and are ready to start making your first interactive book.  Congratulations! Before you begin, it is important to make sure that the images you plan on using are in the right formats, so let’s cover that here.  We will talk about four different types of images, background images, interactive images, text, and your book’s thumbnail.  Keep in mind, we are going to keep this simple and cover the most common use cases.  If you want to do something more complex, just ask and we will help you learn how to do it.

1. Background images

As the name suggests, these images will serve as your background for each of your pages.  Any images that you designate as background images will not have any interactivity associated with them.  You’ll want them to be 1024 x 768 resolution (to match the iPad), 162 ppi, and saved in jpeg format.  Typically each page only has one background image and when you upload it as such it will always be on the lowest layer.

  • For images that don’t move or interact
  • Always the lowest “layer” on the screen
  • 1024 x 768 pixels
  • 162 ppi
  • jpeg format

2. Interactive images

By rule, anything that is not a background image should be treated as an interactive image.  These are anything that you want to move on its own,  or react to being touched, perhaps by playing a sound effect, moving, or causing another image to appear.  To achieve the desired effect, it is necessary to save each of these images separately, with transparent backgrounds, and cropped relatively closely to the actual image.  Below is an example of what your image will look like in your image editing software, such as Adobe Illustrator or Pixelmator for Mac (the gray boxes mean the background is transparent).  In order to preserve the transparency, you must save this as a .png file.

  • For images that move or have interaction
  • Use transparent background
  • Layer can be adjusted later in ITB Authoring Wizard
  • Crop close to active character
  • 162 ppi
  • Save as .png file

Save your images with a transparent background and closely cropped to the actual image. Do not save with a white background layer.

3. Text

For text, we recommend treating this as an image.  Use your favorite image editing software to take full advantage of the fonts and colors, and then save as a png file.

  • For any text that appears on the screen
  • Use fonts and colors from image editing software
  • Crop close to text
  • 162 ppi
  • Save as .png file

4. Book Thumbnail

This one is easy, just save the image you want to use as your book cover as a 250×250 pixel jpeg or png image.  If you want a different length to width ratio, that’s fine, just set the largest dimension at 250 pixels.

  • For the book cover, shown when users browse the bookstore or their library
  • 250 x 250 pixels
  • png or jpeg file

A hint from Deeno: “When you prepare your scene, start with a single 1024×768 canvas, and create each image as a separate layer within that canvas.  When you have all of your images done, save each layer as a separate png file and upload them into the Authoring Wizard.  For any uploaded images smaller than 1024×768, we assume this is what you have done, so you won’t have to resize anything!”

Ok, if you want to see how this thing works, go ahead and create a background image, a couple of interactive images, and your thumbnail and check out the next tutorial!


Please enter your comment!
Please enter your name here