Thumbnails und Titel
Marke hier einstellen
Bearbeite den :root-Block am Anfang der beiden Dateien scripts/layout-fullbleed.html und scripts/layout-panel.html:
| Einstellung | CSS-Variable | Standard |
|---|---|---|
| Akzentfarbe | --brand-accent (+ --brand-accent-rgb als r,g,b) | #4a90e2 |
| Helle Textfarbe | --brand-light | #f2f2f2 |
| Dunkle Tintenfarbe (Strich, Panel-Hintergrund) | --brand-ink | #0d131a |
| Anzeigeschrift (großer Text) | --font-display | 'Anton','Bebas Neue',Impact,sans-serif |
| Grundschrift (kleiner Text) | --font-body | 'Inter',sans-serif |
Die Anzeigeschrift muss lokal installiert sein, da das Rendering in headless Chrome von file:// ausgeführt wird. Anton und Bebas Neue sind kostenlos auf Google Fonts.
Setze außerdem deine Grading-LUT in scripts/frames.sh (LUT_DEFAULT) oder übergib LUT=/pfad/zu/datei.cube pro Durchlauf.
Stil-Standards (nach Geschmack änderbar)
- Lege niemals etwas über das Gesicht. Kein Verlaufs-Overlay über der Person. Entweder ein klar abgegrenztes Panel mit vollständig freiem Gesicht oder Vollfläche mit Text in leerem Raum.
- Bilder aus dem RAW-4K-Material ziehen, nicht aus einem Export. 1080p-Exporte wirken weich.
- Das Bild zuerst farbkorrigieren. Log-Material (S-Log3 usw.) ist unbearbeitet flach und grau. Brenne die LUT mit
lut3dein (sieheframes.sh). Überspringe die LUT, wenn die Kamera ein fertiges Profil liefert.
Regeln aus der Forschung
- Drei bis fünf Wörter, weniger ist besser. Das Thumbnail erklärt das Video nicht.
- Ein Gesicht gewinnt. Die meisten Durchbruchsvideos verwenden eines. Starker Ausdruck schlägt neutralen.
- Ein dominantes Motiv, zwei oder drei Farben, hoher Kontrast.
- Beurteile bei etwa 210px. Die meisten Entscheidungen werden auf dem Handy getroffen. Wenn es dort nicht funktioniert, ist alles andere egal.
- Titel und Thumbnail sollten sich nicht wiederholen. Zwei Hälften einer Idee. Titel kurz und spezifisch halten (etwa 50-60 Zeichen, damit sie nicht abgeschnitten werden).
- A/B-Tests in YouTube Studio sind besser als Diskutieren – gib dem Nutzer 2-3 echte Optionen.
Welches Layout
Vollfläche gewinnt auf dem Handy und ist der Standard. Seite an Seite bei 210px erscheint das Gesicht etwa doppelt so groß wie in der Panel-Version, und die Unterzeilen im Panel verschwinden ganz.
layout-fullbleed.html: Farbkorrigiertes Bild randlos, 1-3 Wörter in der Anzeigeschrift mit dickem Tintenstrich, platziert in leerem Raum (Wand, Tür) und niemals über dem Gesicht. Presets:stab,stat,bottom,band(ein durchgehender Akzentstreifen unten). Legacy-Beispielvariantene,f,g,h.layout-panel.html: Motiv in einem sauberen rechteckigen Panel auf der rechten Seite, Text auf einer dunklen linken Hälfte. Verwenden, wenn die Idee ein Diagramm (das Punktraster) oder zwei Textzeilen benötigt. Beispielvariantena-d.
Ausführung
# 1. Farbkorrigierte Bilder aus dem Rohmaterial, zu ausdrucksstarken Momenten (Transkript verwenden, um sie zu finden)
bash <skill>/scripts/frames.sh "<DEINE_DATEIEN>/<ordner>/C0001.MP4" "<arbeit>" 178 310 459 503
# 2. Bilder vor Auswahl ansehen – ein Kontaktabzug ist besser als Raten
ffmpeg -i hi-*.jpg -filter_complex hstack=... contact.jpg
# 3. Varianten rendern + Handy-Proofsheet
WORK=<arbeit> OUT=<ausgabe> node <skill>/scripts/render.mjs variants.json
variants.json:
[{"id":"E-no-time","layout":"fullbleed","v":"e","img":"full-C0001-503.jpg"},
{"id":"S-custom","layout":"fullbleed","img":"full-C0001-310.jpg",
"data":{"preset":"stab","head":"ZU BESCHÄFTIGT?","kicker":"PROBIER DAS"}},
{"id":"B-3x","layout":"panel","v":"b","img":"cut-C0001-97.jpg"}]
Vollflächentext kann pro Variante als data übergeben werden (preset, head, kicker, side, size) oder als neuer Legacy-v-Block im Layout-HTML hinzugefügt werden. Paneltext lebt in den v-Blöcken von layout-panel.html: füge eine neue Variante hinzu, indem du einen Block hinzufügst und ihn auf 3 Wörter beschränkst.
Erfordert puppeteer-core: Wiederverwende ../video-overlays/scripts/node_modules oder führe npm i im Skriptverzeichnis aus. render.mjs startet /Applications/Google Chrome.app/...; ändere den Pfad auf anderen Systemen.
Bildauswahl
Suche nach hochgezogenen Augenbrauen, einer offenen Hand, einem Mund in der Mitte eines Wortes. Verwende das Transkript, um einen Moment mit Energie zu finden, dann ziehe ein Bild eine Sekunde später. Leere Augen töten das Thumbnail. Die Zuschnitte in frames.sh gehen von einer 4K-Quelle (3840x2160) aus, bei der das Motiv etwa 46 % der Bildbreite einnimmt; passe die crop=-Offsets an, wenn dein Bildausschnitt abweicht.
Ausgabe
Render in 1920x1080 (YouTube downsampled sauber), unter 2 MB halten.
Verwandtes
paper-edit,video-overlays: der Rest der Videopipeline