1. Begin met een schone screenshot
Niets bepaalt het resultaat zo sterk als de screenshot. Een wazig beeld verpest de mooiste 3D-scène.
- Maak hem op het apparaat of in de simulator, op volle resolutie. Bij een iPhone 17 Pro is dat 1206 × 2622 pixels.
- Ruim de statusbalk op. De Xcode-simulator toont 9:41 en een volle batterij; de demomodus van Android doet hetzelfde.
- Gebruik echte inhoud. Lorem ipsum en lege lijsten laten een mockup onaf lijken.
Bij een website pak je het eerste scherm in plaats van de hele pagina, want het apparaat laat toch alleen het zichtbare deel zien.
2. Bepaal wat je maakt
Van dezelfde screenshot kun je drie dingen maken, en dat bepaalt de volgende stappen:
- een stilstaand beeld (App Store, website, presentatie);
- een korte video (lancering, Reels, App Store-preview);
- je ontwerp in een echte foto (social media, portfolio).
Dat in drie losse programma's doen, kost tijd. We hebben Mockup Center zo gebouwd dat ze alle drie in dezelfde app ontstaan.
3. Kies apparaat en scène
Neem het apparaat waarop je app echt draait. Een iOS-app op een Android-telefoon is een kleine fout, maar mensen zien het. Mockup Center heeft 65 apparaten, waaronder iPhone, Samsung Galaxy, Google Pixel, iPad, MacBook, iMac en Apple Watch, allemaal zonder logo.
Sjablonen hebben licht, camerahoek en beweging al ingesteld. Moet het snel, begin daar en verander wat je niet bevalt.
4. Sleep de screenshot erin
Sleep het beeld op het apparaat en het vult het scherm. Sleep je er meerdere tegelijk in, dan komt elk op hetzelfde apparaat in dezelfde scène. Bij zes App Store-screenshots scheelt dat veel tijd.
Voor een video sleep je op dezelfde manier een schermopname erin. Die speelt af op het scherm terwijl het apparaat beweegt.
5. Hoek, licht en achtergrond
Kleine aanpassingen maken hier veel verschil:
- Hoek: een kleine draai oogt levendiger dan recht van voren. Tussen 15 en 25 graden werkt meestal.
- Licht: draai het hoofdlicht en de schaduw draait mee. Een schaduw naar achteren en naar beneden ziet er het natuurlijkst uit.
- Achtergrond: een effen kleur of een zacht verloop concurreert niet met het scherm. Een lichte tint van je merkkleur werkt bijna altijd.
6. Voeg beweging toe (voor video)
Kies animaties uit het menu; elke nieuwe begint waar de vorige eindigt. Om een clip korter te maken sleep je de rand op de tijdlijn. Zijn de sjablonen niet genoeg, zet dan eigen keyframes op apparaat en camera.
Gebruik 9:16 voor Reels en TikTok en 16:9 voor YouTube en je website. Beide komen uit hetzelfde project.
7. Exporteer
- App Store en Google Play: PNG of JPEG met achtergrond. De stores weigeren transparante beelden.
- Websites en presentaties: transparante PNG, zodat het apparaat direct op de pagina staat.
- Video: MP4. Gaat hij naar een montageprogramma, neem dan transparante ProRes 4444 of WebM.
Mockup Center exporteert tot 8K en downloadt meerdere beelden samen als ZIP.
