Skip to Content

Images

OVERVIEW

Learn how to add and use images on your project

Fable handles images as fills on shape layers, rather than standalone layer types.

At face value, this doesn't seem like a big difference, since images will looks as-expected. However, this method has a few major benefits:

  1. Images can be animated in all the same ways a shape layer can.
  2. Images can be swapped out without losing any animation data or layer connections

Adding images

You can add images to your project in a few ways.

Drag and drop an image

You can drag and drop compatible image files from your computer directly into the Editor. Fable will create a rectangle the same size as the image you dropped and apply the image as a fill.

Paste images from the clipboard

You can copy images from your computer or other design tools and paste them directly into the Editor. Like drag and dropping an image, Fable will create a rectangle and set the image as a fill on the shape.

Upload an image in the color picker

The color picker has special properties for layers you want to set an image fill for.

  1. Select an existing shape layer
  2. On the Inspector, open the color panel by clicking the color swatch under the Fill section
Opening the color picker

3. On the color panel, switch the fill mode to Image.

Screenshot of switch the fill mode to fill

4. Click the "Upload" button

Screenshot of upload the image on the color picker

Once a layer has an image fill set, it will display updated iconography across the Editor.

Any image you add to your project will be listed on the Asset Browser. You can always add existing images into your project by dragging images from the Asset Browser onto the Canvas or Timeline.

Image properties

There are a few properties unique to images that can be found on Image mode on the color panel.

  • Image source - Allows you to swap the image to another file already in your asset browser.
  • Image sizing - Allows you to select the way your image fill behaves when the layer dimensions change.
    • Cover - Always position the image at the center of the shape, but scale the image so that it proportionally fills the entire object it's applied to
    • Contain - Always position the image at the center of the shape, but scales the image so that the entire image is visible within the object it fills

Because images are fills applied to shape layers, they have the same animate-able dimension controls as shape layers.

  • Dimensions - Controls the width and height of the image.
  • Corner radius - Controls how rounded the corners of the image should be.

If you ever need to restore the dimensions of your shape layer to the dimensions of the source image:

  1. Right click the layer on the Timeline or Canvas
  2. Select the "Reset image dimensions" option