ℹ️ Images on Fable are treated as fills on shape layers. Add images directly to your project or by selecting an image from the color panel.
Fable treats images as a type of fill, allowing you to add and use them on any shape layer. This structure keeps image controls in parity with other elements on Fable, while also enabling you to:
Swap image sources on the fly without losing keyframes
Control and animate the dimensions of your images
What this article covers:
How images are represented in Fable
Fable makes it easy to identify layers with image fills in the following ways:
An image icon is displayed on the timeline layer list.
An image icon is displayed at the top of the inspector.
An image label is displayed in the color input field on the inspector.
ℹ️ Maximum image size
Fable downsizes images that have a width or height larger than 7,680 pixels. This downsize maintains the original image’s proportions, so that the longest edge of the image is less than 7,680.
Setting Images as Fills
To render an image in your project, you need to set it as a fill on a shape layer. There are various ways of doing this on Fable:
Drag and drop images
You can drag and drop image files from your computer onto the canvas. This will create a rectangle with the dimensions of the file you uploaded and automatically set the shape layer's fill to the uploaded image.
Copy and paste images
Similar to the drag and drop behavior, pasting an image from outside Fable creates a rectangle with the dimensions of the pasted image and sets the fill of the rectangle to be the image you pasted.
Adding images to a shape layer using the Color Panel
Because images are fills, you can replace existing shape layers with an image. To do so:
Select the shape layer you’d like to replace.
On the inspector, click the color input field under the
Fillsection.The color panel will open. At the top left of the panel, click the dropdown that says “solid.”
Select "Image".
Click the upload button to add a new image
Your shape layer will be filled with the image you uploaded.
If you would like to reuse an image that’s already in your project, select it from the color panel dropdown and select Image.
Drag Images from the Asset Browser
If you add an image in any of the ways listed above, the actual image file will be added to your project’s Asset Browser. Just like any other asset, you can drag images from the Asset Browser onto your canvas or timeline to add them to your project.
You can also add images directly to the Asset Browser by doing either of the following:
Drag and drop the file into the Asset Browser panel.
Click the upload button at the bottom of the Asset Browser.
Once an image is added to the Asset Browser, it will also be available to be swapped from the color panel (option 3 mentioned above).
Supported image formats
Fable can import the following image formats:
PNG
JPEG
WEBP