iBooks Author - Full Screen Images Step By Step

How to create full screen images in iBooks Author. 

In this iBooks Author tutorial, I'm going to show you three different ways to create a full screen image within the iBooks Author application. 

One of the neat features of an interactive book for the iPad is the ability to take advantage of the beautiful retina display by showcasing full screen images or by making small images pop up fullscreen with a tap. Even better, is the ability to zoom in and out of a picture. 

There are three ways you can do this and I'm going to walk you through each to decide which is the best solution for you. Here they are:

  • Tap-to-view image full screen
  • Full screen background image from your photos
  • Full screen background image using a shape

Tap-To-View Image Full Screen

One of the most common questions we get asked is how to make a smaller image pop-up full screen when tapped. Our templates already have this integrated in, but here's how you can do it for additional images: 

  1. Select the image
  2. Open the Inspector
  3. Go to the Widget tab (very last one that looks like a brown folder)
  4. Select interaction toggle
  5. Check the "Maximize on tap or click" box
Inspector tab ibooks author tutorial
tap to view image full screen in ibooks author

Note: if this box is 'greyed' out and you can't select it, make sure you've selected the image first.

Full Screen Background Image From Your Photos

Let's say I wanted to create an image that was already a full screen background image.

  1. Here's what i would need to do:
  2. Find the photo you wish to insert
  3. Drag and drop it into your iBook
  4. Go to the Metrics tab in the inspector
  5. Resize proportion to 1024 width and 748 height, x = 0 and y =0

You'll notice that you can resize it using the white boxes on the actual image. Or you can resize the photo within the inspector under the Metrics tab. If you want to maintain proportions, keep the "contain proportions" tab checked. This will mean you need to have already resized it to match. 

ibooks author image tutorial
display image full screen

Full Screen Background Image Using A Shape

The final option allows you to use a shape to insert an image. This is beneficial for two reasons: you can choose interesting shapes (like a star or circle) to mask your image and you can also do interesting things like have the image tile or stretch to fill a shape.

Here's what you need to do:

  1. Go to the shape tool and select a shape
  2. Go to the Metrics tab in the inspector 
  3. Resize proportion to 1024 width and 748 height, x = 0 and y =0
  4. Select the Graphic tab
  5. Go to fill and select image fill
  6. Select Scale to Fill (or other option if you want to play)
ibooks author full screen images
image display ibooks author themes

The template used in this example was the Retina Template. Go check all our iBooks Author Templates here.