Editing Screenshot Screens

Storylane supports a range of editing features for screenshot demos. Here's the rundown.

• 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 "Edit Screen" in the editor

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

3. Set the blur intensity level

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

5. To undo a blur, click the trash icon in the top center of the blurred area.

👉 Crop Screen

Crop screens to maintain consistent aspect ratios

1. Click on "Edit Screen" 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

Tip: Keep the 'lock aspect ratio to match the demo size' box checked ☑️, to maintain the aspect ratio same as the demo size.

👉 Annotate

Annotate demo screens with markers, text, and paths

1. Click on "Edit Screen" 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" option in the header

3. Set the zoom position and percentage

4. To delete, select the trash can icon

Note: The zoom is anchored to the guide. To adjust the zoom area, drag and drop the guide. The guide will follow

👉 Replace background screens

Same guide, different background screen:

1. Click on "Replace Background" (either in the header or guide editor)

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.

🎥 Adding video clips

We support a couple of ways to add video clips:

1. Under Video Avatar in the editor header you can either -

   1. Generate using your own Avatar (or choose from our templates!)

   2. Record a live video from your device

2. Upload mp4 files from device

3. Add video clips from the current & other demos

4. Capture new video clips from the extension

🎬 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.

TIP: For demos with both landscape and portrait images/screens, it’s best to set the aspect ratio to the landscape. This way, portrait images can fit within the wider frame more easily, while a portrait aspect ratio would cut off the sides of landscape images.

👉 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

If you need help or have any questions, feel free to contact us at [email protected].