Heating things up with iBook Author

Ryan Murray
Ryan Murray
Published in
4 min readOct 15, 2018

Creating an interactive iBook of Fahrenheit 451 by Ray Bradbury.

I chose Fahrenheit 451 as the book I wanted to create an interactive iBook for because I really enjoyed the story and idea when reading this novel when I was younger. It’s an American Classic and I thought it could be very visually appealing.

On the left is one of the original artworks for Ray Bradbury’s novel and on the right, is my rendition of the cover art.

I was inspired by this minimalistic image and I felt like it would be a great fit for the new cover art. It gives off a modern style and the match says a lot without having to say anything at all.

Again, on the left was the original image, but I needed some padding down at the bottom to put the author’s name without it interfering with the smoke. To solve this issue, I used a handy tool in photoshop called Content-Aware Scale.

To successfully use this tool you’ll first need to import an image to Adobe Photoshop, Crop the image and drag the sides of the crop frame you want to extend. Make sure your layer is unlocked, then you use the square select tool (shown below) and select the part of the image you want to extend. After you select the part to extend, go to edit in your tool bar and scroll down until you find Content-Aware Scale. Click that and then if you drag your selected area, it should extend the image like shown:

I was now able to have room to put Ray Bradbury down at the bottom of the cover. Now that I had the cover art finished, it was time to start adding some interactive elements to the iBook.

I was able to find some really good content and fan-art that was available online so after I collected the elements I wanted to use I still felt like it was missing some interactivity. I was really inspired by some professional examples of using motion graphics within the book and tasked myself to implement something made from Adobe After Effects.

I saw this image in my folder of assets and thought it would be really cool if I could animate those flames to move. Again, I had to take this image into photoshop, use the quick selection tool and divide the flames out into separate layers. If I only had 1 layer, it would probably be impossible to animate it. After having it separated into multiple layers I was ready to import the .psd file into Adobe After Effects.

Each layer I did some slight rotation over a few seconds at a time and I had each laying moving simultaneously and it resulted in this!

I had originally selected the above blank document and after I was finished with the project I tried to export it as .epub but wouldn’t let me! I ended up having to transfer all my hardwork to a new epub document and it fixed my issue. Along with the book’s text and assets I had collected, I implemented a fun pop up widget from a flame icon.

This icon, when clicked or tapped (touch screen devices) would pop open an image relating to the story or a definition of a word. I was very pleased with how my design turned out and felt like it would engaging for the reader. I was then tasked with making sure the metadata was updated and testing my iBook on multiple devices. I don’t own an android device which has been a bit of a set back for me in my testing. I assume that because iBook Author is an Mac product that it may not be 100% compatible with the Android Operating System. But here is my finished product on 3 different devices.

Desktop, iPad, iPhone 7+

--

--

Ryan Murray
Ryan Murray

UX designer here to provide useful information about user experience and providing contract work for all of your design needs.