13 Dec 2011

Creating an Interactive Children’s Book from Start to Finish

Blog, Our Studio 1 Comment

If you’re interested in how we create our children’s books on the iPad and iPhone this is going to be a fun post to read. I’m going to write about in detail the process we go through in building high quality interactive books. Now this is not a definitive resource on how all digital publishers create their books – it is simply meant to lead you in the right direction.

The first part of the adventure is to figure out what you want to write about! This is such a crucial step as much of the work that follows this step is based on the decision you make here. Now this is not to say that you can’t tweak the story later, in fact during this step we usually just create a fairly rough outline that will be refined into a story in the coming weeks.
After you have a rough outline it’s time to storyboard, well at least that’s the idea. At this point your storyboard is meant to be a rough draft of the ideas you wish to make it into the final release. We don’t spend too much time on this as we know that during the illustration process the storyboard and the text will naturally become more refined.
Now that we have the ideas about the book we want to create it’s time for the illustration process. We usually plan about 4 weeks for all artwork to be created.
The time it takes for this process really depends on a couple of things:

  1. Who is going to be doing the illustrations?  You?  Did you hire an artist?
  2. What type of illustrations are you going for?   Graphic?  Painted?  Hand-drawn?
  3. How detailed do you want your artwork to be?
  4. How long is your book? 20, 30, 40 pages?

These are all questions you have to ask yourself.  When we tell interested parties that we only spend about 4 weeks on the illustrations they are surprised.  This process is streamlined in our office as the bulk of our books are authored and illustrated by Allison Keeme and she knows exactly what she wants to see.  If you will be hiring an artist it is important to look at their portfolio as you must be absolutely sure the artist’s style works with the vision of your book.We found when working with author/illustrator Kristen Applebee for the first time that the artistic process took about 8 weeks, but she was hand-painting all of her scenes. This step in the process can certainly be very time consuming, but if organized properly it can be fun and full-filling to see your work come to life!
Now that you have all your artwork put together it’s time to send everything to the programmer, right? NOPE! Now it’s time to prepare all your artwork for the device using a program like Adobe Illustrator or Adobe Photoshop.
Let’s put together an example scene, so you know exactly how to prepare your artwork. There is a downloadable .PSD file at the end of this tutorial you can download to see everything. You will need Adobe Photoshop to view the file (you can download a trial at http://www.adobe.com/).
Let’s assume the following:

  1. You have 2 main layers – a foreground and a background
  2. You have an animated dog that will move across the screen.
  3. You have an stationary person that will be between the foreground and the background.

In Photoshop I’m going to make the foreground one layer and the background another layer and place them accordingly. I will then take the dog that I want on the screen and add that as a separate layer. Lastly, I will take the person and add them to a separate layer and place them accordingly. Now you have to resize the entire document to 1024×768 which is the resolution of the iPad (if you are creating graphics for the iPhone or Retina display you will have to also create these graphics although the iPad is definitely where it’s at for Children’s Books).
Resolutions for different devices:

  1. iPad: 1024×768
  2. iPhone/iPod Touch: 480×320
  3. Retina Display: 960×640

Now that you have your Photoshop file created it is a convenient resource that you can re-visit if you have changes that need to be made. Next, you will take each element/layer and save them as .PNG file. You should now have the following files (and I have included the naming convention I use below).

  1. Background PNG (page01-background.png)
  2. Foreground PNG (page01-foreground.png)
  3. Dog PNG (page01-dog.png)
  4. Person PNG (page01-person.png)

With these file you want to stay organized as you will be doing the same thing for every page and images can easily become confusing, so we always create one directory for each page.
With our graphics now created and organized it is time to send them off to the programmer. Wait, what? You don’t have a programmer. Your ideas are organized, your graphics are complete, the story has been written and edited, but you don’t yet have a programmer. Finding the right programmer can be time consuming, but please – if you only take one thing from this article heed these warnings:
The DO NOT on hiring a programmer:

  1. Do not hire a programmer you cannot routinely converse with and see projects updates with.
  2. Do not hire a programmer without a proven portfolio.
  3. Do not hire a programmer from an online freelancing website.

I can say that we have worked on our fair share of projects in which our client’s had recently attempted to hire a programmer from an online freelancing website. It never goes well and you never get refunded.
The best programmer you can hire is yourself if you are able to grasp the concepts of programming for iOS, but for most they will have to find someone to do the technical work for them.
The DO on hiring a programmer:

  1. Search Google for local programmers with a proven portfolio.
  2. Find businesses like us that specialize in children’s books (click here for our rates).

Now that you have your programmer communication is important. Allison and I communicate often and discuss different ideas for interactions, animations, and general interface usability. This communication really helps us make sure we that I am programming everything in the right manner. We also utilize a free service called Dropbox to share all the graphics. Often Allison will tweak a page and update the new image via the Dropbox. As soon as Dropbox notifies me of the update (or Allison shouts across the office, “Page one updated in the Dropbox!”). I simply drag the page update into the program. A simple and efficient way to communicate with your programmer.
I have also included a short video of the program in action as well as a simple Xcode project that gives you an example of how your interactive book looks from a programmer’s perceptive. Xcode is the program most developers use when programming for iOS (you can download a this program from Apple at http://developer.apple.com/xcode/).
Now that you have your book all set to be uploaded to the App Store, now it’s time to market your book, but that an entirely different ballgame. If you have interest in hearing how we market our app, let me know in the comments and I’ll consider writing an article on that subject.
Thanks for reading and please subscribe to our blog!
Example Files:

  1. Example Photoshop File – Example-PSD.psd
  2. Example Xcode Project – Example-Xcode.xcodeproj


*The imagery in this video is taken from page 10 of Violet’s 12 Days of Christmas. The version included in the books is much more interactive and animated.
This is a post by Jeff Keeme. Co-Founder of My Black Dog Books

One Response to “Creating an Interactive Children’s Book from Start to Finish”

  1. Paul B says:

    Great and helpful post. Haven’t tried dl yet but am excited to try it out.

Leave a Reply

You must be logged in to post a comment.