Home / User Guide

Lilacpane User Guide

Lilacpane guide: import images or video, choose a device frame, set the background and text, and use the current version’s options to create product visuals for websites, social media, portfolios, or app stores.

Updated September 13, 2026
APP GUIDE / COMPLETE REFERENCE

From first launch to a finished set

This reference mirrors the detailed guide inside the app. Start with the quick start, then use the directory to find the exact entry point, controls, PRO limits, and practical tips for each feature.

00 / INTERFACE MAP

Learn the five areas of the app first

The app guide starts with a map of the interface before opening each feature detail. This page keeps that overview so you always know where to find the next control.

01

Navigation bar

Settings, Guide, the top-right “+”, and Export. Add frames, text, or icons from “+”; save or share from Export.

02

Quick action bar

Save, Save As, Batch, Grid, Corner, Card, Snap, Play / Pause, Lock, and Smart Background. Order and visibility can be customized in Settings.

03

Batch strip

Appears above the canvas in Batch mode. Thumbnails switch canvases, “+” adds one, the arrow collapses or expands, and the trash icon removes the current canvas.

04

Canvas

The central editing area. Tap empty space to deselect, tap an element to edit, and drag, pinch, rotate, or corner-resize directly here.

05

Bottom toolbar

The main entry point for Add / Edit, Templates, Background, Ratio, and Canvas — used for importing media and tuning the composition.

01 / QUICK START

Quick start

Follow these 7 steps to make a basic mockup. The feature reference below covers the controls and edge cases in more detail.

  1. 1

    Add a device frame

    Tap the “+” in the top-right corner and choose “Device frame”. You can also add text or an icon.

  2. 2

    Edit the device frame

    Tap a frame on the canvas to drag, pinch, rotate with the handle, or resize from the corners.

  3. 3

    Choose a screenshot

    Tap “Add” in the bottom toolbar and choose the image you want to frame. Multiple selection is supported.

  4. 4

    Apply a templatePRO

    Tap “Templates” to apply a preset layout. Nine built-in templates are free; PRO unlocks all templates and custom saves.

  5. 5

    Change the background

    Tap “Background” to switch between solid color, gradient, and image options.

  6. 6

    Try Smart BackgroundPRO

    Generate coordinated color options from the current canvas; the full feature is PRO.

  7. 7

    Export the result

    Tap “Export” when ready. A 1280px long edge is free; larger long-edge tiers require PRO.

02 / REFERENCE

Feature guide

The order follows the guide inside the app. Select any item to jump to its detailed reference.

01

Device frames

Add iPhone, iPad, Mac, or Apple Watch mockups and tune each frame independently.

Steps
  1. Tap “Templates” in the bottom toolbar to open the picker.
  2. Browse iPhone, iPad, Mac, MacBook, iMac, and Apple Watch categories.
  3. Choose a device and it appears on the canvas instantly.
  4. Drag to move and pinch to scale; select it to open the edit panel.
  5. Adjust 3D tilt, rotation, size, position, media, shadow, or deletion in the panel.
Supported devices
iPhone

iPhone 11 / 12 / 13 / 14 / 15 / 16 / 17 series.

iPad

iPad Pro 11 / 12.9, iPad mini, and iPad.

Mac

MacBook Pro / Air / Neo and iMac.

Apple Watch

Apple Watch face mockup.

Frame adjustments
3D tilt

Five direction presets (original / left / right / up / down) with 10–100% intensity; free.

Rotation

90° steps plus 1° fine adjustment for alignment.

Size

0.5–1.5x slider, 0.05 step; double-tap to reset to 1.0.

Position

Four direction buttons move the frame by 5pt per tap.

Media

Replace the photo or video inside the frame; drag and pinch the media.

Shadow

Four styles: none, soft, hard, and glow; each frame can be set independently.

Delete

Use the Delete button in the top-right of the panel and confirm a second time.

