Mockups für Websites auf dem MacBook: Screenshot, Browserfenster und Aufnahme
Eine Website ist kein Screenshot vom Handy. Ihr Wichtigstes steht oben und an den Rändern, das Logo links, die Anmeldung rechts, bei einer Web App die Seitenleiste. Showoff legt einen Screenshot einer Website deshalb anders aufs MacBook als ein Bild aufs Handy. Diese Anleitung zeigt, wie deine Seite sauber auf den Bildschirm kommt.
Die passende Aufnahme
Das MacBook zeigt eine Seite im Seitenverhältnis 16:10. Nimm deine Seite deshalb in 1440 × 900, 1920 × 1200 oder 2880 × 1800 Pixeln auf, dann passt sie genau. Am einfachsten geht das in den Entwicklerwerkzeugen deines Browsers, dort stellst du die Größe der Ansicht ein und machst davon einen Screenshot. Die empfohlene Größe zeigt dir Showoff auch beim Gerät, über der Liste seiner Bildschirme.
Andere Formate gehen auch. Die Breite bleibt immer ganz, und die Seite beginnt oben. Ist dein Screenshot breiter, etwa 16:9, setzt Showoff die Seite unten fort, statt links und rechts etwas abzuschneiden. Ist er etwas höher, fehlt unten nur, was man sonst scrollen würde. Eine sehr lange Seite passt Showoff dagegen ganz ein, und dann wird sie klein. Schneide sie deshalb vorher auf die Höhe eines Bildschirms zu.
Worauf du bei der Aufnahme achtest
- Schließ Cookiebanner, Chatfenster und Hinweise, bevor du aufnimmst. Im Mockup wirken sie wie ein Fehler.
- Zeig echte, aber harmlose Daten. Leere Tabellen und Platzhalter verraten sofort, dass es eine Attrappe ist.
- Für Nahaufnahmen nimm 2880 × 1800 Pixel. Fährt die Kamera nah heran, bleibt die Schrift dann scharf.
- Hat deine Seite ein dunkles Design, nimm für Fenster und Dock das dunkle Erscheinungsbild.
Menüleiste, Browserfenster und Dock
Über der Seite zeichnet Showoff die Menüleiste des Mac, in der auch die Kamera des MacBook sitzt. Beim Gerät findest du unter „Mac Oberfläche“ drei Schalter, die du frei kombinierst.
- „Menüleiste“ zeichnet die Leiste mit der Uhrzeit oben über die Seite.
- „Browserfenster“ legt die Seite in ein Fenster von Safari, Chrome oder Arc.
- „Dock“ stellt das Dock des Mac mit echten Programmen unter das Fenster.
Für Fenster und Dock wählst du dazu das Erscheinungsbild, hell oder dunkel. Beide brauchen etwas Platz, eine Aufnahme mit 1440 × 900 Pixeln verliert deshalb unten ein Stück. Das Browserfenster zeichnet Showoff ohne Schrift, also ohne erfundene Adresse und ohne Titel im Reiter.
Zeigt dein Screenshot schon eine eigene Menüleiste, eine Adresszeile oder ein Dock, schalte das Gezeichnete aus. Sonst steht alles doppelt da.
Browserfenster ohne MacBook
Ein Browserfenster gibt es auch als eigenes Gerät, schwebend und ohne Laptop drumherum. Du findest es als „Browserfenster“, als „Browser mit Dock“ und als „Browser mit Taskleiste“ im Stil von Windows. Diese Fenster gehören in allen Stilen zu Free.
Die Seite als Video
Statt eines Screenshots kannst du deine Seite auch direkt aufnehmen. Leg dafür einen Film an und wähl das MacBook aus. Bei seinen Bildschirmen steht unter „Hinzufügen“ der Eintrag „Bildschirm aufnehmen“. Du wählst einen Tab, ein Fenster oder den ganzen Bildschirm und nimmst bis zu 90 Sekunden auf. Die Aufnahme landet als Video in der Mediathek und läuft auf dem Display.
Die Kamera über die Seite fahren
Im Film ziehst du mit der Auto Bewegung Rechtecke über die Stellen der Seite, die zählen, etwa die Überschrift, einen Preis oder ein Diagramm. Die Kamera fährt sie nacheinander an. Für viel Text nimmst du den Modus „2D“. Dann schaut die Kamera senkrecht aufs Display und verzerrt keine Buchstaben.
Vorlagen für Websites
- Open Lid zeigt das MacBook gerade von vorn. Der Bildschirm bekommt die ganze Aufmerksamkeit.
- Top Down zeigt es von oben mit der Tastatur, wie auf einem aufgeräumten Schreibtisch.
- Desk Duo stellt ein iPhone davor, für Web App und App zusammen.
- Lid Open klappt das MacBook in einem Video auf, als nahtlose Schleife.
Größe und Export
Für ein Kopfbild auf deiner Website wählst du im Reiter „Bühne“ unter „Bildgröße“ das „Kopfbild für Websites“ mit 2560 × 1440 Pixeln oder das Querformat 16:9 mit 1920 × 1080. In Free ist das MacBook Pro mit 14 Zoll in Silber dabei. Das Modell mit 16 Zoll, Space Schwarz und das Studio Display gehören zu Pro. Full HD exportierst du immer frei, darüber zählt der Export zu deinen Exporten in 2K und 4K, siehe Preise.
Soll deine Web App in einem Video auf deinen Song laufen, lies Launch Video mit KI. Dort läuft sie auf dem MacBook, quer in 16:9. Was die Begriffe rund um Kamera und Bewegung bedeuten, steht im Glossar.
