How to Create Screen Mockups for Software Course Lessons

Use your OS's built-in tool (Command+Shift+4 on Mac, Win+Shift+S on Windows) for basic captures, or Snagit for more control. Snagit lets you capture scrolling pages, specific regions, or full windows with a clean border — features that matter when you're documenting interfaces that don't fit on one screen.

Before capturing, clean up the screen. Close unnecessary tabs, hide bookmarks bars, and use a clean browser profile without personal extensions visible. Your students will notice "Amazon cart (7)" in your browser tabs, and it's distracting.

This is where Snagit earns its price. Select the "Step" tool, then click each location on the screenshot in sequence. Snagit automatically places numbered callouts — 1, 2, 3 — at each point. In your lesson text, you reference these numbers: "Click the Settings icon (1), then select Integrations (2), then click Add New (3)."

If you're using a free tool instead, you can add numbered annotations manually in Canva — use circle shapes with numbers inside them. It takes longer than Snagit's auto-numbering, but it works. The important thing is consistency: use the same style of callout throughout your entire course so students always know what the numbers mean.

Draw attention to the right area using highlights (a semi-transparent colored rectangle over the relevant button or field) or arrows pointing to the key element. Both Snagit and Canva handle this well.

Equally important: blur or block out anything students shouldn't see. Personal data, email addresses, pricing information from your own account, or content from other students. In Snagit, the blur tool does this in one click. In Canva, place a solid rectangle over the sensitive area.

For course sales pages and marketing materials, a raw screenshot looks unfinished. Placing it inside a device frame — a laptop, tablet, or phone mockup — immediately makes it look more polished. In Canva, search "mockup" in templates to find device frames. Upload your screenshot and drop it into the placeholder.

Picbolt is another option — it's focused specifically on device mockups and lets you generate framed screenshots quickly without a design tool. Upload your image, choose a device, and download.

Always export annotated screenshots as PNG, not JPG. PNG preserves crisp text and sharp edges around UI elements. JPG compression creates visible artifacts around text — fuzzy edges that make your annotations harder to read.

For file size, a typical annotated screenshot at 1920×1080 should be 200–500 KB as a PNG. If your files are significantly larger, your source resolution might be higher than needed. You don't need 4K screenshots for course content — 1080p width is clear enough on any device.

After a few modules, you'll have dozens or hundreds of screenshots. Name them consistently: module-02-step-03-settings-panel.png is much easier to find later than Screenshot 2026-09-24 at 14.32.png. Keep them in folders that match your course structure. When the software you're teaching updates its interface, you'll need to retake some screenshots — an organized library makes it easy to find which ones need replacing.

Pick one color for callout numbers (red or orange works well against most interfaces), one arrow style, and one highlight color. Use them consistently across every lesson. When your students see a red circle with a number, they should immediately know it corresponds to a step in your instructions. Inconsistency — switching between arrow styles, callout colors, or annotation formats — creates unnecessary cognitive load.

A common mistake is cropping screenshots too tightly. If you show only the button a student needs to click, they may not be able to find it on their own screen because they don't recognize the surrounding interface. Include enough of the page for orientation — the sidebar, the menu bar, or the section header — so students can match what they see in your screenshot to what they see in front of them.

Annotated screenshots work best for documenting static interfaces — where to click, what to fill in, which settings to change. They're less effective for showing dynamic interactions: drag-and-drop operations, multi-step sequences that change the screen significantly, or anything involving timing. For those, screen recordings (with tools like Loom or Camtasia) are more effective.

Snagit's one-time price of $63 is reasonable if you create software tutorials regularly, but it's hard to justify for occasional use when free tools exist. If you only need annotated screenshots for a few lessons, your built-in OS screenshot tool plus Canva's free tier will get you there.

Software interfaces change. Screenshots have a shelf life. If the tool you're teaching updates its UI, your annotated screenshots become misleading rather than helpful. Budget time for periodic screenshot updates, especially if you teach tools that release frequent updates.