Tips
  • Tilt and rotation controls appear only after selecting a frame.
  • Each frame can be resized and repositioned independently.
  • 3D tilt is free; select a frame to use it.
  • You can drag a frame directly on the canvas; rotation near 90° snaps automatically.
  • Shadow defaults follow Settings → Frame Defaults and can be overridden per frame.
  • In Lock mode, double-tap a frame to reset the media offset and scale.
↑ Back to feature guide
02

Canvas ratio

Change the canvas shape while keeping device frames, text, and icon positions in place.

Steps
  1. Tap “Ratio” in the bottom toolbar.
  2. Browse 30+ presets grouped as General, Landscape, and Portrait.
  3. Choose a ratio and the canvas updates immediately; PRO ratios can still be previewed.
  4. A PRO prompt appears only when you export a non-free ratio.
Free ratios
Screen

Follows the current device screen ratio and adapts the canvas.

1 : 1

Square canvas for social posts.

1242 : 2688

Exact iPhone 6.5-inch portrait spec for App Store visuals.

2048 : 2732

Exact iPad portrait spec for App Store visuals.

PRO ratios
LandscapePRO

16:9, 3:2, 4:3, 21:9, 32:9, and other wide ratios.

PortraitPRO

9:16, 2:3, 3:4, 9:21, 9:32, and other tall ratios.

Preview rulePRO

Non-free ratios can be previewed and applied; the upgrade prompt appears at export.

Content positionPRO

Switching the ratio keeps the canvas content position unchanged.

Tips
  • Ratio changes the canvas shape; it does not automatically re-layout frames, text, or icons.
  • Export sizes use the current ratio and the app’s long-edge tiers: 1280, 1920, 2556, and 3880.
  • For a consistent series, choose the ratio before tuning margins and type.
↑ Back to feature guide
03

Import photos and video

Fill device frames with media from Photos to create mockup presentations.

Steps
  1. Make sure the canvas has a device frame: apply a template or add one with the top-right “+”.
  2. Tap “Add” in the bottom toolbar; it changes to “Edit” once the canvas has media.
  3. Choose photos or video from Photos.
  4. Selected media fills frames in reading order, from left to right and top to bottom.
Supported media
Photos

Common formats such as PNG and JPEG.

Video

Import video and use its first frame as a static cover; export renders video frames.

Batch import

Select multiple files to fill multiple frames for batch editing.

Media controls
Drag to move

Select a frame and drag the image inside it.

Pinch to zoom

Pinch the media without changing the frame size.

Reset

In Lock mode, double-tap a frame to reset the media offset and scale.

Replace

Open the frame editor and use the Media tab to choose another photo or video.

Tips
  • Without a device frame, Add will not open the album; add a frame first.
  • A single selection is limited by the number of frames and a maximum of 20 media items.
  • In batch import, the first photo fills the first frame at the top-left.
  • Video shows a first-frame cover and is rendered frame by frame on export.
  • If import fails, check Photos permission and supported PNG / JPEG / HEIC or video formats.
  • Change Photos permission in Settings → Lilacpane → Photos.
↑ Back to feature guide
04

Background

Fill the canvas with a color, gradient, image, or Smart Background.

Steps
  1. Tap “Background” in the bottom toolbar.
  2. Choose Color, Gradient, Image, or Smart Background from the four tabs.
  3. Choose an option and preview it live; preset solid colors are free.
  4. Check the PRO status of the selected background before exporting.
Background types
Color

Preset solids are free; custom picker colors can be previewed and require PRO at export.

GradientPRO

Two-color gradient with direction control; previewable, PRO at export.

ImagePRO

Built-in or Photos images fill the canvas; previewable, PRO at export.

Smart BackgroundPRO

Generates a theme from the canvas, with manual variants and auto-apply; PRO.

Tips
  • Only preset solid colors are free; gradients, images, and custom colors require PRO at export.
  • Custom images automatically fill the canvas edges without blank margins.
  • Changing the background does not move device frames.
  • Smart Background works best after you import media because it samples the current canvas.
↑ Back to feature guide
05

Canvas settings

Use the Canvas sheet to adjust corner radius; the setting also applies to exports.

