Softonic

Screenshot-mockupgenerator

Stap 1 / 3

Een kale screenshot is functioneel, maar saai. Verpakt in een browserbalk of een macOS-vensterframe, met een zachte schaduw en een kleurrijke achtergrond, ziet dezelfde screenshot eruit als een afgewerkte productvisual. Deze tool neemt de afbeelding die je al hebt en plaatst die in een browservenster, een macOS-venster of een eenvoudig frame met afgeronde hoeken, op een verloopachtergrond met instelbare padding, hoekradius en schaduw, zodat het resultaat past in slidedecks, socialposts en perskits.

Zo maak je een mockup van een screenshot

  1. 1

    Upload je screenshot

    Elke PNG, JPG of WebP tot 30 MB, vastgelegd op elke resolutie. De tool verwerkt zowel retina als standaard.

  2. 2

    Kies een frame

    Browservenster (met de stoplichtstipjes en een URL-balk), macOS-venster (met de stoplichtstipjes) of een eenvoudig frame met alleen afgeronde hoeken.

  3. 3

    Style de achtergrond

    Kies een achtergrondkleur die overloopt in een warm verloop. Voeg padding toe, pas de hoekradius aan en zet de slagschaduw aan of uit.

  4. 4

    Exporteer

    Download de voltooide mockup als PNG voor socialposts, slides of perskits.

Het juiste frame en de juiste achtergrond kiezen

De keuze van het frame verraadt de context. Een browserbalk zegt “webapp”. Een macOS-venster zegt “desktopapp”. Een eenvoudig frame houdt de focus op een interface die al zijn eigen chrome heeft. Kies degene die past bij wat je laat zien.

Frame-gids

Frame Het best voor
Browservenster SaaS-functies, landingspagina’s, dashboards
macOS-venster Desktopapps, editors, terminalopnames
Eenvoudig Een screenshot die al zijn eigen chrome bevat

Aanbevolen referentieformaten

De tool exporteert op de resolutie van je eigen screenshot. Wanneer je het resultaat bijsnijdt of herschaalt voor een specifiek kanaal, zijn deze afmetingen een handig richtpunt.

Bestemming Afmetingen (px)
Twitter / X-card 1600 x 900
LinkedIn losse afbeelding 1200 x 627
Instagram-feed (liggend) 1080 x 566
Product Hunt-galerij 1270 x 760
Slidedeck (16:9) 1920 x 1080

Stijltips

  • Houd de schaduw subtiel. De slagschaduw tilt het frame van de achtergrond; laat hem aan voor diepte of zet hem uit voor een platte, minimalistische look.
  • Houd de padding ruim. 60-120 px rondom het frame voorkomt dat de screenshot benauwd oogt.
  • Kies een achtergrond die bij je merk past. De kleur die je kiest loopt over in een warm verloop, dus een tint dicht bij je merk koppelt de asset aan je site.
  • Stem het frame af op de inhoud. Een browserbalk rondom een desktopapp, of een macOS-venster rondom een webpagina, oogt als een mismatch. Gebruik bij twijfel het eenvoudige frame.
  • Verberg gevoelige gegevens (e-mailadressen van gebruikers, echte namen, factuurgegevens) voordat je exporteert. Blurren is eenvoudiger dan een juridische nasleep.

Veelgestelde vragen

Drie: een browservenster (stoplichtstipjes plus een URL-balk), een macOS-venster (stoplichtstipjes, zonder URL-balk) en een eenvoudig frame dat alleen de hoeken van je screenshot afrondt. De frames zijn gestileerd, geen pixel-perfecte nabootsingen van een specifiek product, en dus veilig voor marketinggebruik in de meeste regio’s.

Op dit moment niet. De mockup wordt samengesteld op een verloop dat is opgebouwd uit de achtergrondkleur die je kiest, en de PNG wordt met die ingebakken achtergrond geëxporteerd. Kies een kleur dicht bij je merk, of een neutrale tint als je de afbeelding op een egaal oppervlak wilt plaatsen.

De mockup wordt gerenderd op een comfortabele werkbreedte, dus zeer grote screenshots worden geschaald om in het frame te passen. Leg vast op retina (2x) voor het scherpste resultaat, en de geëxporteerde PNG blijft scherp op high-DPI-schermen.

Nee. De compositie draait in een browser-canvas en de afbeelding verlaat je apparaat alleen wanneer je de uiteindelijke PNG opslaat.

Gerelateerde tools

Material Design-kleurkiezer

Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Kruissteekpatroon maken

Zet JPEG, PNG of WebP om in een afdrukbaar kruissteekpatroon van 10–150 steken met 2–40 eigen kleuren, symbolen, exacte aantallen en stofmaten.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

Instagram-grid-splitter

Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.

Tool beschikbaar in andere talen