[{"data":1,"prerenderedAt":473},["ShallowReactive",2],{"howto-pages":3},[4,39,223,369],{"id":5,"title":6,"body":7,"category":29,"date":30,"description":31,"extension":32,"meta":33,"navigation":24,"path":34,"published":24,"seo":35,"sitemap":36,"stem":37,"__hash__":38},"howto/how-to/your-first-recording-in-60-seconds.md","Your First Recording in 60 Seconds",{"type":8,"value":9,"toc":25},"minimark",[10,14,17],[11,12,13],"p",{},"Pixelmatic runs entirely in your browser. There's nothing to download, no extension to install, and no account required to start recording. This video walks you through the entire flow — from opening the recorder to playing back your first capture — in under a minute.",[11,15,16],{},"You'll see how to select what you want to share (a tab, a window, or your entire screen), start recording, and stop when you're done. That's the whole thing. Your recording is saved locally in your browser, ready to preview, download, or publish whenever you're ready.",[18,19],"iframe",{"src":20,"width":21,"height":21,"style":22,"allow":23,"allowFullScreen":24},"https://pixelmatic.xform.media/_embed/69caa9c70c6c4f6d736f1dd0-452e70d3-e148-4773-9d1d-59fe562d8f0a-recording-09-04-2026-15-38?logo=https%3A%2F%2Fpixelmatic.xform.media%2F69caa9c70c6c4f6d736f1dd0%2F90d81e2b-a3da-40a2-bd7b-fc53744778a8%2Fpixelfilm-logo.png&color=00bcd4&captions=true&utmTracking=1","100%","aspect-ratio:16/9;border:0","autoplay; fullscreen; picture-in-picture",true,{"title":26,"searchDepth":27,"depth":27,"links":28},"",2,[],"Getting Started","2026-04-21","Open your browser, hit record, and capture your screen — no installs, no extensions, no friction.","md",{},"/how-to/your-first-recording-in-60-seconds",{"title":6,"description":31},{"loc":34},"how-to/your-first-recording-in-60-seconds","BZ239IhWd41W7SlWZMQAyPQ1Tb-BHRRqwJZw7j82ADA",{"id":40,"title":41,"body":42,"category":214,"date":215,"description":216,"extension":32,"meta":217,"navigation":24,"path":218,"published":24,"seo":219,"sitemap":220,"stem":221,"__hash__":222},"howto/how-to/add-a-background-to-a-screenshot.md","How to Add a Background to a Screenshot",{"type":8,"value":43,"toc":207},[44,47,50,59,64,107,117,121,148,152,178,182,190,194,201],[11,45,46],{},"A raw screenshot looks like a raw screenshot. Fine for Slack. Not fine for a launch tweet, a landing page hero, a deck the CEO is presenting, or a feature page on your marketing site.",[11,48,49],{},"The fix is small. Drop the screenshot onto a coloured or gradient background, add some padding, round the corners, and put a soft shadow on it. It starts to look like an asset rather than a snapshot.",[11,51,52,53,58],{},"Here's how we do it in Pixelmatic's ",[54,55,57],"a",{"href":56},"/free-screenshot-editor","free screenshot editor",". No install, no signup, no Photoshop.",[60,61,63],"h2",{"id":62},"the-fast-version","The Fast Version",[65,66,67,71,83,90,97,104],"ol",{},[68,69,70],"li",{},"Open the editor and bring in your screenshot.",[68,72,73,74,78,79,82],{},"In the ",[75,76,77],"strong",{},"Frame"," panel, switch the background to ",[75,80,81],{},"Gradient"," (or Wallpaper, Color, or upload your own image).",[68,84,85,86,89],{},"Adjust ",[75,87,88],{},"Padding"," until the screenshot has some breathing room. 32px is generally a good starting point.",[68,91,92,93,96],{},"Set ",[75,94,95],{},"Rounded corners"," to taste. 8 to 16px tends to read as a modern app screenshot.",[68,98,99,100,103],{},"Add a ",[75,101,102],{},"Drop shadow"," for a bit of depth.",[68,105,106],{},"Export the PNG.",[108,109,114],"pre",{"className":110,"code":112,"language":113,"meta":26},[111],"language-text","[ VIDEO PLACEHOLDER ]\n15–25 second clip: paste a raw screenshot of your dashboard →\nswitch background to a gradient preset → bump padding → add\nrounded corners and a soft shadow → export. End frame should be\na dramatic before/after if possible.\n\nAlt text: Styling a raw dashboard screenshot with a gradient\nbackground, padding, rounded corners, and a drop shadow.\n","text",[115,116,112],"code",{"__ignoreMap":26},[60,118,120],{"id":119},"when-youd-reach-for-this","When you'd reach for this",[122,123,124,130,136,142],"ul",{},[68,125,126,129],{},[75,127,128],{},"Product launch posts."," A styled screenshot tends to do better on Twitter and LinkedIn than one that looks like it was Cmd-Shift-4'd in a hurry.",[68,131,132,135],{},[75,133,134],{},"Landing page heroes."," The hero screenshot on your marketing site sets the tone for the rest of the visit. Worth the 30 seconds.",[68,137,138,141],{},[75,139,140],{},"Changelog and release notes."," Style once, save the settings, ship every release with the same look. It saves a surprising amount of time over a year.",[68,143,144,147],{},[75,145,146],{},"Decks."," Slides with raw screenshots feel rushed. Slides with framed, padded screenshots feel a little more considered.",[60,149,151],{"id":150},"a-few-small-habits","A Few Small Habits",[122,153,154,160,166,172],{},[68,155,156,159],{},[75,157,158],{},"Pick a background that complements your UI, not one that fights it."," A bright magenta gradient under a calm cyan dashboard reads as a stock visual. A subtle blue-to-purple gradient under the same screenshot reads as your product.",[68,161,162,165],{},[75,163,164],{},"Don't go heavy on the shadow."," A thin, soft shadow says \"sitting on a surface\". A thick, dark shadow tends to look dated.",[68,167,168,171],{},[75,169,170],{},"Padding above zero, but not huge."," 24 to 48px is usually about right. Much more and the screenshot starts to feel small inside its own frame.",[68,173,174,177],{},[75,175,176],{},"Use the inset frame option"," when you're showing a web app. The automatic browser chrome makes it obvious at a glance that this is a web product.",[60,179,181],{"id":180},"custom-backgrounds-for-your-brand","Custom backgrounds for your brand",[11,183,184,185,189],{},"If you've got a defined brand, set the background once (solid colour, gradient, or an uploaded image of your own) and use it on every screenshot you ship. Consistency over time is what makes screenshots feel like ",[186,187,188],"em",{},"your"," screenshots, rather than generic ones. On a paid Pixelmatic plan, an admin can set this org-wide so every teammate's screenshots match without anyone having to remember.",[60,191,193],{"id":192},"what-about-device-frames","What about device frames?",[11,195,196,197,200],{},"The ",[75,198,199],{},"inset frame"," option wraps your screenshot in browser chrome (URL bar, traffic-light buttons) automatically. That covers most web app screenshots heading to a landing page or social. If you need a device-shaped frame (laptop, phone), drop the styled screenshot into your design tool of choice afterwards. The editor focuses on the parts you'll reach for every time.",[11,202,203,204],{},"Try it now in the ",[54,205,206],{"href":56},"free screenshot editor →",{"title":26,"searchDepth":27,"depth":27,"links":208},[209,210,211,212,213],{"id":62,"depth":27,"text":63},{"id":119,"depth":27,"text":120},{"id":150,"depth":27,"text":151},{"id":180,"depth":27,"text":181},{"id":192,"depth":27,"text":193},"Screenshots & Annotations","2026-05-04","Drop a raw screenshot onto a gradient, add some padding, round the corners. A few small adjustments that make a screenshot look considered.",{},"/how-to/add-a-background-to-a-screenshot",{"title":41,"description":216},{"loc":218},"how-to/add-a-background-to-a-screenshot","RnaK96VUksxP8MzeDayo6VFTpcdZyYOM2EAxzWwFC2A",{"id":224,"title":225,"body":226,"category":214,"date":215,"description":362,"extension":32,"meta":363,"navigation":24,"path":364,"published":24,"seo":365,"sitemap":366,"stem":367,"__hash__":368},"howto/how-to/add-arrows-to-a-screenshot.md","How to Add Arrows to a Screenshot",{"type":8,"value":227,"toc":355},[228,231,237,239,259,266,272,276,302,304,307,333,337,340,344,351],[11,229,230],{},"Most of the time, when I take a screenshot, the only thing I really want to do is point at one specific thing in it. An arrow does that in seconds, and usually saves me writing a paragraph of explanation underneath.",[11,232,233,234,236],{},"Here's how to add one in Pixelmatic's ",[54,235,57],{"href":56},". No install, no signup, no browser extension.",[60,238,63],{"id":62},[65,240,241,244,251,254,257],{},[68,242,243],{},"Open the editor and bring in your screenshot (capture, paste, or drag-and-drop).",[68,245,246,247,250],{},"Click ",[75,248,249],{},"Arrow"," in the annotation toolbar.",[68,252,253],{},"Click and drag from where you want the arrow to start to where you want it to land.",[68,255,256],{},"The arrow stays selected, so you can drag either endpoint to fine-tune the position, or change the colour from the side panel.",[68,258,106],{},[11,260,261,262,265],{},"That's it. If you'd like a label as well, click ",[75,263,264],{},"Text"," and type next to the arrow.",[108,267,270],{"className":268,"code":269,"language":113,"meta":26},[111],"[ VIDEO PLACEHOLDER ]\n10–15 second clip: paste a screenshot of a SaaS settings page,\nclick the arrow tool, draw an arrow pointing at the \"Save\" button,\nadd a \"Click here\" text label, export. Make the workflow\nobviously fast.\n\nAlt text: Adding an arrow and a text label to a screenshot of a\nSaaS settings page.\n",[115,271,269],{"__ignoreMap":26},[60,273,275],{"id":274},"when-arrows-help","When Arrows Help",[122,277,278,284,290,296],{},[68,279,280,283],{},[75,281,282],{},"Help docs."," \"Click the gear icon\" on its own is fine. \"Click the gear icon\" with an arrow pointing at it is generally the difference between someone reading the article and someone actually finding the button.",[68,285,286,289],{},[75,287,288],{},"Bug reports."," Circle the broken pixel. It saves engineering working through 200 reports trying to figure out what you saw.",[68,291,292,295],{},[75,293,294],{},"Onboarding emails."," One screenshot, one arrow, one clear next step. Usually more useful than a long setup paragraph.",[68,297,298,301],{},[75,299,300],{},"Internal walkthroughs."," A Slack message with a screenshot and a few labelled arrows is often quicker than a five-minute Loom, both to make and to watch.",[60,303,151],{"id":150},[11,305,306],{},"A handful of things that, in my experience, make arrows look intentional rather than busy.",[122,308,309,315,321,327],{},[68,310,311,314],{},[75,312,313],{},"Match the colour to your brand or to the UI element",", rather than reaching for bright red every time. A cyan arrow pointing at a cyan button reads as design. A red arrow on a green dashboard reads as alarm.",[68,316,317,320],{},[75,318,319],{},"Keep arrows short."," Long diagonal arrows across the whole screenshot tend to feel noisy. If the thing you're pointing at is small, zoom in first. If it's far from where the label naturally sits, move the label closer to the tip of the arrow.",[68,322,323,326],{},[75,324,325],{},"Use a box where you'd otherwise use three arrows."," If you're trying to highlight a section of the UI rather than a single button, a thin box around the section is generally cleaner.",[68,328,329,332],{},[75,330,331],{},"Label the arrow"," if there's any doubt at all. \"Click here\" is fine, and it's a lot better than leaving the reader to guess.",[60,334,336],{"id":335},"numbered-steps-with-arrows","Numbered Steps with Arrows",[11,338,339],{},"If you're documenting a multi-step flow in a single screenshot (a wizard, a settings panel, an onboarding screen), you can combine arrows with text labels numbered 1, 2, 3. One screenshot replaces three, and the reader doesn't need to scroll to follow along.",[60,341,343],{"id":342},"what-if-i-just-want-to-circle-something","What if I just want to circle something?",[11,345,346,347,350],{},"There isn't a dedicated circle tool right now. The ",[75,348,349],{},"box"," tool, with its corners pulled in tight, generally does the same job, and against rectangular UI it tends to look a bit cleaner anyway.",[11,352,203,353],{},[54,354,206],{"href":56},{"title":26,"searchDepth":27,"depth":27,"links":356},[357,358,359,360,361],{"id":62,"depth":27,"text":63},{"id":274,"depth":27,"text":275},{"id":150,"depth":27,"text":151},{"id":335,"depth":27,"text":336},{"id":342,"depth":27,"text":343},"Add arrows to a screenshot in your browser. Free, no install or signup needed.",{},"/how-to/add-arrows-to-a-screenshot",{"title":225,"description":362},{"loc":364},"how-to/add-arrows-to-a-screenshot","b0nVUalZz6rtCOOp4mdrZQXXIIowFEdsBbiH5RaDZWU",{"id":370,"title":371,"body":372,"category":214,"date":215,"description":466,"extension":32,"meta":467,"navigation":24,"path":468,"published":24,"seo":469,"sitemap":470,"stem":471,"__hash__":472},"howto/how-to/blur-text-in-a-screenshot.md","How to Blur Text in a Screenshot",{"type":8,"value":373,"toc":460},[374,377,383,386,406,409,415,417,442,446,449,453,456],[11,375,376],{},"Most screenshots shared inside a SaaS team (help docs, support replies, bug reports) have something on screen that shouldn't be public. A customer's email. The Slack notification that just popped up. A session token in the address bar. Blurring it before you share is faster, and safer, than cropping the image and hoping nothing leaked.",[11,378,379,380,382],{},"Here's how to do it in Pixelmatic's ",[54,381,57],{"href":56},". No install, no signup, no upload.",[60,384,385],{"id":62},"The fast version",[65,387,388,391,398,401,404],{},[68,389,390],{},"Open the editor and capture, paste, or drop your screenshot in.",[68,392,393,394,397],{},"Pick the ",[75,395,396],{},"mask"," tool from the annotation toolbar.",[68,399,400],{},"Drag a rectangle over the text you want to hide.",[68,402,403],{},"Resize until you've covered everything sensitive.",[68,405,106],{},[11,407,408],{},"The blur is rendered into the exported image, not just a layer sitting on top, so once it's exported, what was underneath is gone. No \"right-click, inspect element\" trick will recover it.",[108,410,413],{"className":411,"code":412,"language":113,"meta":26},[111],"[ VIDEO PLACEHOLDER ]\nShort loop (10 to 20 seconds) showing: paste a screenshot containing\na fake customer email and a fake API key, select the mask tool, drag\nrectangles over both, export. Should make the workflow obvious\nwithout narration.\n\nAlt text: Blurring a customer email and API key in a screenshot\nusing Pixelmatic's mask tool.\n",[115,414,412],{"__ignoreMap":26},[60,416,120],{"id":119},[122,418,419,425,431,436],{},[68,420,421,424],{},[75,422,423],{},"Help-doc screenshots."," Most of your in-app screenshots will show a real-looking user account. Blur the email, blur the org name, and ship it.",[68,426,427,430],{},[75,428,429],{},"Support replies."," When you're answering a customer with a screenshot from inside their account, blur anything that isn't the thing you're showing them.",[68,432,433,435],{},[75,434,288],{}," Engineers don't need to see your customer's PII to reproduce the bug. Blur it, file the ticket.",[68,437,438,441],{},[75,439,440],{},"Launch posts."," Before you share that screenshot of your dashboard, it's worth a quick check that the demo data isn't actually a real user's data.",[60,443,445],{"id":444},"why-before-you-share-matters","Why \"before you share\" matters",[11,447,448],{},"Once a screenshot leaves your machine (Slack, email, an external tool), you've lost control of it. Blurring after the fact is a different, and harder, problem. You have to find every copy, replace it, and hope nobody downloaded the original. Doing it once, in the editor, before export, is generally the safest way to handle it.",[60,450,452],{"id":451},"what-about-cropping-instead","What about cropping instead?",[11,454,455],{},"Cropping works when the sensitive area is at the edge of the screenshot. You're not really hiding anything there, just removing it. The moment the sensitive content sits in the middle of what you need to show (an email in a row of a table, a password field next to a button you're pointing at), cropping breaks the screenshot. Blur lets you keep the layout intact.",[11,457,203,458],{},[54,459,206],{"href":56},{"title":26,"searchDepth":27,"depth":27,"links":461},[462,463,464,465],{"id":62,"depth":27,"text":385},{"id":119,"depth":27,"text":120},{"id":444,"depth":27,"text":445},{"id":451,"depth":27,"text":452},"Cover up sensitive text (passwords, customer emails, API keys, internal IDs) before you share a screenshot. Free, no install, no signup.",{},"/how-to/blur-text-in-a-screenshot",{"title":371,"description":466},{"loc":468},"how-to/blur-text-in-a-screenshot","uoCo0nfF1XSXWpRip5UfMAGIlzEr13HePUv73zWppQ8",1780659694041]