Steps
  1. Tap “Canvas” in the bottom toolbar.
  2. Drag Corner Radius from 0–120; the default is 24 with a step of 1.
  3. Tap Reset in the top-right to restore 24.
  4. The radius updates live on all four corners and remains active in image and video exports.
Corner radius
Range

0–120pt, default 24pt, one-point steps.

Reset

Restore the default 24pt radius in one tap.

Global setting

All canvases share one value; changes apply immediately and persist across canvases.

Templates

Applying a template does not overwrite your radius because it is global.

Tips
  • One canvas can hold multiple device frames.
  • Changing the background or ratio does not move frame positions.
  • For a series, set the radius before starting batch work.
↑ Back to feature guide
06

Canvas gestures

Tap, drag, pinch, rotate, and resize directly on the canvas with optional snapping.

Steps
  1. Tap an empty area to deselect and close an open sheet.
  2. Tap a frame, text, or icon to select it and open its editor.
  3. Drag a selected element; with Snap enabled it aligns to guides, other elements, or the canvas center.
  4. Select an element before pinching to scale it. Pinching without a selection has no effect.
  5. Drag the top rotation handle on a selected frame, text, or icon.
  6. Drag the corner handles on selected text or icons to resize them.
  7. Select a frame to drag or pinch the media inside it without changing the frame.
Basic operations
Tap empty area

Deselect and close an open sheet.

Tap an element

Select a frame, text, or icon and open its editor.

Drag

Move an element freely; Snap aligns it to guides, other elements, or center.

Pinch

Select first, then pinch to scale a frame, text, or icon.

Advanced gestures
Rotation handle

Drag the top handle with one finger; angles near 90° snap automatically.

Corner resize

Drag a text or icon corner; text changes font size and icons change dimensions.

Media inside a frame

Drag or pinch the image inside the frame without changing the frame.

Lock mode

Lock freezes frame position, scale, and rotation; media can still move and scale, and double-tap resets it.

Tips
  • Use the top-right “+” to add frames, text, and icons.
  • Cyan snapping feedback usually marks guides; purple marks element edges or canvas center.
  • Snap sensitivity is Weak 4pt, Medium 8pt, or Strong 14pt.
  • Lock mode still allows media drag and pinch.
  • Pinching without a selected element does not scale canvas content.
↑ Back to feature guide
07

Export and share

Export the canvas as an image or video, then save it to Photos or share it with another app.

Steps
  1. Tap “Export” in the navigation bar.
  2. Choose a long-edge size: 1280px is free; 1920 / 2556 / 3880px require PRO.
  3. Choose Share or Save to Photos.
  4. If the canvas includes video, the export becomes MP4; video export requires PRO.
Export options
1280

Default 1280px long edge; free.

1920 / 2556 / 3880PRO

Larger long-edge tiers; PRO.

Format

Images export as PNG and video exports as MP4.

Batch exportPRO

Export multiple canvases with one consistent style; PRO.

Tips
  • The current app exports images as PNG and video as MP4. Describe export using the sizes shown in the app.
  • Long edges above 1280px, video export, and batch export are PRO.
  • Video export is fixed at 30fps.
  • If one video export fails, the app falls back to a static image and shows a notice.
  • Check corners, frames, type, and background before saving.
↑ Back to feature guide
08

Edit text and icons

Edit the style of text and icons on the canvas; see Add elements for creating them.

Steps
  1. Use the top-right “+” to choose Text or Icon.
  2. Tap the new element on the canvas to open its editor.
  3. Tune font, size, color, alignment, opacity, rotation, and position.
  4. Drag, pinch, or use corner handles to resize the selected element.
Text controls
Content

Enter a title or subtitle.

Font

10 built-in fonts.

Weight

Five weights: thin, regular, medium, semibold, and bold; SF Pro only.

Font size

12–72pt slider.

Maximum width

0.1–1.0 of the canvas width to control wrapping.

Alignment

Left, center, or right.

Color

39 presets plus a picker, including 15 system colors.

Icon controls
Photo icon

Choose an image from Photos as icon content.

