Step Guide Studio help

Getting started

What the tool does

Step Guide Studio turns a screen recording or a set of screenshots into a step by step guide. It combines four things that usually need separate tools: a screen recorder, a screenshot annotator, a lightweight video editor and a document editor. Everything runs in your browser, so screenshots, recordings and exports stay on your device.

Opening it

Go to the Step Guide tool. The first time, a welcome panel offers screen capture, recording, importing images or video, a blank guide, and two demo guides. The demos are the fastest way to understand the tool: open one and take it apart.

Your work is saved automatically

Guides are saved to this browser on this device as you work, and the last guide reopens when you come back. This is browser storage, not a server account, so it does not follow you to another computer and clearing your browsing data will remove it. Export a project file for anything you want to keep or move.

Recording and capturing

Starting a capture

Choose Capture, pick how steps should be created, then Start capture. Your browser asks which screen, window or tab to share. Sharing a window or a browser tab is recommended: the recorder controls and the browser sharing bar are then outside the shared surface and cannot appear in your screenshots at all.

Smart capture

The default. The shared screen is watched for changes, and a step is created whenever the screen changes and then settles, which in practice means once per click. The screenshot is taken from the moment just before the change, so it shows the button you are about to press rather than the result. You can switch this to after the change in the capture dialog.

Manual and timed capture

Manual creates a step only when you press Capture. Timed creates one every few seconds, which suits processes where the screen changes continuously. All three can record video at the same time.

The floating controls

In Chrome and Edge a small always on top window appears with Capture, Area, Hide an area, Record, Pause and Stop. It stays above other applications, which is how you capture while working in another program. Close it and the in page bar still works.

Keyboard shortcuts during capture

F9 captures a step, F8 starts or stops recording, F10 selects a screen area, Escape stops. A web page only receives key presses while its own tab is focused, so these work when you are in the studio. For a shortcut that works anywhere on your computer, install the VineFileLab capture extension and use Ctrl and Shift and 9.

Keeping the controls out of the picture

Sharing a window or tab is the clean answer. If you must share the whole screen: screenshots hide the controls automatically for a moment before the picture is taken; and during a recording you can press Hide an area and drag over anything that must never be captured, such as the browser sharing bar. That area is painted out of stills, of smart capture frames and of frames taken from the recording. Save a clean copy of the recording produces a video file with those areas painted out and any zoom effects baked in.

The mouse pointer

Show the mouse pointer in screenshots controls whether the real pointer appears in the captured pixels. Separately you can place a synthetic pointer on any step, with five styles, a highlight halo and a left, right or both click effect, which is often clearer than the real cursor.

Audio

System audio and your microphone can both be recorded, if your browser and your choice of shared surface allow it. Chrome offers system audio for a tab or a whole screen, but not for a single window.

Editing steps

Step content

Each step has a title, a description, optional trainer notes that only appear if you switch them on in Document setup, an action type and the source page it came from. These fill the headings in your exports.

Reordering and managing

Drag steps in the left panel to reorder. Right click a step, or use the three dots, to duplicate it, replace its screenshot, crop it, clear its annotations, move it or delete it.

Annotating

Pick a tool from the toolbar and drag on the screenshot. You get callouts, speech bubbles in five shapes, arrows and lines, twelve shapes, highlighter, numbered badges, text, a mouse pointer, a click marker, blur, redaction, a spotlight and a zoom area that genuinely magnifies part of the screenshot.

Formatting an object

Select an object and the right panel shows its properties: fill and border colour with brand, recent and standard swatches plus a hex field and a screen eyedropper, border width and style, opacity, corner radius, shadow, rotation, exact position and size, font, size, alignment and layer order.

Precision

Objects snap to page centre lines and to other objects. Arrow keys nudge by one pixel, with Shift for ten. Square brackets change layer order. Hold Shift while drawing to constrain proportions or angles.

Hiding sensitive information

Blur softens a region, Redact covers it with a solid block, and Spotlight dims everything except the area you choose. Blur and redaction are applied to the exported image, not layered over it, so the underlying pixels are not recoverable from the export.

The video timeline

Opening it

The timeline appears when you record or import a video. The Recording dropdown in its toolbar switches between clips, and All recordings in the Capture menu shows every clip with a poster frame, rename, download and delete.

Moving through the recording

Drag the round playhead knob, or click anywhere on the track or the ruler. The readout shows the time to a thousandth of a second, the exact frame number and the frame rate, for example 00:12.500, Frame 375, 30 fps.

Frame accuracy

Use the single frame buttons, or the comma and full stop keys, to move one frame at a time. Press Detect to measure the frame rate of the recording, or set it by hand if you know it.

Zooming the timeline

Scroll over the timeline to zoom in, up to sixty times, and hold Shift while scrolling to pan. The ruler relabels itself from minutes down to individual frames as you go in, so long recordings stay usable.

Choosing the frame for a step

Each step made from a recording has a marker on the track. Drag the marker and the step takes the frame you drop it on, keeping its annotations. Or scrub to a moment and press Use this frame.

Trimming and speed

Set start and Set end, or the I and O keys, mark the part you want. Playback speed runs from a quarter to double.

Resizing

Drag the grip at the top of the timeline to make it taller or shorter, or double click the grip to toggle. The height is remembered.

Large preview

The expand button opens the recording large. Space plays, comma and full stop step a frame, and the buttons let you use the frame on screen for the selected step or add it as a new step. The small preview, the large preview and the timeline all share one clock.

Zoom and focus effects

On a recording

