Skip to content
Tutorials

Workflows, start to finish

Each tutorial combines several InnoShot tools to get one real job done. The documentation explains each tool; these show how they fit together.

Tutorial 1

Send a bug report that shows the problem and hides the customer

A good bug report points at exactly what is wrong and shows enough of the page to reproduce it. A safe one also removes the customer names, emails and IDs the screen happened to show.

This workflow uses an area capture, numbered markers and permanent redaction, and ends with a file you can attach to any issue tracker.

Useful for: Support teams, QA testers and developers

  1. 1

    Open the page with the problem and press Alt+Shift+S. Drag a selection around the broken part plus enough context to recognize the screen, then press Enter.

  2. 2

    In the editor, add a numbered marker on each thing that is wrong, in the order you would describe them. Add a short callout to the most important one.

  3. 3

    Choose Redact and draw over every name, email, phone number, order number or token in the capture. Redaction is opaque and is flattened into the export; blur and pixelate are not safe for this.

  4. 4

    Crop away anything that does not help explain the bug. The crop is non-destructive, so you can widen it again if a developer asks for more context.

  5. 5

    Export as PNG (sharp text, small enough for trackers) or copy to the clipboard and paste it straight into the ticket. Write the numbered points in the ticket in the same order as the markers.

Tip

Keep the browser address bar out of the capture unless the URL matters: query strings often contain IDs or tokens.

Tutorial 2

Turn a dashboard into a launch image

For a release note, a social post or a slide, a raw screenshot of the whole app is too busy. This workflow captures one element, puts a spotlight on the new feature and places it on a background sized for where it is going.

Useful for: Product marketers, founders and designers

  1. 1

    Set the browser window to the size you want the interface to appear at, and fill the screen with realistic, non-private sample data.

  2. 2

    Press Alt+Shift+E, hover over the panel that shows the feature, use the Up arrow to move to a parent element if the outline is too tight, and press Enter.

  3. 3

    Add a spotlight on the new part of the interface. Keep the outside dim moderate so the context stays readable, and add a soft glow to the edge.

  4. 4

    Open the background controls: choose a gradient or mesh background, an aspect preset for the destination, generous padding, rounded corners and a shadow.

  5. 5

    Optionally wrap the capture in a browser frame, and check that the address it shows is fine to share. Export a PNG at 2x scale for crisp text on high-density screens.

Tip

Save the background and the spotlight as presets once you like them, so every launch image after this one matches.

Tutorial 3

Keep a long web page as a readable PDF

Printing a page from the browser reflows it with print styles, and the result rarely looks like what you saw. A full-page capture keeps the page exactly as it looked; exporting it as a paginated PDF keeps it readable.

Use this for records of a terms page, a long report, a design review or anything you need to keep as it appeared on a given day.

Useful for: Researchers, compliance and legal teams, reviewers

  1. 1

    Open the page and scroll to the bottom once if it loads content as you scroll. Then press Alt+Shift+F and let InnoShot capture the whole page.

  2. 2

    If the page had a cookie banner or chat bubble, crop or cover it in the editor. Check the capture info for a note that the page kept growing and the capture stopped at the maximum height.

  3. 3

    Choose Export, then PDF. Pick A4 or Letter and portrait orientation, so the tall capture is split across readable pages instead of being shrunk onto one.

  4. 4

    Add header text such as the page title and the date you captured it, set margins, and export.

Tip

A PDF made from a screenshot contains an image, so its text cannot be selected or searched. Keep the page address with the file if you may need to find it again.

Tutorial 4

Write a step-by-step guide with numbered screenshots

Help articles and onboarding guides work best when each picture shows one step and says exactly where to click. Numbered markers, a magnifier for small controls and a consistent style make that quick to produce.

Useful for: Technical writers, trainers and customer success teams

  1. 1

    Capture each screen of the process with the visible area shortcut, Alt+Shift+V, or an area capture when only part of the screen matters.

  2. 2

    Add a numbered marker on the control to use, and an arrow if it is hard to spot. Use the magnifier to enlarge small buttons or menu items.

  3. 3

    Use the same marker color, arrow style and background for every screenshot, and save the background as a preset after the first one.

  4. 4

    Redact any personal data that appears in the sample account you are using.

  5. 5

    Export each step as PNG and give the files names that keep them in order.

Tip

Delayed capture lets you open a menu or hover a tooltip before the screenshot is taken.

Tutorial 5

Capture a chat thread or table that scrolls on its own

Many apps scroll a panel inside the page rather than the page itself: chat threads, email lists, code views and data tables. A full-page capture only sees the part of such a panel that is visible. The scrollable container capture scrolls the panel itself.

Useful for: Anyone documenting web apps, support and community teams

  1. 1

    Run the "Capture scrollable region" command from the InnoShot popup, or assign it a shortcut at chrome://extensions/shortcuts first.

  2. 2

    InnoShot highlights the elements on the page that scroll. Pick the panel you want.

  3. 3

    InnoShot scrolls through the panel and stitches its full content into one tall image, then restores its scroll position.

  4. 4

    In the editor, redact names or messages that should not be shared, then export or copy.

Tip

Apps that unload rows as you scroll past them can leave gaps. Scroll through the panel once first, and check the result before you share it.