Badges

28 built-in badges such as PRO / VIP / NEW / HOT plus a custom badge maker.

Size

20–200 with linked width and height.

Corner radius

0 to half the size; available for non-badge icons.

LimitPRO

Text and icons are PRO: editable in preview, required at export.

Tips
  • Keep titles to one or two lines for easier reading.
  • Font size and color update in real time.
  • Text and icons are PRO; non-subscribers can still preview and edit them.
↑ Back to feature guide
09

Templates

Apply an existing layout or save the current canvas as your own template.

Steps
  1. Tap “Templates” in the bottom toolbar.
  2. Filter by All, Single device, Multiple devices, Copy, or My templates.
  3. Choose a template to apply its frames, background, text, and icon layout.
  4. Use Save As in the quick action bar for a new template; Save overwrites the current custom template.
Template actions
Apply

Templates rearrange frames; existing photos and video are kept and placed near the new frames.

Save As

Save the current canvas as a new template with a custom name.

Save

Overwrite the currently applied custom template only.

Template categories
Single / Double / Multiple device

Grouped by the number of device frames.

Copy

Templates containing text and icons without device frames.

My

Your saved custom templates.

Tips
  • Built-in templates cannot be overwritten or deleted; use Save As for a copy.
  • Free users get 9 built-in templates; PRO unlocks all templates.
  • Templates save frame layout, text, icons, background, and ratio, but not the canvas media.
  • Applying a template keeps existing media and places it near the new frames.
  • Saving an empty canvas fails; add content first.
↑ Back to feature guide
10

Add elements

Use the top-right “+” to add frames, text, or icons to the canvas.

Steps
  1. Tap the top-right “+” to open the add menu.
  2. Choose Device frame for a phone, tablet, or Mac.
  3. Choose Text for a title or subtitle.
  4. Choose Icon for a decorative icon.
  5. Select the new element to continue editing its style.
Element types
Device framePRO

Add a phone, tablet, or Mac frame.

TextPRO

Add a title or subtitle with a custom font.

IconPRO

Add a decorative icon or badge.

Canvas group sync
Background

Type, color, gradient, and image.

Canvas

Corner radius, ratio, device model, grid, and guides.

Frames

Position, size, rotation, tilt, flip, and shadow.

Layers

Text and icon layers.

Not synced

Each frame’s own photo or video does not sync between canvases.

Tips
  • Adding elements and frames is PRO; preview is available, export requires PRO.
  • Manually added frames start at the canvas center and may overlap; separate them manually.
  • The listed layout properties sync across a canvas group on switch or export.
  • Confirm before removing a canvas group.
↑ Back to feature guide
11

Batch mode

Edit and export multiple canvases at once for a consistent product screenshot set.

Steps
  1. Tap Batch in the quick action bar.
  2. Select photos from the album; one import supports up to 20 and creates up to 20 canvases.
  3. Change one canvas; the layout syncs to all canvases when you switch or export.
  4. Use Batch Export to save everything at once; batch export is PRO.
What you can do
Batch import

Select multiple photos to generate multiple canvases.

Batch edit

Change one canvas and sync the layout on switch or export.

Batch exportPRO

Export all canvases with one consistent style; PRO.

Sync rules
Background

Type, color, gradient, and image.

Canvas

Corner radius, ratio, device model, grid, and guides.

Frames

Position, size, rotation, tilt, flip, and shadow.

Layers

Text and icon layers.

Media

Photos and video inside each frame do not sync.

Tips
  • The batch strip appears above the canvas; tap a thumbnail to switch.
  • Batch mode supports up to 20 canvases and up to 20 selected photos per import.
  • Batch Export is PRO and is designed for consistent App Store screenshot sets.
  • Remove canvases you no longer need from the batch group.
↑ Back to feature guide
12

Settings

Personalize the app and manage language, export preferences, interface behavior, and PRO status.

Steps
  1. Open Settings from the gear icon in the navigation bar.
  2. Check PRO status at the top; active subscribers can open subscription management.
  3. Open Basic Preferences to manage language, export, interface, frame defaults, and resources.
  4. Use the App section to share, rate, or contact the team.
