Finish the design, keep the editable work

Choose a template for the interface you actually have

Begin with the destination platform and orientation. Then inspect how much of the template is reserved for the real screenshot. A dense desktop workspace benefits from a wide image area; a simple phone flow can tolerate a larger headline. Open a template and inspect its panels before replacing content. The preview illustrates the starting composition, but the sample app is fictional. Treat every visible app name, caption, value, and interface screen as material to replace with information from your own product.

Replace the screenshot, then adjust the framing

Use a clear image from the app running in the intended orientation. Place it in the screenshot or device element, then check the crop at the corners and edges. A frame can help explain the form factor, but it should not hide a navigation bar, result, or control that matters to the story. Do not stretch a phone interface into a tablet frame and describe it as a tablet experience. If the source screen includes a real person’s information, remove or replace it before importing the image.

Work through the whole sequence

Edit one panel at a time, then review the set together. Give the first image a clear product promise and use later images to show different tasks or evidence. Keep repeated typography and spacing consistent. When selecting an element, check its layer order if it seems to be hidden. After changing a canvas size or device orientation, inspect the resulting positions instead of assuming the layout has retained its balance. Shorter copy often solves crowded designs more effectively than shrinking every element.

Understand local saving

Projects are stored in this browser using local site storage. Returning on the same browser profile and device can reopen locally saved work. This is not cloud synchronization. A project address does not contain your images or transfer the project to someone else. Private browsing sessions, storage restrictions, browser cleanup tools, and clearing site data can interrupt saving or remove existing work. If saving is unavailable, preserve a downloaded project backup before closing the session.

Keep a backup after significant changes and before browser maintenance. Store the backup with your source screenshots and final exports so you can identify the correct revision later. A flattened export is useful for publication but cannot recreate all editable text, positions, and settings. If you import a backup, verify its panels and uploaded images before continuing.

Check a download outside the editor

A single-image download should contain the selected panel. A set download should contain the sequence in a ZIP, with one image per exported panel. Extract the archive before reviewing it. Confirm the number of files, actual pixel dimensions, orientation, and readability. Open the images with a normal image viewer; a browser preview scaled to your window can make a correct file look softer or smaller than it is. Store-compatible image output does not mean every caption or composition meets store policy.

If something still fails

Try a smaller project with a single ordinary PNG or JPEG to narrow the issue. Large source images and many canvases increase memory use, especially on phones. Preserve a backup before refreshing, then try the affected action again. Check whether your browser has blocked downloads or storage. If the problem persists, email the steps, browser, output preset, and a sanitized example. There is no remote access to your local project, so a reproducible description is essential.