Was macht Bildkomposition?
Den Frame inszenieren und die Kamera bewegen: Rastersysteme, Sicherheitsbereiche, Fokushierarchie, negativer Raum, Parallax-Schichtung und wie das Layout das Auge über die Zeit führt. Erstellt Kompositionsnotizen, Ebenenstruktur (HG/MG/VG) und konkrete Kamerafahrt-Pläne mit Zahlen.
Wann zu verwenden
- Definieren des Layouts, des Brennpunkts und des negativen Raums eines Frames.
- Planen der Ein-/Austrittsrichtungen und Bewegungspfade von Elementen.
- Entwerfen von Kamera-Push/Pull, Schwenk, Verfolgung und Parallax-Fahrten.
- Anpassen einer Komposition an 16:9, 9:16 und 1:1 mit Sicherheitsbereichen.
Entscheidungsbaum
Was inszenierst du?
├─ Ein statisches Frame-Layout
│ └─ Raster setzen → EINEN Brennpunkt auf einen Drittel-Schnittpunkt platzieren
│ → Hierarchie ordnen (Größe>Kontrast>Farbe>Position) → negativen Raum reservieren
├─ Wo Dinge ein-/austreten
│ └─ Lesegefolge folgen; nächste Kante; Ease-Out beim Eintritt, Ease-In beim Austritt
│ (neue Inhalte → von rechts/unten; zurück/rückgängig → umkehren)
├─ Ein Gefühl von Tiefe / eine Kamerafahrt
│ └─ In HG/MG/VG-Ebenen aufteilen (die drei Bewegungsebenen)
│ → EINE Kamerafahrt pro Takt (Push | Schwenk | Follow | Parallax), Ease-In-Out
└─ Eine Komposition über Formate (16:9 / 9:16 / 1:1)
└─ Master in 16:9, Brennpunkt im mittleren Band → RESTACKEN (nicht zuschneiden) für 9:16
→ Kritischen Inhalt innerhalb der Titel-Sicherheitsränder halten
Querverweis – die gemeinsamen Frameworks anwenden. Dieser Skill ist die räumliche Hälfte von animation-principles. Wende sie explizit an:
- 1/3-Regel (
animation-principles) hat zwei Formen und dieser Skill verwendet beide räumlich: (a) Kompositionsdrittel – platziere den Brennpunkt auf einem Drittel-Schnittpunkt (33%/67%); (b) Entfernung – kein Element legt mehr als ~1/3 des Frames ohne einen dazwischenliegenden Keyframe oder eine Skalierungs-/Transparenzänderung zurück, so dass Eintritte lesbar bleiben. - Drei Bewegungsebenen (
animation-principles: Primär / Sekundär / Ambient) werden direkt auf die Tiefe abgebildet: Vordergrund = Primär (die Bewegung, der das Auge folgt), Mittelgrund = Sekundär (das Subjekt + unterstützende Reaktionen), Hintergrund = Ambient (langsam, kontrastarm). Die Parallax-Geschwindigkeit skaliert mit dieser Rolle. - Kläre die Drei Säulen (Emotionale Absicht / Visuelle Erzählung / Bewegungshandwerk) und die gewählte Bewegungspersönlichkeit (
motion-art-direction) bevor du eine Kamerafahrt nummerierst – Premium wünscht sich langsame, lange Pushes, Energetic wünscht sich Whip-Pans.
Kernarbeitsablauf
1. Ein Raster einrichten
Ein Raster gibt Ausrichtung und Rhythmus. Standardmäßig ein 12-Spalten-Raster für horizontales Web/Video (es unterteilt sich in Hälften, Drittel, Viertel, Sechstel) mit Zwischenräumen und äußeren Rändern. Für einen 1920 px breiten Frame: Außenrand 80–120 px, 12 Spalten, Zwischenraum 24–32 px.
content_width = frame_width - 2 * margin
column_width = (content_width - (cols - 1) * gutter) / cols
Beispiel (1920 breit, Rand 100, Zwischenraum 24, 12 Spalten): Inhalt 1720, Spalte = (1720 - 11*24)/12 = 121,3 px.
Ein Basislinienraster (vertikaler Rhythmus) von 8 px ist die standardmäßige Abstandseinheit; Größe und Abstand von allem in Vielfachen von 8 (8/16/24/32/48/64) für visuelle Kohäsion.
2. Den Brennpunkt platzieren
Verwende die Drittelregel: Teile den Frame in ein 3x3-Raster; platziere das Hauptsubjekt auf einer Drittellinie oder an einem Schnittpunkt (den „Kraftpunkten“), nicht in der Mitte – es sei denn, das Stück verwendet absichtlich Symmetrie für Ruhe/Formalität. Die Schnittpunkte liegen ungefähr bei 33%/67% horizontal und vertikal.
Baue eine visuelle Hierarchie in dieser Prioritätsreihenfolge auf, um das Auge zu lenken: Größe > Kontrast > Farbe > Position. Das größte, kontrastreichste Element erhält zuerst Aufmerksamkeit. Etabliere genau einen primären Brennpunkt pro Frame; sekundäre Elemente unterstützen, konkurrieren nie.
3. Negativen Raum als Rhythmus nutzen
Fülle den Frame nicht aus. Großzügiger negativer Raum um den Brennpunkt lässt ihn hochwertig und selbstbewusst wirken und gibt der Bewegung Raum zum Atmen. Leerraum ist ein aktives Kompositionselement, kein Rest.
4. Die Szene schichten (HG / MG / VG) für Tiefe und Parallaxe
Teile die Komposition in Tiefenebenen auf: Hintergrund (am langsamsten, geringster Kontrast, oft entsättigt/unscharf), Mittelgrund (das Subjekt), Vordergrund (am schnellsten, kann beim Überqueren unscharf werden). Parallaxe = Verschieben von Ebenen mit unterschiedlichen Geschwindigkeiten, um Tiefe zu simulieren.
Diese Tiefenebenen SIND die drei Bewegungsebenen aus animation-principles, projiziert auf die Z-Achse – die Rolle jeder Ebene bestimmt ihre Geschwindigkeit, ihren Kontrast und wie viel Bewegung sie erhält:
| Tiefe | Bewegungsebene | Parallax-Geschwindigkeit | Kontrast / Fokus | Was hier lebt |
|---|---|---|---|---|
| Hintergrund | Ambient | 0,1–0,3x | niedrig, oft entsättigt/unscharf | Himmel, Farbverlauf, Textur, Kulisse |
| Mittelgrund | Sekundär | 0,5–0,7x | mittel; unterstützt das Subjekt | Umgebung des Subjekts, unterstützende Elemente |
| Vordergrund | Primär | 1,0–1,5x | scharf auf Subjekt; VG-Objekte verschwimmen beim Überqueren | das Helden-Subjekt + nächste Requisiten |
Der Vordergrund kann 1,0 überschreiten, um sehr nah zu wirken. Die primäre Bewegung ist die, der das Auge folgt; gib niemals zwei Ebenen konkurrierende Primärbewegungen.
5. Kamerasprache (funktioniert in 2D und 3D)
- Push / Pull – hinein- oder herauszoomen in das/aus dem Subjekt (Dolly). Schafft Intimität oder enthüllt Kontext. 800–2000 ms, Ease-In-Out.
- Schwenk / Neigung / Bewegung – den Frame über die Szene verschieben. Enthüllt Raum, folgt der Aktion.
- Follow – ein sich bewegendes Subjekt im Rahmen halten (oft leicht außermittig, der Bewegung voraus).
- Parallaxe – geschichtete Bewegung, die Tiefe verkauft.
Ein Schuss, eine Absicht. Nicht gleichzeitig Push + Schwenk + Drehen – kombinierte Bewegungen wirken chaotisch. Wähle die einzelne Bewegung, die dem Takt dient. Inline-Timing-Grundlagen: Kamerafahrten verwenden Ease-In-Out (cubic-bezier(0,65, 0, 0,35, 1)); niemals linear außer bei durchgehenden Schleifen; langsamer ist filmischer.
6. Ein-/Austrittsrichtung trägt Bedeutung
Bewegung, die der Leserichtung folgt (links nach rechts, oben nach unten in LTR-Sprachräumen), fühlt sich natürlich und flüssig an; sie umzukehren erzeugt Spannung oder signalisiert „zurück/rückgängig“. Stimme die Richtung auf die Absicht ab:
- Neue Inhalte kommen an -> von rechts / von unten eintreten.
- Verwerfen / Zurückgehen -> nach rechts oder unten austreten oder den Eintritt umkehren.
- Tiefer eintauchen -> vergrößern / hineinpushen.
Elemente sollten normalerweise durch die nächstgelegene Rahmenkante eintreten und austreten, mit einem leichten Überschwingen beim Eintritt (Ease-Out) und Beschleunigung beim Austritt (Ease-In).
7. Sicherheitsbereiche und Multi-Format-Anpassung
Halte alle kritischen Inhalte (Text, Logos, Gesichter, CTAs) innerhalb eines Titel-Sicherheitsrands, damit nichts abgeschnitten oder hinter der Plattform-UI versteckt wird.
| Format | Verwendung | Titel-Sicherheitsrand | Hinweise |
|---|---|---|---|
| 16:9 | YouTube, Web-Hero | ~5% alle Seiten | Broadcast-Titel-sicher historisch 10% |
| 9:16 | Reels, TikTok, Stories | oben ~12-14%, unten ~18-20%, Seiten ~6% | Plattform-UI frisst oben und unten |
| 1:1 | Feed-Beiträge | ~6-8% alle Seiten | symmetrisch |
| 4:5 | Feed (höher) | ~6% Seiten, ~8% oben/unten | maximiert Feed-Präsenzfläche |
Gestalte den Brennpunkt mittig genug, dass er alle Zuschnitte überlebt, und lasse dann sekundäre Elemente pro Format umfließen. Für 16:9 -> 9:16 horizontale Anordnungen vertikal neu stapeln, anstatt nur die Seiten abzuschneiden.
Ausgearbeitete Beispiele
GUT – Produkt-Hero, 16:9 → 9:16
Brief: App-Launch-Hero, Premium-Persönlichkeit, muss als Web-Hero und als Reel funktionieren.
- Raster: 1920×1080, Rand 100, Zwischenraum 24, 12 Spalten. Phone-Mockup spannt Spalten 7–11 (rechte Kraftspalte).
- Brennpunkt: Telefonbildschirm auf dem rechten Drittel-Schnittpunkt (1280, 360) – nicht zentriert. Ein Brennpunkt; die Überschrift (Spalten 1–5) ist sekundär, geringerer Kontrast.
- Tiefe (drei Bewegungsebenen): HG = weicher Farbverlauf, 0,2x, Ambient. MG = Telefon-Mockup, 0,6x, Sekundäre Bühne. VG = ein unscharfer UI-Chip, der vorbeizieht, 1,2x + 3 px Unschärfe, wirkt als primärer Tiefenhinweis.
- Kamera: einzelner Hinein-Push, Skalierung 1,0→1,10 über 1600 ms Ease-In-Out, Ursprung auf dem Telefonbildschirm – passt zu Premium (langsam, kein Überschwingen). Kein Schwenk hinzugefügt.
- 9:16-Anpassung: neustapeln – Überschrift über das Telefon verschieben, Telefon nach oben in die obere Mitte ziehen, um die unteren 19% CTA/Navigationszone freizuhalten, Schrift +20%. Der Brennpunkt überlebt den Zuschnitt, da er im mittleren Band begann.
Warum es funktioniert: ein Brennpunkt, Tiefenrollen zugewiesen, eine Kamerafahrt, sicherheitsbereichsbewusstes Umfließen statt blindem Zuschnitt.
ANTI-PATTERN – der „alles zentriert, alles bewegt sich“-Frame
- Telefon-Mockup tote Mitte, Überschrift zentriert darüber, Logo zentriert darunter → drei Elemente, die auf derselben Achse kämpfen, keine Hierarchie, kein Kraftpunkt.
- Alle drei Ebenen gleiten mit derselben 1,0x-Geschwindigkeit nach links → keine Parallaxe, keine Tiefe, wirkt wie „die gesamte Vorlage hat sich bewegt“ (verstößt gegen die 1/3-Regel / Entfernung: ein vollbreiter Schiebeschriftzug ohne dazwischenliegenden Keyframe).
- Kamera macht gleichzeitig Push + Schwenk + leichte Drehung → chaotisch, keine einzelne Absicht.
- 9:16 durch Zuschneiden der 16:9-Seiten erstellt → Überschrift und Logo abgeschnitten, Telefon zu tief hinter der Navigationsleiste.
Lösung: einen Brennpunkt-Kraftpunkt wählen, jeder Ebene eine Tiefenrolle + eindeutige Parallax-Geschwindigkeit zuweisen, eine Kamerafahrt, und für Hochformat neustapeln statt zuschneiden.
Häufige Fehler
| Symptom | Grund | Lösung |
|---|---|---|
| Frame wirkt flach / „die Vorlage hat sich bewegt“ | alle Ebenen bewegen sich mit einer Geschwindigkeit; keine Tiefenrollen | BG/MG/VG die Ambient/Sekundär/Primär-Rollen + 0,2/0,6/1,2x Parallaxe zuweisen |
| Auge weiß nicht, wohin es schauen soll | 2+ Elemente in gleicher Größe/Kontrast, alle zentriert | ein Brennpunkt auf einem Drittel-Kraftpunkt; ordnen nach Größe>Kontrast>Farbe>Position |
| Kamerafahrt wirkt chaotisch | Push + Schwenk + Drehung kombiniert | eine Bewegung pro Takt; wähle die, die der Absicht dient |
| Inhalte auf Telefonen abgeschnitten | für 16:9 entworfen, auf 9:16 zugeschnitten | vertikal neustapeln; kritische Inhalte in Titel-Sicherheitsrändern halten (oben 13% / unten 19% bei 9:16) |
| Eintritt wirkt wie „Folie“, nicht wie „Ereignis“ | Element legt >1/3 des Frames in einer ununterbrochenen Bewegung zurück | mit einem dazwischenliegenden Keyframe unterbrechen oder Bewegung mit Skalierung/Transparenz paaren (1/3-Regel, Entfernung) |
| Wirkt billig / eingeengt | Frame randlos gefüllt | negativen Raum um den Brennpunkt reservieren; es ist ein aktives Element |
| Bewegung kämpft gegen die Geschichte | Zahlen vor der Absicht gewählt | zuerst die Drei Säulen + Bewegungspersönlichkeit klären, dann die Bewegung nummerieren |
Liefergegenstand – ein Kompositionsplan
Ein guter Kompositionsplan wird an ein Implementierungs-Skill (gsap-web, remotion-video, after-effects) übergeben und enthält:
- Frame-Spezifikation: Format(e), Auflösung, fps, Raster (Spalten / Rand / Zwischenraum), Basiseinheit.
- Brennpunkt: Koordinaten (px oder %) auf einem Drittel-Schnittpunkt + die Hierarchie-Reihung jedes Elements.
- Ebenenkarte: jedes Element BG/MG/VG zugeordnet → Ambient/Sekundär/Primär, mit Parallax-Geschwindigkeit.
- Ein-/Austritt: pro Element – Kante, Richtung, Easing-Familie und ob die Bewegung 1/3 überschreitet (und wie sie unterbrochen wird).
- Kamerafahrt: die einzelne Bewegung, ihre Eigenschaft + von→zu-Werte, Dauer, Easing, Transformationsursprung.
- Sicherheitsbereiche: Titel-Sicherheitsränder pro Zielformat + der Neustapelungsplan für Hochformat.
- Querverweise: welche Bewegungspersönlichkeit und welche Säulenentscheidungen das Timing antreiben.
Bevor du fertig bist – Checkliste
- Genau ein primärer Brennpunkt, auf einem Drittel-Schnittpunkt (oder bewusste Symmetrie).
- Hierarchie geordnet (Größe > Kontrast > Farbe > Position); Sekundäre konkurrieren nicht.
- Negativer Raum um den Brennpunkt reserviert.
- Jedes Element einer Tiefenebene zugeordnet (HG/MG/VG = Ambient/Sekundär/Primär) mit einer Parallax-Geschwindigkeit.
- Eine Kamerafahrt, nicht gestapelt; geeased (nicht linear, außer bei einer Schleife); 800–2000 ms für Hero-Bewegungen.
- Eintritte/Austritte nutzen die nächste Kante, folgen der Leserichtung, Ease-Out beim Eintritt / Ease-In beim Austritt.
- Kein Element legt >1/3 des Frames ohne einen dazwischenliegenden Keyframe oder eine Skalierungs-/Transparenzänderung zurück.
- Kritische Inhalte innerhalb der Titel-Sicherheitsränder für jedes Zielformat; Vertikales wird neugestapelt, nicht zugeschnitten.
- Bewegungspersönlichkeit + Drei Säulen geklärt, bevor eine Zahl gewählt wurde.
Kurzreferenz
| Bedarf | Standard |
|---|---|
| Raster | 12 Spalten, 8px Basislinie, Vielfache von 8 Abstand |
| Brennpunktplatzierung | Drittel-Kraftpunkt, nicht tote Mitte |
| Hierarchiereihenfolge | Größe > Kontrast > Farbe > Position |
| Tiefenebenen | HG / MG / VG, Parallaxe 0,2x / 0,6x / 1,2x |
| Kamera | eine Bewegung nach der anderen, Ease-In-Out, 800-2000 ms |
| Eintritt / Austritt | Leserichtung folgen; Ease-Out beim Eintritt, Ease-In beim Austritt |
| 9:16 sicher | oben 12%, unten 18%, Seiten 6% |
Referenzdateien
references/camera-and-grids.md– Rastermathematik mit durchgerechneten Zahlen, vollständige Sicherheitsbereichs-Prozenttabellen pro Format, Parallax-Schichtungscode (CSS Scroll + JS Pointer + Three.js) und benannte Kamerafahrt-Rezepte (Hineinzoomen, Whip-Pan, Orbit, Dolly-Zoom) mit Keyframe-Werten.