Chapter 10: Using Image Layers

Using Image Layers

An image layer adds an uploaded image asset to a page and positions the image on the canvas. Image layers are the most commonly used layers in a motion book—a page typically contains many image layers, each adding a visual element to your story.

Adding an Image Layer to a Page

The Motion Book Tool offers three different ways to add an image layer to a page.

Using the New Layer Button

To Add a New Image Layer to a Page Using the New Layer Button

1.Click + on the Add New Layer button at the top of the page’s layer stack.

A dialog box appears asking what kind of layer you’d like to create.

2.Click Image then click Done or double-click Image.

The dialog box closes and a new image layer box appears at the top of the layer stack. The image layer box is open and presents image layer controls. The content box at the top of the layer box is empty because the layer doesn’t yet contain an image. A bounding box appears for the layer on the canvas.

3.Drag an image asset from the asset bar and drop it on the content box.

The image’s thumbnail appears in the content box and the image appears on the center of the canvas.

4.Click in the layer box heading to select the name “image” and replace it with a name that describes the content.

Dropping an Asset on the Canvas

To Add a New Image Layer to a Page By Dropping It On the Canvas

lDrag an image asset from the asset bar and drop it on the canvas in the work area.

The image appears in the center of the canvas and a new image layer box appears with controls open at the top of the layer stack.

Dropping an Asset On the New Layer Button

To Add a New Image Layer to a Page by Dropping it On the New Layer Button

lDrag an image asset from the asset bar and drop it on the + of the Add new layer button at the top of the layer stack.

The image appears in the center of the canvas and a new image layer box appears at the top of the layer stack.

Image Layer Controls

An open image layer box displays controls to set the properties of your image. Many of these controls are standard layer controls described in the chapter Layer Basics on page 67. Others are specific to images and set the way the layer handles the image.

Figure 1:The image layer controls include a number of controls specific to working with images.

Setting an Image in the Content Box

The content box displays a thumbnail of the current image that the layer contains or, if there’s no image, a checkerboard pattern. You can add an image to an empty image layer or change an existing image in the layer.

To Add or Change An Image in an Image Layer

lDrag an image asset from the asset bar and drop it on the content box in the layer box.

The dropped image thumbnail fills the content box replacing an existing image if there is one. The new image replaces the old image on the canvas. The new image appears on the canvas using the layer’s current settings, so the new image fits or stretches into the old image’s bounding box.

Controlling Image Scaling Within the Bounding Box

When you change the size of an image layer by changing the size of its bounding box, the image inside the bounding box stretches or shrinks to touch the margins of the bounding box. You can choose to constrain image resizing so that it retains its original aspect ratio and doesn’t change its relative width, or you can let the image touch all four bounding box margins, changing its width as the bounding box changes its width.

Figure 2:The image on the left is set to fit the bounding box, which constrains the image’s aspect ratio. The image on the right is set to stretch into the bounding box, which changes the image’s aspect ratio to match the bounding box.

To Control Image Scaling Within the Bounding Box

lClick the Fit image-scaling button to set the image to fit the bounding box.

or

lClick the Stretch image-scaling button to set the image to stretch into the bounding box.

Auto-Positioning an Image On the Canvas

As you move and size an image’s bounding box on the canvas, you may want to start over with the image in its original size and aspect ratio. The Motion Book Tool offers auto-positioning to do this for you.

To Return an Image To Its Original Size and Aspect Ratio

lClick the Auto position button.

The image appears in its original size and aspect ratio in the center of the canvas.

Setting Image Render Quality At Publication

The render quality check boxes control how the image in the layer is rendered when it’s viewed in the Madefire Reader.

Allow Compression In Motion Book Download

When a reader downloads a motion book to read in the Madefire Reader, the Madefire cloud may compress some of the images in JPEG format to reduce the size of the download. If you don’t want the image to be compressed, which may reduce a little of the image quality, uncheck “Allow Compression” in the image controls. Leave the checkbox checked if you don’t mind the image being compressed for download.

Retina Double Publication

When you publish a project as a motion book, the Motion Book Tool converts all images to a resolution that exactly matches the canvas (or canvases) you use for your pages. If you have a large image that you make smaller on the canvas by shrinking the bounding box, then the image will have higher-resolution pixels than the canvas it’s on.

During publication to the Madefire cloud, the Motion Book Tool reduces the resolution of any higher-resolution images to match the canvas. Because readers won’t see the extra high-res pixels in the motion book, there’s no need to save them. Reducing resolution to match display resolution reduces the size of the motion book file, which makes the file easier to download and faster to process when reading.

Newer and more expensive iPads use a Retina display that is the same aspect ratio as less-expensive iPads, but has quadruple the pixel density. The iPad canvas that the Motion Book Tool provides has 768x1024 resolution, which matches the less-expensive iPad displays. An iPad with a Retina display has 1536x2048 resolution in the same space, offering quadruple the resolution.

You can, if you wish, add images to a page that are all quadruple-resolution and then reduce their size by one fourth in the image layer to fit on the canvas. This matches a Retina display for the highest quality display on Retina devices. You’ll lose all that resolution at publication, though, when the Motion Book Tool reduces image resolution to match the underlying lower-resolution canvas.

If you want to ensure that the Motion Book Tool doesn’t reduce your image’s resolution beyond quadruple resolution when you publish the project, check “Retina Double” in the image layer controls. If the image won’t compress, or you don’t care if it compresses, leave “Retina Double” unchecked.

Using Standard Layer Controls

The other controls in the image layer box work the same way they do in other types of layers. You can use the standard controls to change the size, position, and rotation of the image layer, which changes the size, position, and rotation of its contained image. Setting a border accents the image’s bounding box, and setting a background fills in the bounding box. Most images, however, don’t use a border or a background fill.

Working With Image Layers

A page typically contains multiple image layers. It’s best practice to break your story’s graphics down into individual images that are easier to manipulate on the page and easier to animate later using effects. An image for each word balloon, for example, lets you pop the word balloons up in sequence to match dialog. And setting a background panel as one image with a separate image for each character who appears against the background lets you use effects to fade characters in and out or even move them across the background panel.

It’s possible to overload a page with too many image layers. As the layer stack grows and you add multiple effects to multiple images, the page can become so complex that it’s hard to understand and revise. It’s better to create multiple simple pages. You can, if you’d like, make one page flow into another so the reader isn’t aware of page breaks.

The order of image layers in the layer stack is important so that you don’t obscure important image layers under higher image layers. Keep in mind, though, that you can obscure an image layer if you plan to reveal it later by using effects to move higher layers or make them transparent.

There are times when you may want to work with multiple images in a single layer so that when you modify the layer—by resizing for example—you modify all the component images together. If so, you can create child layers within an image layer or a container layer. You can read about these techniques in “Using Child Layers and Container Layers” on page 111.