Documentatie
Alles wat je moet weten om GenMockups effectief te gebruiken - van eerste vastlegging tot definitieve export.
Snelstart
GenMockups vereist geen account, geen installatie en geen betaling. Open de startpagina, voer een URL in of upload een screenshot, en exporteer een mockup in minder dan twee minuten.
Plak een URL
of upload een screenshot
Kies een apparaat
mobiel, tablet, laptop, of desktop
Bewerk het canvas
tekst, kleur, annotaties
Exporteer PNG
transparante achtergrond, 2× retina
URL vastleggen
Voer een volledig gekwalificeerde URL in die begint met https:// of http:// en klik op Genereer Mockup. Een headless Chromium browser op de server laadt de pagina op een viewport van 1440 px, wacht tot netwerkactiviteit is gestopt, en neemt dan een full-page screenshot.
Het vastleggen duurt doorgaans 5–15 seconden. Zeer grote pagina's of pagina's die middelen langzaam laden, kunnen tot 30 seconden duren voordat er een time-out optreedt.
Sites achter Cloudflare, inlogmuren of anti-bot systemen zullen de geautomatiseerde vastlegging mislukken. Gebruik in dat geval de screenshot upload.
Screenshot uploaden
Klik op Upload Screenshot en selecteer een PNG, JPEG of WebP-bestand op je apparaat. Het bestand wordt lokaal verwerkt in de browser - het wordt nooit naar de server gestuurd of daar opgeslagen.
Geaccepteerde formaten en aanbevolen afmetingen:
Slimme scan
Tijdens URL vastleggen haalt een parallel verzoek de HTML van de pagina op en extraheert:
- og:title of <title> - vult het Kopveld in
- og:description - vult het Subkopveld in
- <meta name="theme-color"> - stelt de initiële achtergrondkleur in
Als er geen theme-color tag aanwezig is, analyseert node-vibrant het screenshot en kiest de meest visueel opvallende kleur. Alle geëxtraheerde waarden kunnen handmatig worden bewerkt in de canvas editor.
Voeg <meta name="theme-color" content="#YourBrandColor"> toe aan je HTML <head> voor nauwkeurige automatische kleuraanpassing. Slimme scan werkt alleen op URL vastleggingen, niet op geüploade screenshots.
Canvas editor
De Fabric.js canvas editor laadt na een succesvolle vastlegging of upload. Alle bewerkingen zijn client-side en niet-destructief.
Kop & Subkop
Sleepbare tekstvakken die vooraf zijn ingevuld door de slimme scan. Dubbelklik om de tekst te bewerken. Sleep om te verplaatsen. Gebruik de zijbalk om lettergrootte, gewicht of kleur te wijzigen.
Achtergrondkleur
Ingesteld door slimme scan of voer handmatig een hex-waarde in. De kleur vult het hele canvas achter het apparaatframe.
Annotaties
Klik op "Voeg annotatie toe" om een sleepbaar aanwijzerlabel te plaatsen. Gebruik annotaties om UI-elementen te benadrukken in casestudies en product walkthroughs.
Apparaat & stijl schakelaar
Verander het apparaatframe of wissel tussen plat en gekanteld op elk moment - je screenshot en tekstaanpassingen blijven behouden.
Apparaat frames
Vier apparaattypen × twee stijlen = acht frame opties.
Exporteren
Klik op Exporteer Afbeelding (of druk op Ctrl + E) om een PNG-bestand te downloaden. De export omvat het apparaatframe, screenshot, achtergrond, en alle tekst- en annotatie-elementen.
- Formaat: PNG met transparante achtergrond
- Resolutie: 2× de canvasgrootte (retina-ready)
- Bestandsnaam: mockup-[device]-[style].png
- Niets wordt geüpload naar een server - de export gebeurt volledig in de browser via de HTML5 Canvas API
Sneltoetsen
Alle sneltoetsen zijn actief wanneer het canvas in focus is.