1. Börja med en ren skärmdump
Inget påverkar resultatet så mycket som skärmdumpen. En suddig bild förstör den finaste 3D-scenen.
- Ta den på enheten eller i simulatorn, i full upplösning. På en iPhone 17 Pro blir det 1206 × 2622 pixlar.
- Städa statusfältet. Xcodes simulator visar 9:41 och fullt batteri; Androids demoläge gör samma sak.
- Använd riktigt innehåll. Lorem ipsum och tomma listor får en mockup att se ofärdig ut.
För en webbplats tar du den första skärmen i stället för hela sidan, eftersom enheten ändå bara visar den synliga delen.
2. Bestäm vad du gör
Samma skärmdump kan bli tre olika saker, och det styr nästa steg:
- en stillbild (App Store, webbplats, presentation);
- en kort video (lansering, Reels, App Store-förhandsvisning);
- din design i ett riktigt foto (sociala medier, portfolio).
Att göra det i tre olika program tar tid. Vi byggde Mockup Center så att allt görs i samma app.
3. Välj enhet och scen
Ta den enhet som din app faktiskt körs på. En iOS-app på en Android-mobil är ett litet fel, men folk ser det. Mockup Center har 65 enheter, bland andra iPhone, Samsung Galaxy, Google Pixel, iPad, MacBook, iMac och Apple Watch, alla utan loggor.
Mallarna har redan ljus, kameravinkel och rörelse inställda. Har du bråttom, börja där och ändra det du inte gillar.
4. Släpp in skärmdumpen
Dra bilden till enheten så fyller den skärmen. Släpper du in flera på en gång hamnar var och en på samma enhet i samma scen. Med sex App Store-skärmdumpar sparar det mycket tid.
För video släpper du in en skärminspelning på samma sätt. Den spelas på skärmen medan enheten rör sig.
5. Vinkel, ljus och bakgrund
Här gör små ändringar stor skillnad:
- Vinkel: en liten vridning ser mer levande ut än rakt framifrån. Mellan 15 och 25 grader brukar fungera.
- Ljus: vrid huvudljuset så vrids skuggan med. En skugga bakåt och nedåt ser mest naturlig ut.
- Bakgrund: en enfärgad yta eller en mjuk toning tävlar inte med skärmen. En ljus nyans av din varumärkesfärg fungerar nästan alltid.
6. Lägg till rörelse (för video)
Välj animationer i menyn; varje ny börjar där den förra slutade. För att korta ett klipp drar du i kanten på tidslinjen. Räcker inte mallarna sätter du egna nyckelrutor på enheten och kameran.
Använd 9:16 för Reels och TikTok och 16:9 för YouTube och din webbplats. Båda kommer från samma projekt.
7. Exportera
- App Store och Google Play: PNG eller JPEG med bakgrund. Butikerna nekar genomskinliga bilder.
- Webbplatser och presentationer: genomskinlig PNG, så att enheten ligger direkt på sidan.
- Video: MP4. Ska den in i ett redigeringsprogram, ta genomskinlig ProRes 4444 eller WebM.
Mockup Center exporterar upp till 8K och laddar ner flera bilder tillsammans som en ZIP.
