# Bildschirmaufnahme für Tutorials und Demos: ein sauberer Ablauf

[Canonical HTML page](https://gradiently.design/de/guide/screen-recording-tips)

Die meisten Tutorials sind aus Gründen schwer anzusehen, die nichts mit der Software zu tun haben: Unordnung, winziger Text, Abschweifen und schlechter Ton. Hier ist ein Ablauf, der alle vier behebt.

## The short version

- Eine gute Bildschirmaufnahme hängt mehr von der Vorbereitung ab als vom Aufnahmetool: Bildschirm aufräumen, Text vergrößern und planen, was du sagst.
- Wer einen einzelnen Browser-Tab oder ein Fenster teilt, bekommt eine sauberere, privatere Bildschirmaufnahme als beim Teilen des ganzen Bildschirms.
- Ob eine Bildschirmaufnahme den Ton des Computers enthält, hängt vom Browser ab und davon, was du teilst.
- Wer in kurzen Takes mit je einem Schritt aufnimmt, korrigiert Fehler günstig und kann das fertige Video leicht kürzen.
- Untertitel und eine kurze Titelkarte im eigenen Branding machen ein Tutorial leichter verständlich und erkennbar deins.

Eine saubere **Bildschirmaufnahme** für ein Tutorial oder eine Demo entsteht aus vier Gewohnheiten: Räume den Bildschirm auf und vergrößere den Text, bevor du startest, teile nur den Tab oder das Fenster, das du brauchst, folge einer kurzen schriftlichen Gliederung und nimm deine Stimme mit einem Mikrofon nah am Mund auf. Dann nimmst du in kurzen Takes auf, schneidest Pausen heraus, fügst Untertitel hinzu und beginnst mit einer schlichten Titelkarte. Das Aufnahmetool zählt weit weniger als diese Schritte.

## Den Bildschirm vor der Aufnahme vorbereiten

Zuschauer sehen sich deinen Bildschirm viel genauer an als du. Ein vollgestellter Desktop, eine verirrte Benachrichtigung oder eine Lesezeichenleiste voller privater Links ziehen den Blick von dem ab, was du erklärst, und können Dinge zeigen, die du nie teilen wolltest.

1. **Nicht stören einschalten** Schalte Benachrichtigungen auf dem Computer und dem Handy daneben stumm. Eine einblendende Nachrichtenvorschau lenkt ab und kann privat sein.
2. **Alles schließen, was du nicht zeigst** Beende andere Apps und schließe überflüssige Tabs. Blende die Lesezeichenleiste und Erweiterungen in der Symbolleiste aus.
3. **Text vergrößern** Zoome Browser oder App auf 125 % oder 150 %. Tutorials werden oft auf Handys angesehen, wo normaler Interface-Text unlesbar wird.
4. **Demodaten nutzen** Melde dich bei einem Demo-Account an oder fülle die App mit Beispielnamen und Zahlen, damit keine Kundendaten oder privaten Dateien auftauchen.
5. **Fenster auf 16:9 bringen** Teilst du ein Fenster, gib ihm ungefähr die Form des fertigen Videos, damit keine schwarzen Balken drumherum entstehen.

## Was du teilst: Tab, Fenster oder ganzer Bildschirm

Nimmst du einen Bildschirm im Browser auf, zeigt der Browser seinen eigenen Freigabedialog und lässt dich einen Tab, ein Fenster oder einen ganzen Bildschirm wählen. Jede Option hat ihren Haken.

| Teilen | Gut für | Achte auf |
| --- | --- | --- |
| Ein Browser-Tab | Web-Apps und Websites; die privateste Wahl | Wechselst du mitten in der Aufnahme den Tab, folgt sie dir nicht |
| Ein Fenster | Eine Desktop-App, etwa eine Tabelle oder ein Editor | Menüs und Dialoge anderer Apps erscheinen nicht |
| Der ganze Bildschirm | Wechsel zwischen mehreren Apps | Zeigt alles: Benachrichtigungen, Dock, andere Fenster |

Teile das Kleinste, das die ganze Demo abdeckt. Für Software, die im Browser läuft, reicht meist ein Tab.

> **Berechtigungen, ehrlich gesagt** Auf dem Mac braucht der Browser selbst die Erlaubnis, den Bildschirm aufzunehmen: Beim ersten Mal schickt dich macOS zu Systemeinstellungen, Datenschutz und Sicherheit, Bildschirm- und Systemaudioaufnahme, und der Browser muss eventuell neu starten. Aufnehmen funktioniert außerdem nur auf einer sicheren Seite (https).

## Bildschirm mit Ton aufnehmen

Eine Bildschirmaufnahme kennt zwei Arten von Ton: deine Stimme über das Mikrofon und den Ton des Computers, etwa ein Video, das in der Demo läuft. Deine Stimme ist einfach. Der Computerton ist nicht garantiert: Ob ein Browser ihn teilen kann, hängt von Browser, Betriebssystem und davon ab, ob du einen Tab, ein Fenster oder den Bildschirm geteilt hast. Einen Tab in einem Chromium-Browser wie Chrome oder Edge mit angehakter Option zum Teilen des Tons freizugeben, ist der verlässlichste Weg. Zählt der Ton, mach einen Test von zehn Sekunden und hör ihn dir vor dem echten Take an.

- Nimm irgendein externes Mikrofon, selbst ein kabelgebundenes Headset, statt des eingebauten im Laptop, das Tastaturgeräusche und Lüfterbrummen aufnimmt.
- Halte das Mikrofon eine Handbreit vom Mund entfernt und leicht seitlich.
- Nimm in einem kleinen Raum mit weichen Dingen auf: Vorhänge, ein Sofa, ein Teppich. Kahle Wände erzeugen Hall.
- Trag Kopfhörer, wenn die Demo Ton macht, damit die Lautsprecher nicht ins Mikrofon zurückkoppeln.

## Schritte planen, nicht Sätze

Ein komplettes Skript Wort für Wort abzulesen klingt steif, und Improvisieren schweift ab. Der Mittelweg ist eine Gliederung: eine Zeile pro Schritt, mit dem genauen Klick und der einen Sache, die Zuschauer verstehen sollen. Halte sie auf Papier oder einem zweiten Bildschirm bereit, außerhalb des geteilten Bereichs.

```text
TITEL   So exportierst du ein Druck-PDF (unter 2 min)

0. Einstieg Zeige das fertige PDF mit Schnittmarken.
1. Öffnen   Dateimenü > Exportieren. Erkläre warum: Druckereien brauchen Beschnitt.
2. Wählen   Format: PDF. Qualität: Druck.
3. Prüfen   Zeige Beschnitt und Schnittmarken in der Vorschau.
4. Export   Klicke auf Exportieren und öffne die Datei als Nachweis.
5. Schluss  Eine Zeile Rückblick. Wo das nächste Video zu finden ist.
```

Eine Gliederung auf einer Seite. Jede nummerierte Zeile wird ein kurzer Take.

Nimm einen Schritt pro Take auf. Verhaspelst du dich, halt an, warte eine Sekunde und beginne diesen Schritt neu. Kurze Takes machen Fehler billig und liefern natürliche Schnittstellen. Bewege die Maus langsam und bewusst und warte nach jedem Klick einen Moment, damit Zuschauer sehen, was sich geändert hat.

## Aufnahme schneiden, untertiteln und rahmen

Ein Tutorial zu schneiden heißt vor allem, Dinge zu entfernen: die Stille, bevor du sprichst, den Ladekreisel, den Fehlstart. Kürze jeden Take knapp, leg sie in die richtige Reihenfolge und hör alles einmal durch. [Videoschnitt für Einsteiger](https://gradiently.design/de/guide/timeline-video-editing) erklärt Clips, Kürzen und Ton in einfachen Worten.

Dann kommen Untertitel. Viele schauen ohne Ton, und Untertitel helfen allen, die in einer Zweitsprache folgen. Halte sie kurz, höchstens zwei Zeilen, und platziere sie so, dass sie den Teil der Oberfläche, auf den du zeigst, nicht verdecken. [Video-Untertitel gestalten](https://gradiently.design/de/guide/video-captions-design) behandelt Größe und Platzierung.

Eine Tutorial-Titelkarte im Format 16:9 mit dem Text Druck-PDF in 4 Klicks exportieren, Tutorial 07, auf einem Verlaufshintergrund im Branding

Eine Titelkarte, zwei oder drei Sekunden lang gezeigt, sagt Zuschauern genau, was sie lernen, und lässt eine Reihe wie eine Reihe aussehen.

Für Social Posts setzt du die Aufnahme auf einen Hintergrund im Branding, statt sie auf ein Hochformat zu strecken. Eine Aufnahme in 16:9 sitzt gut mittig in einem Post in 1080×1350 oder einer Story in 1080×1920, mit einer Headline darüber und Platz für Untertitel darunter. Alle Formate stehen in [Videoformate für Social Media](https://gradiently.design/de/guide/social-video-sizes).

- Aufnahme 1920×1080: 1920 × 1080
- Feed-Post 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920

Eine Breitbildaufnahme und die zwei Hochformate, in denen sie am häufigsten landen muss. Setz sie auf einen Hintergrund, statt sie zu beschneiden.

### Schwer anzusehen

- Ganzer Bildschirm geteilt, winziger Text
- Laptop-Mikrofon, halliger Raum
- Ein langer Take mit jedem Zögern
- Maus rast über den Bildschirm
- Keine Untertitel

### Leicht zu folgen

- Ein Tab, auf 125 % oder mehr gezoomt
- Externes Mikrofon, gedämpfter Raum
- Ein Take pro Schritt, Pausen herausgeschnitten
- Langsamer, bewusster Mauszeiger, kurze Pause nach jedem Klick
- Kurze Untertitel abseits der Aktion

## Deinen Bildschirm in Gradiently aufnehmen

Mit Pro nimmt Gradiently einen Bildschirm, Tab oder ein Fenster direkt in ein Design auf, mit oder ohne Mikrofon, und ebenso deine Kamera oder nur deine Stimme. Der eigene Dialog deines Browsers fragt, was geteilt wird, und der Bildschirmton hängt vom Browser und der gewählten Fläche ab. Du prüfst den Clip, bevor du ihn hinzufügst, und bis dahin bleibt er in deinem Browser. Auf der Zeitleiste kürzt du ihn, fügst Untertitel und Musik hinzu und setzt ihn auf einen Hintergrund, der nur deinem Kanal gehört, dann exportierst du jede Größe, die du brauchst. [Produktdemo-Videos](https://gradiently.design/de/guide/product-demo-video) und [Talking-Head-Videos](https://gradiently.design/de/guide/talking-head-video) nutzen denselben Ablauf.

## FAQ

### Wie nehme ich den Bildschirm mit Ton auf?

Schalte für deine Stimme das Mikrofon ein. Für den Ton des Computers teilst du einen einzelnen Tab in einem Chromium-Browser und hakst die Option zum Teilen des Tons an; die Unterstützung in anderen Browsern und beim Teilen des ganzen Bildschirms ist unterschiedlich.

### Warum kann mein Browser auf dem Mac den Bildschirm nicht aufnehmen?

macOS verlangt, dass du den Browser unter Systemeinstellungen, Datenschutz und Sicherheit, Bildschirm- und Systemaudioaufnahme erlaubst. Beende danach den Browser und öffne ihn neu.

### Soll ich einen Tab, ein Fenster oder den ganzen Bildschirm teilen?

Teile das Kleinste, das die Demo abdeckt. Ein Tab ist am privatesten und reicht für Web-Apps; ein Fenster passt zu einer Desktop-App; den ganzen Bildschirm brauchst du nur, wenn du zwischen Apps wechselst.

### Wie lang sollte eine Bildschirmaufnahme für ein Tutorial sein?

So kurz, wie die Aufgabe es erlaubt. Teile alles mit mehr als etwa fünf Schritten in einzelne Videos auf, damit jedes eine einzige Frage beantwortet.

### In welcher Auflösung sollte ich meinen Bildschirm aufnehmen?

Ziel ist ein Ergebnis in 1920×1080, und die Oberfläche zoomst du auf 125 % oder mehr, damit der Text auch auf dem Handy lesbar bleibt.
