Editing Screenshot Demos

• Blur Screen

• Crop Screen

• Annotate

• Track & Zoom

• Replacing Background Screen

• Video Clips

• Screen Layout

• Demo Frame

👉 Blur Screen

Blur sensitive information and protect PII

1. Click on "Screen Edit" in the editor

2. Select "Blur" and draw a region to shade

3. Hit the "Save" button and you're all set

4. To undo a blur, click the "X" icon in the top-right corner of the blurred area.

👉 Crop Screen

Crop screens to maintain consistent aspect ratios

1. Click on "Screen Edit" in the editor

2. Select "Crop" and make desired changes

3. Hit "Save" and you're all set

4. To undo a crop, expand handles to initial area

👉 Annotate

Annotate demo screens with markers, text, and paths

1. Click on "Screen Edit" in the editor

2. Select "Annotate" in the pop-up menu

3. Make desired edits with available tools

4. Hit "Save' and you're all set

5. To undo, select the annotation and delete

👉 Track & Zoom

Direct your audience’s focus to specific parts of your product

1. Select the screen you want to add zooms to

2. Select the "Track & Zoom" icon

3. Assign the zoom location and percentage

4. To delete, select the trash can icon

👉 Replace background screens

Same guide, different background screen:

1. Click on "Replace Background" (either in the toolbar or guide options)

2. Select the screen you'd like to replace the current screen with

3. Select the "Replace" button and you're all set

👉 Video clips

Video clips can only be added to existing screenshot demos, allowing users to add and edit video clips right in Storylane. This feature is only available on paid plans.

🎥 Adding video clips

We support a couple of ways to add video clips:

1. Upload a pre-recorded video from your device

2. Add video clips from other demos

3. Capture new video clips from the extension

All three options can be found under "Videos" in the screen selector tab:

🎬 Editing video clips

In the Storylane editor, control playback speed, trims, mute, and splices to insert guides between clips.

👉 Screen layout (cover, fit, and fill)

Screen layout helps you display images, screenshots, and demo screens of various sizes seamlessly within your demo, ensuring they fit perfectly regardless of their original dimensions. In the Demo Editor, Cover, Fit, and Fill are accessible from the left-side toolbar, and there are 4 options:

• Cover: expands the image to cover the entire demo area, slightly cropping the edges if necessary.

• Fit: Scales the content to fit the demo's width or height without cropping, adding padding to maintain the full view where necessary.

• Fill mode: The current logic when capturing demos, filling out the demo area.

• Different aspect ratio: When prompted, it lets you set the current screen’s aspect ratio as the default for your entire demo. This is useful if the current screen’s layout best fits your content, allowing all screens to align with this shape.

👉 Demo Frame

We offer a few options to customize the frame your demo sits in:

• Choose between dark and light modes (toggle in top right of frame)

• Enable fullscreen mode by setting a frame color in Demo Settings