Mockup maken

Zo wordt het berekend

Kort gezegd: een mockup is een realistisch voorbeeldbeeld dat laat zien hoe een logo of ontwerp eruitziet op een echt product. Deze tool zet je afbeelding in het juiste perspectief op acht productfoto’s – T-shirt, hoodie, mok, uithangbord, visitekaartje, laptop, telefoon en ingelijste poster – en neemt plooien, schaduwen en glans van de foto over. Alles draait in je browser: geen account, geen watermerk, geen upload.

Zo werkt het

1. Sleep je logo erin, kies een bestand of plak het met Ctrl + V. Zonder afbeelding tekent de tool een voorbeeldlogo van de tekst die je typt.
2. Tik op een product: het voorbeeld verschijnt meteen.
3. Pas grootte en positie aan. Laat ‘Witte achtergrond weghalen’ aan voor logo’s op wit en zet ‘Hele vlak vullen’ aan voor foto’s en screenshots.
4. ‘Mockup opslaan’ downloadt een PNG of JPG; ‘Alle 8 als zip’ maakt alle producten tegelijk – handig voor offertes, webshops en presentaties.

Zo wordt gerekend

Een bord, poster of scherm staat schuin op de foto. Uit de vier hoekpunten berekent de tool een projectieve afbeelding (homografie), de methode die Paul Heckbert in 1989 voor texture mapping beschreef. Voor elke pixel van de foto rekent de tool terug naar het bijbehorende punt in je ontwerp en mengt de vier buurpixels (bilineaire interpolatie) – zonder kartels of naden. De mok is rond: daar wordt het ontwerp om een cilinder gelegd, naar de zijkanten samengedrukt en boven en onder langs een ellipsboog geleid.

Om gedrukt en niet geplakt te lijken, wordt het ontwerp vermenigvuldigd met de helderheid van de productfoto (W3C-overvloeimodus ‘vermenigvuldigen’). Plooien in de stof en de schaduw op de mok liggen daardoor ook op de print, en glans op de keramiek blijft zichtbaar. Schermen geven zelf licht en worden niet donkerder gemaakt.

Eerlijke grenzen

De productfoto’s zijn 1024 tot 1216 pixels aan de lange kant – ruim genoeg voor website, webshop en social media, maar geen drukbestand. Ze zijn voor deze site lokaal met een beeldmodel gemaakt en tonen geen merken. Een mockup blijft een voorbeeld: echte kleuren hangen af van de druktechniek en het materiaal.

Privacy

Je logo wordt alleen in je browser verwerkt en nooit geüpload. Alleen de instellingen (product, grootte, tekst) worden onthouden, niet de afbeelding.

Ook handig: achtergrond verwijderen van een logo en visitekaartje maken als drukklare pdf.

Veelgestelde vragen

Bronnen en wettelijke basis

• Heckbert (1989) – Fundamentals of Texture Mapping and Image Warping, UC Berkeley UCB/CSD-89-516 (projektive Abbildung Quadrat → Viereck)
• W3C – Compositing and Blending Level 1: multiply B(Cb, Cs) = Cb × Cs
• ITU-R BT.709 – Luminanz Y = 0,2126 R + 0,7152 G + 0,0722 B
• MDN – CanvasRenderingContext2D.getImageData() / putImageData()
• W3C – Web Share API
• ITU-T T.81 / ISO/IEC 10918-1 – JPEG
• W3C – Portable Network Graphics (PNG) Specification
• Google for Developers – An image format for the Web (WebP)
• AOMedia – AV1 Image File Format (AVIF)
• MDN – Image file type and format guide
• MDN – HTMLCanvasElement.toBlob()

Bijgewerkt op: 1 oktober 2026 · Redactioneel beleid