PRO status
Active

Shows subscription status and expiry; tap to manage the subscription.

Upgrade to PROPRO

Shows the purchase entry when inactive.

Basic preferences
Language

Choose the app interface language in its subpage.

Export settings

Image / video format, quality, long-edge size, and automatic deletion after export.

Interface

Haptics, snap sensitivity, quick action order and visibility, batch strip position, and hidden navigation in sheets.

Frame defaults

Default shadow style and card mode for new frames.

Resource management

Manage custom templates, colors, and gradients in one place.

Tips
  • Preference changes take effect immediately.
  • Customize quick action order and visibility in Interface → Quick Actions.
  • PRO unlocks video export, batch export, custom ratios, and more.
  • The filing number at the bottom links to the official lookup page.
↑ Back to feature guide
13

Video

Place video inside device frames, preview it on the canvas, and export it as MP4.

Steps
  1. As with photos, tap Add in the bottom toolbar; it shows Edit when the canvas already has media.
  2. Choose a video from Photos; it fills frames in reading order.
  3. The first frame becomes a static cover on the canvas.
  4. Tap a video frame to play or pause, or use the Play / Pause quick action.
  5. A canvas containing video exports as MP4 at 30fps; video export is PRO.
Video essentials
Import

Choose video from Photos and fill device frames automatically.

Play / Pause

Tap the video frame or use the quick action toggle.

First-frame cover

The first frame is used as the static canvas preview.

MP4 exportPRO

Rendered frame by frame as MP4 at a fixed 30fps; PRO.

Notes
Export failure

A single failed video export falls back to a static image and shows a notice.

PRO limitPRO

Video and batch export are PRO; preview is available, export requires PRO.

Tips
  • Video export is fixed at 30fps.
  • The canvas initially shows the first frame; tap the frame to preview playback.
  • If a single video export fails, the app saves a static image and shows a toast.
  • Video export is PRO; non-subscribers can still preview and edit video.
↑ Back to feature guide

Five checks before you export

  • 1. Confirm the target platform size before laying out the canvas.
  • 2. Match the device frame to the asset orientation and presentation context.
  • 3. Keep copy concise and leave enough safe spacing around the edges.
  • 4. Check the frame, text, background, and canvas edges before exporting.
  • 5. For a consistent set, lock the visual treatment first and review each image before publishing.

常见问题

What can I create with Lilacpane?

Lilacpane adds device frames to screenshots, photos, or video and lets you set the background, text, and canvas presentation for App Store, social, and portfolio visuals.

What image or video assets are supported?

You can import screenshots, photos, recordings, and video. The exact import methods and options depend on the current app version.

Can I export high-quality images?

Lilacpane provides export tools. The exact formats, canvas options, and scales are shown in the current Export panel; check the latest platform requirements before submission.

Is Lilacpane free?

Lilacpane is free to download. Free features and features that require an in-app purchase are shown in the current version.

Which device frames are available?

The app provides Apple device frames across categories such as iPhone, iPad, Mac, and Apple Watch. Models, finishes, and availability follow the current version.

How do I make App Store screenshots?

Import your app screenshots, choose a suitable device frame, set the background and headline, then adjust the canvas to the current App Store Connect requirements before exporting.

How should I choose a device frame?

Browse the device categories and manually choose a frame that matches the asset orientation and the context in which it will be shown.

Can I export a transparent PNG?

If the current Background and Export panels provide transparency and PNG, enable those options and export from the app. Always follow the options shown in the current version.

How do I confirm App Store screenshot sizes?

Requirements vary by platform and device category. Check the latest App Store Connect guidance first, then select a matching canvas option in Lilacpane.

Create your first product visual

Use Lilacpane on iPhone and iPad to turn your media into ready-to-use product visuals.

Download on App Store

Screenshot resources

iPhone screenshot framing tutorialAdd a frame to a screen recordingApp Store screenshot sizesCheck image size and aspect ratioComplete App guide