Image Layers

Images are one of the two ways visual content ends up on a Lega canvas — either you bring your own, or the AI generates one for you (a sticker or illustration). Both paths produce the same layer type underneath: an ordinary image layer you can move, resize, crop, and swap like anything else in the design.

Adding an image

Use the image tool in the bottom toolbar (data-testid="bottom-tool-image") to place a new image layer, then upload a file from your device. Once placed, an image layer behaves like any other layer — draggable, resizable, reorderable in the layers panel.

If you're bringing in an existing design or asset rather than a single image, see Importing Existing Designs — that covers pulling in reference material to recreate or remix, which is a different workflow from dropping a single photo into a frame.

Cropping and fit

Image layers support cropping independent of their frame on canvas — you can resize the layer's bounding box without stretching the image inside it, and adjust how the image fills that box (fill, fit, or a manual crop). This matters most when an uploaded photo doesn't match the aspect ratio of the space you want it in: crop mode lets you choose what part of the image shows rather than letting the whole thing distort to fit.

Replacing an image

Swapping one image for another without rebuilding the layer is a common edit — select the layer and use the replace action in the Properties panel to upload a new file into the same position, size, and crop settings. This is the fastest way to try a few different photos in the same spot without redoing layout work each time.

Asset resolution basics

Underneath the editor, image layers reference an asset — either something you uploaded or something the AI generated — and the canvas resolves that reference to actual pixel data when rendering. This resolution happens the same way whether you're viewing the canvas live or exporting, so what you see while editing is what you get in the final export; there's no separate "export renderer" producing different results.

One exception worth knowing about: sticker placeholders. When the AI plans a design that includes a generated sticker or illustration, it first places an image layer as a placeholder — visually distinct on canvas — before the actual artwork is generated and swapped in. If you ever see a placeholder glyph where you expected a finished image, that layer's generation likely hasn't completed yet, rather than something being broken. See Sticker Generation for how that pipeline works end to end.

Opacity, effects, and layering

Image layers support standard opacity and blend adjustments, letting you layer a photo underneath text or shapes without it fighting for visual attention. Combined with a shape layer as a tinted overlay, this is a common pattern for keeping text legible over a busy photo background — see Shape & Vector Layers for the shape side of that combination.

Practical tips

• Check contrast after swapping an image. If a text layer was positioned assuming a darker or lighter background, replacing the image underneath it can change whether that text stays readable — worth a quick visual check after any image swap.
• Match aspect ratios where you can. Cropping saves you from distortion, but starting with an image reasonably close to your target aspect ratio gives you more control over what stays in frame.
• Use the layers panel to keep image layers straight once a design has several — rename them by what they show rather than relying on generic "Image" labels, especially in designs with multiple photos.

Image layers, like every other layer type in Lega, stay fully editable after generation or upload — nothing about placing an image locks it in as a flattened part of the design.