Documentation
Every control in the studio, in the order you meet it — getting a screenshot in, framing it, arranging it, and getting the file out. Nothing here needs a setting changed first; the defaults are the ones we would pick.
Getting a screenshot in
Three ways, and they all land in the same place.
Upload
Drag a file onto the drop zone, click it to browse, or paste with ⌘V / Ctrl V anywhere in the studio. PNG, JPG, WebP and SVG all work. Uploads are unlimited and never leave your browser — the image is composited on your own machine.
Paste a link
Switch to Paste a link, give it a URL, choose Desktop, Tablet or Mobile, and press Capture screenshot. We load the page at that width and photograph the whole thing, top to bottom, not just the part that fits on a screen.
Width matters more than it looks. A page captured at desktop width is the desktop layout — dropping that into a phone frame gives you a small desktop page, not the mobile design. The studio warns you when the two disagree.
More than one
Add as many as you like. The strip under the intake is your set: click one to select it, use the + on a thumbnail to duplicate it, and the × to remove it. Most controls apply to the selected screenshot; the ones that apply to everything say so.
Frame
What the screenshot sits in.
The five devices
Browser is a window with an address bar. Monitor is a desktop panel on a stand. Laptop has a deck and a keyboard. Phone and Tablet rotate between portrait and landscape.
They are drawn, not photographed. That is why they stay sharp at 4000 px, why every finish is the same object in a different material, and why nobody else's hands are in your presentation.
Material
Seven colors — Midnight, Graphite, Silver, Gold, Sky, Burgundy and Orange — plus four outline styles for when you want the screenshot to carry the picture on its own.
The glass edge adapts to what is in it. A dark site keeps the deep surround real hardware has; a bright page lifts it toward the frame's own color, because a black ring around a white screenshot is the loudest thing in the picture and reads as a border somebody drew rather than the edge of glass.
Screenshot fit
Fill crops to the frame. Top pins the top of the page and lets the rest run past the bottom, which is what you want for a long capture. Fit shows the whole image with space around it.
When a capture is taller than its frame, a Scroll slider appears so you can choose which part of the page shows.
Arrange
How several screens sit together: a single screen, a pair, an angled set, a stagger, or a grid. Grids take a count and a gap; pairs take a second device, a side, and how much the two overlap.
Whatever the arrangement, Download gives you one image with everything in it. Download all gives you each screenshot as a separate file.
Style
Background
Ten to start and the rest one tap behind + more. Transparent is first because it is the one people hunt for — it exports real alpha in PNG and WebP so the mockup can sit on someone else's page. JPG has no transparency and will come out on white.
Below the swatches you can paste any hex, or mix a color in CMYK if the piece is going to print. The wall, floor and shadow are all derived from the one color, so it stays a photograph rather than a flat fill.
Finish
Six switches, and they are photographic rather than structural. Flat background drops the horizon for a single flat color. Reflection puts the device on a reflective surface. Screen glare adds the sheen a real panel catches. Film grain takes the vector-clipart edge off. Laptop notch cuts the camera housing into a laptop lid. Vignette darkens the corners the way a lens does, which settles the device into the ground instead of leaving it pasted on.
Elements
Two rows to start and the rest behind + more. Twenty shapes that sit behind the device — halos, grids, contours, waves, arcs — in any color and any opacity. Six of them use your logo: scatter it, watermark it, tile it, stamp it in a corner, trail it across, or ring the device with it. Upload the mark once and it adapts, lightening on dark grounds and darkening on light ones.
The Background / Element / Both switch decides how the two layer. Both composes the element into the full background, so anything crossing the canvas is struck through by the ground's own horizon and the two read as one photograph.
Export
Format
- PNG
- Transparency and fine type.
- JPG
- When file size matters and there is no alpha.
- WebP
- Both of the above.
- A page at 300 dpi, for print and decks.
- SVG
- The artwork at full resolution. It embeds the image rather than redrawing it as vector paths, which is the honest thing to do with a photograph.
Size and shape
The destination grid sets the canvas to a platform's exact dimensions — LinkedIn, Instagram, IG portrait, Story, TikTok, Facebook, X, YouTube and Pinterest under Social; Google Ads, Ebook, Screen and Billboard under Media; Dribbble, Slide and Canva under Canvas. Picking one changes the shape you are working on and leaves your frame alone.
Or set it yourself: Canvas shape for a ratio, Resolution for 1600 to 4000 px on the long edge. Pick the size the platform actually wants — a service scales a large image down cleanly and a small one up badly.
An exact size
Exact size takes a width and a height and exports at precisely that, from 200 to 8000 px a side. It is what you want when somebody has handed you a spec — an ad slot, a print placement, a client's template — rather than a platform name.
The size that will actually be written is printed under the canvas the whole time you are working, so there is never a surprise at the download.
Rounded corners
The whole canvas can be rounded, which matters when the export is going straight onto a page that already has soft edges.
Captures and billing
Uploads and downloads are unlimited. The only thing with an allowance is capturing a live URL, because each one calls a paid service on your behalf.
- Trial
- 5 URL captures.
- $9 a month
- 50 URL captures a month, reset on the 1st.
- Always free
- Uploading your own file, and every download.
The ring beside the bell in the top bar is that allowance: full at the start of the month, closing as you spend it, and orange throughout. Hover it for the exact number, or open the account panel for the meter and the reset date.
The bell only rings for something that needs a decision — a payment that failed, a trial about to end. It stays quiet otherwise, which is most of the time.
Billing in the account panel opens Stripe, where you can change the card, switch plan or cancel. Cancelling leaves everything you have made alone.
Odds and ends
Where do my screenshots go?
Nowhere. In the studio the compositing happens in your browser and the image never leaves your computer. When the server renders instead, the upload is held in memory for as long as the render takes and is never written to disk.
Can I use the exports commercially?
Yes, on any plan, with no attribution required. The images are yours.
The sidebar is too short
Drag the divider under the intake upward, or double-click it. It collapses the upload area so the controls get the whole panel.
Something is wrong
Email support@mockbrd.com. Say what you were doing, what you expected, and what happened instead — a screenshot of the studio helps more than a description. There is also a support page. Every message is read.