Editing Screenshot Screens

Once you've captured your Screenshot demo, you can start editing it. Here is a quick overview:

• Blur Screen

• Crop Screen

• Track & Zoom

• Replacing Background Screen

• Screen Layout

• Dark & Light Mode

• Fullscreen Mode

Blur Screen

• Click on "Screen Edit" in the Demo Editor, and then "Blur" > Draw a region to blur on the image > Hit the "Save" button. To undo a blur, click the "X" icon in the top-right corner of the blurred area.

Crop Screen

Click on "Screen Edit" in the Demo Editor, and then "Crop" > Select desired area to crop using crop handles > Hit the "Save" button. To redo the crop or revert to original, simply expand the crop handles to the 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.

Track & Zoom

Track & Zoom in is a great way to direct your audience’s focus to specific parts of your product. To start:

Choose the screen you want to zoom into > From the left sidebar, select the Magnifying Glass icon > Position the guide (the beacon) on the area you want to zoom into > Finally, select a zoom amount by changing the Zoom percentage at the bottom of the highlighted area.

Replacing and updating Background Screen

• Click on "Replace Background" > Choose the relevant screen > Select the "Replace" Button

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.

By choosing the relevant layout option (cover, fit, or fill), it automatically adjusts how images/screens are displayed within your demo, cropping or scaling them to fit seamlessly when their dimensions don’t match the demo’s aspect ratio.

In the Demo Editor, Cover, Fit, and Fill are accessible from the left-side toolbar, and there are 4 options:

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

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

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

Dark and Light Mode

• At Storylane, you can choose between dark and light modes in your demo:

  • Navigate to the select mode button > select the desired mode.

Fullscreen Mode

If you plan to showcase your screenshot demo in full-screen, check whether you have enabled a border for your demo. Follow these steps:

1. Open the demo for which you'd like to check the border.

2. Click on demo settings (gear icon at the top) > Frame color.

3. Ensure it's set to either light or dark.

4. Once this is set, republish the demo, open the URL of the demo, and click on the full-screen icon at the top to enter full-screen mode.