How do I add an image overlay or UI popover?

If you want to add a UI popover, modal, floating card, callout, notification, tooltip, badge, overlay or other graphic on top of your screenshot, use an Image element.

This is useful when you want to show something layered above your app UI, such as:

a popover or tooltip
a modal window
a notification card
a floating UI panel
an enlarged app detail
a callout graphic
a custom badge or label
a transparent PNG or SVG overlay

Should I use App Screens or an Image element?

Use App Screens when you are uploading the raw app UI screenshots that appear inside your device frames.

Use an Image element when you want to add an extra visual layer on top of your screenshot design.

For example:

What you want to add	Use
The actual app UI screenshot inside the phone	App Screens
A floating popover above the phone	Image element
A transparent PNG overlay	Image element
A modal or tooltip graphic	Image element
A badge, icon or callout	Image element

If the popover is already part of your raw app UI screenshot, upload it in App Screens. If you want to add it as a separate design layer, use an Image element.

Add an image overlay

To add an image overlay or UI popover:

Click the screenshot you want to edit.
Open Layouts & Elements in the edit panel.
Click Add element.
Choose Image.
Click Select Image.
Upload your overlay image or choose an existing image.
Position it on the screenshot.

For best results, use a transparent PNG or SVG if you want the overlay to sit cleanly above the rest of the design.

Place the overlay above other elements

If your overlay needs to appear above the device, background, shapes or other images, make sure it is higher in the layer order.

To adjust the layer order:

Open Layouts & Elements.
Enter drag-and-drop mode.
Drag the Image element higher or lower in the list.
Click Save positions when finished.

Elements higher in the list appear above elements below them.

Move, resize or rotate the overlay

The quickest way to position the overlay is directly on the canvas:

Hover over the overlay on the screenshot.
Click the move icon in the small toolbar.
Move, resize or rotate the overlay.
Click Save positions or the green tick when finished.

You can rotate the overlay using the rotate handle in drag-and-drop mode, or by clicking the rotate icon next to the Image heading in the edit panel.

Use Exact Dimensions for precise placement

Use Exact Dimensions if you want the overlay to line up precisely.

You can open Exact Dimensions by clicking the right-angle ruler icon beside the Image element.

For an individual Image element, you can adjust values such as:

X position
Y position
width
height
spacing above or below the element

This is useful when you want the overlay to line up exactly with a device, screen edge, button, app UI area or another element.

Use Set image variants if needed

If the overlay needs to be different for each platform, output size or language, use Set image variants.

For example, you may need a different overlay for:

Apple and Google
iPhone and iPad
Android Phone and Android Tablet
different languages

If the same overlay should be used everywhere, you can just use Select Image.

Tips for image overlays

Use a transparent PNG or SVG for popovers, modals and floating UI.
Use Image Fit settings if the overlay is cropping or stretching.
Use Exact Dimensions if the overlay needs to align with your app UI.
Use layer order if the overlay appears behind another element.
Use shadows to make floating overlays stand out.
Use Set image variants if the overlay contains text that needs localisation.