Miniatures et titres
Définissez votre marque ici
Modifiez le bloc :root en haut des fichiers scripts/layout-fullbleed.html et scripts/layout-panel.html :
| réglage | variable CSS | défaut |
|---|---|---|
| couleur d'accent | --brand-accent (+ --brand-accent-rgb sous forme r,g,b) | #4a90e2 |
| couleur de texte clair | --brand-light | #f2f2f2 |
| couleur d'encre foncée (trait, fond du panneau) | --brand-ink | #0d131a |
| police d'affichage (grand texte) | --font-display | 'Anton','Bebas Neue',Impact,sans-serif |
| police de corps (petit texte) | --font-body | 'Inter',sans-serif |
La police d'affichage doit être installée localement, car le rendu s'exécute dans un Chrome headless à partir de file://. Anton et Bebas Neue sont gratuites sur Google Fonts.
Définissez également votre LUT d'étalonnage dans scripts/frames.sh (LUT_DEFAULT), ou passez LUT=/chemin/vers/cube.cube par exécution.
Valeurs par défaut du style (à modifier selon vos goûts)
- Ne jamais rien mettre sur le visage. Pas de dégradé ni de voile sur le sujet. Soit un panneau à bord dur avec le visage entièrement dégagé, soit un fond perdu avec le texte dans un espace vide.
- Extraire les images de la RAW 4K, pas d'une exportation. Les exportations en 1080p donnent des images molles.
- Étalonner l'image d'abord. Les rushes Log (S-Log3, etc.) sont plats et gris non étalonnés. Intégrez la LUT avec
lut3d(voirframes.sh). Ignorez la LUT si la caméra enregistre un profil final.
Règles issues de la recherche
- Trois à cinq mots, et moins c'est mieux. La miniature n'est pas là pour expliquer la vidéo.
- Un visage gagne. La plupart des vidéos qui percent en utilisent un. Une expression forte bat une expression neutre.
- Un sujet dominant, deux ou trois couleurs, contraste élevé.
- Jugez-la à ~210px. La plupart des décisions de visualisation sont prises sur un téléphone. Si ça ne marche pas là, rien d'autre ne compte.
- Le titre et la miniature ne doivent pas se répéter. Deux moitiés d'une même idée. Gardez les titres courts et spécifiques (environ 50-60 caractères pour qu'ils ne soient pas tronqués).
- Les tests A/B dans YouTube Studio valent mieux que des disputes, alors donnez à l'utilisateur 2-3 vraies options.
Quelle mise en page
Le fond perdu gagne sur téléphone et est la mise en page par défaut. Côte à côte à 210px, le visage est environ deux fois plus grand que dans la version panneau, et les sous-lignes du panneau disparaissent complètement.
layout-fullbleed.html: image étalonnée bord à bord, 1-3 mots dans la police d'affichage avec un trait d'encre épais, placés dans un espace vide (mur, porte) et jamais sur le visage. Préréglagesstab,stat,bottom,band(une bande d'accent pleine en bas). Exemples de variantes héritéese,f,g,h.layout-panel.html: sujet dans un panneau carré propre à droite, texte sur une moitié gauche sombre. À utiliser lorsque l'idée nécessite un schéma (le quadrillage de points) ou deux lignes de texte. Exemples de variantesa-d.
Exécutez-le
# 1. images étalonnées à partir de la source brute, aux moments expressifs (utilisez la transcription pour les trouver)
bash <skill>/scripts/frames.sh "<VOTRE_DISQUE_RUSHES>/<dossier>/C0001.MP4" "<work>" 178 310 459 503
# 2. regardez-les avant de choisir - une planche contact vaut mieux que deviner
ffmpeg -i hi-*.jpg -filter_complex hstack=... contact.jpg
# 3. rendu des variantes + la planche de vérification taille téléphone
WORK=<work> OUT=<out> 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":"TROP OCCUPÉ ?","kicker":"ESSAYEZ CECI"}},
{"id":"B-3x","layout":"panel","v":"b","img":"cut-C0001-97.jpg"}]
Le texte en fond perdu peut être passé par variante en tant que data (preset, head, kicker, side, size), ou ajouté comme nouveau bloc v hérité dans le HTML de la mise en page. Le texte du panneau se trouve dans les blocs v de layout-panel.html ; ajoutez une nouvelle variante en ajoutant un bloc, en vous limitant à 3 mots.
Nécessite puppeteer-core : réutilisez ../video-overlays/scripts/node_modules ou npm i dans le répertoire des scripts. render.mjs lance /Applications/Google Chrome.app/... ; changez le chemin sur d'autres systèmes.
Choisir l'image
Cherchez des sourcils levés, une main ouverte, une bouche en pleine parole. Utilisez la transcription pour trouver un moment d'énergie, puis extrayez une image une seconde plus tard. Les yeux morts tuent l'image. Les recadrages dans frames.sh supposent une source 4K (3840x2160) avec le sujet à environ 46 % de la largeur de l'image ; ajustez les décalages crop= si votre cadrage diffère.
Résultat
Rendu en 1920x1080 (YouTube sous-échantillonne proprement), gardez-le sous 2 Mo.
Liés
paper-edit,video-overlays: le reste du pipeline vidéo