Press Add zoom to create an effect at the playhead, then drag the block or its edges on the timeline to set when it runs. Set the level, and press Set centre from preview then click the point you want to zoom into. Add as many as you like across a recording; they ease in and out and preview live as it plays.

On a step

The zoom area tool draws a shape that shows a magnified copy of the screenshot underneath. Choose a rectangle, rounded rectangle, circle or oval, set the level up to six times, add a border and shadow, and optionally dim the rest of the page so the eye goes where you want.

In the exported video

Save a clean copy of the recording re-renders the video with the zoom effects applied and hidden areas painted out.

Pages, layout and branding

Page types

A guide can hold step pages, a cover, a contents page and text pages. Text pages come with templates: overview, learning objectives, before you begin, section divider, summary, troubleshooting, FAQ, glossary, appendix, revision history and notes.

Editing a page

On text pages the toolbar gives paragraph styles, font, size, bold, italic, underline, strikethrough, text and highlight colour, bullets and numbering, indent, alignment, links, tables, images and dividers. On the cover, click the title, subtitle, author and other fields on the page itself and type.

Movable elements

On any document page you can add a text box, a shape or an image and place it anywhere: drag to move, drag a corner to resize, use the top handle to rotate. Positions are stored as a proportion of the page, so they hold their place if you change the page size.

Page size

New guides start as a 16:9 deck. Document setup offers A4, Letter, Legal, A3, A5, B5, Executive, Tabloid, three slide ratios, HD and a custom size, with orientation and margins. Slide sizes centre their content and use larger type; document sizes are top aligned with running headers and footers. Changing the size reflows everything.

Backgrounds

Every page can take a background colour, a two colour gradient or an image, with an option to apply it to all pages.

Brand guidelines

Set heading and body fonts, a colour palette, text styles and default object styles, then export a brand file and import it into your next guide so everything matches. Apply to existing objects restyles a guide you have already built.

Images, icons and GIFs

Built in

Twelve shapes, five speech bubble styles, twenty icons and a full emoji set are built in and always available.

Searching free sources

The icon tab searches the free Iconify libraries. The image tab searches Openverse, which indexes openly licensed images, and can be filtered to GIFs or vector files only. The licence appears on each tile, and the credit line is copied when you insert the item.

Licensing

Openly licensed does not mean unconditional. Most licences require credit to the creator, and a few disallow commercial use or changes. Read the licence shown on the tile before you publish, particularly for anything customer facing.

Your own files

Upload images or animated GIFs from your device, paste a screenshot from the clipboard, or drag files onto the page.

Exporting and sharing

Formats

Web page, a single self contained HTML file with the images embedded. PDF, through your browser print dialog, so choose Save as PDF as the destination. Word, an editable .docx with your styles, page size, header, footer and a table of contents field. PowerPoint, one slide per page. SCORM 1.2 and SCORM 2004 for a learning management system, with completion tracking. A ZIP bundle of HTML, images and the project file. PNG images of every step. Markdown for a documentation site. And a project file to reopen or share the editable guide.

Preview first

Preview shows exactly what will be produced, in web or print layout.

Moving a guide to another computer

Export the project file, then open it on the other machine. It carries the pages, annotations and images. Include the video only if you need it, as that makes the file large.

Troubleshooting

Screen capture does not start

Screen sharing needs a secure connection and your permission. Check that the page is on https, that you did not dismiss the browser prompt, and that your operating system allows the browser to record the screen. On macOS this is in System Settings, Privacy and Security, Screen Recording.

The recorder controls appear in my screenshots

You are sharing the whole screen. Share a window or a tab instead, or use Hide an area to paint the controls out, or Save a clean copy of the recording.

No steps are being created

Smart capture needs the screen to actually change. If you are typing into a field, the change may be too small; raise the sensitivity in the capture dialog, or use manual capture with F9.

Shortcuts do not work while I am in another application

That is a browser limitation, not a fault. Use the floating controls, or install the capture extension for a shortcut that works anywhere.

The video will not scrub smoothly

Recordings made by a browser can lack the index that makes seeking fast. Save a clean copy of the recording to produce a re-encoded file that seeks better.

My guide disappeared

Guides live in this browser on this device. Clearing browsing data, using private browsing, or switching browser or computer will lose them. Export a project file to keep a copy.

An export is slow or fails

Each step is rendered at full resolution, so a long guide takes time and memory. Close other tabs, or export in sections. Very large guides are more reliable in Chrome or Edge.

Icon or image search shows nothing

Those searches reach external services. A corporate network, an extension or an outage can block them. The built in shapes, icons and emoji still work, and you can upload your own files.

Privacy and security

Where your files go

Nowhere. Screen capture, recording, editing and every export run in your browser. There is no upload step and no server copy. You can confirm this yourself: open your browser developer tools, watch the network tab, and record a guide.

What does leave your browser

Only two optional things: icon and image searches, which send the words you type to Iconify and Openverse, and Google Fonts, if you choose a web font. Neither receives your screenshots.

Storage

Guides are kept in IndexedDB in your browser, which is per browser, per device and per site. Use Free up space in the guide menu to remove files no longer referenced.

Sensitive screens

Blur and redaction are applied to the exported pixels rather than layered over them, so the original content is not recoverable from the export. Even so, check exports before sharing them widely.

Keyboard shortcuts

Browser support

Screen sharing requires a secure connection, so the tool must be opened over https.

Still stuck

If something here does not match what you see, or a feature fails on your setup, get in touch and include your browser, its version and what you were doing.

Related: Step Guide Studio · What the tool does · Document tools · Image tools · General help