Sifency Tools
Let’s Talk

ThemeForest preview mockup generator

The first picture of a template does most of the selling. Frame the home page in a laptop, set a clean gradient behind it, and export at the exact size the marketplace asks for, with a sharper 2x version beside it. Nothing is uploaded: the picture is drawn in your browser.

Studio

Your screenshot appears here

Drop, paste or browse for a screenshot, or try an example.

Drop a screenshot here

Or paste one with Ctrl+V. PNG, JPG, WebP, GIF, AVIF or BMP, up to 25 MB.

Laptop frame · no screenshot yet

Export

Saves as mockup-laptop-590x300.png · 590 × 300 px · PNG · 1x

Copy image always copies a PNG at the chosen scale.

Add a screenshot to enable Download and Copy image.

More mockup ideas

How it works

  1. Add a screenshot

    Drop, paste or browse for a screenshot of your design (PNG, JPG, WebP, GIF, AVIF or BMP), or start with an example. Your own browser reads it and nothing is uploaded.

  2. Choose a device and a background

    Pick a phone, tablet, laptop, browser window or monitor, then set a solid, gradient, mesh or transparent background, the padding, the corner radius, the shadow, the bezel colour and, if you like, a second device.

  3. Pick a size

    Use a ready-made size for a marketplace preview, a Product Hunt gallery, Dribbble, Behance or a social post, or type your own width and height.

  4. Download or copy

    Save the mockup as a PNG or WebP at normal or double size, or copy it straight to your clipboard to paste into a chat or a document.

Questions about a ThemeForest preview mockup

How do I make a ThemeForest preview mockup?

Drop, paste or browse for a screenshot, or try the example. The laptop frame is drawn around it at once. Then open Size and choose ThemeForest preview (590 × 300 px), and change the background, padding and shadow as you like. Keep the preview simple: one device, one screen, one calm background. The small inline size cannot carry a second frame or fine detail.

Which sizes does the marketplace ask for?

An inline preview of 590 by 300 px, a square thumbnail of 80 by 80 px and a larger 3:2 cover, which the marketplace recommends at 2340 by 1560 px. All three are in the size list, so you do not need to type them.

Which image size should I use for a ThemeForest preview mockup?

The inline preview is only 590 by 300 px, so use few elements and a large device. Export the cover size separately when you need to show more. In the Size list choose ThemeForest preview, which is 590 × 300 px.

Is anything uploaded when I make a ThemeForest preview mockup?

No. Your screenshot is read and drawn into the laptop frame by your own browser, so the picture behind your ThemeForest preview mockup never reaches a server, and Download and Copy image work on your device.

Next step

Fill the rest of the page with placeholders

A mockup often needs filler images around it. Make exact-size colour placeholders with proper file names, and download a whole set as one ZIP.

Make placeholder images
View all tools
Contrast CheckerCheck WCAG contrast and fix failing colours in one click.Open toolColour Placeholder GeneratorExact-size placeholder images in any colour, named for you.Open toolPalette from ImageDrop an image, get a palette you can paste into code.Open toolFavicon and App Icon GeneratorOne image in, every icon and the HTML snippet out.Open tool

About these tools

Small tools, made by Sifency

Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.