Créer un overlay de stream : tailles et erreurs

En bref : un overlay est la couche graphique qui se place par-dessus ton jeu et ta caméra dans OBS : cadre de webcam, scènes de démarrage et de pause, éléments du chat et alertes. Il se dessine à la taille du canevas de base d’OBS (le plus courant est 1920x1080) et s’organise en scènes avec des pièces séparées. Ce guide t’explique ce que comprend un bon overlay, comment le monter dans OBS sans qu’il se déforme et les erreurs qu’on voit le plus.

C’est quoi un overlay et à quoi ça sert

Quand quelqu’un arrive sur ton live, la première chose qu’il voit, c’est ta scène : le jeu, ta caméra et tout ce qui les entoure. L’overlay, c’est ce « cadre » visuel. Il remplit trois fonctions :

• Identité : qu’on reconnaisse que c’est ta chaîne rien qu’en voyant une image.
• Ordre : il rend clair où est la caméra, où va le jeu et où apparaissent les alertes.
• Contexte : il peut afficher le dernier follower, un compteur ou un message « je reviens dans un instant ».

Un overlay, ce n’est pas la même chose que les alertes : l’overlay est le design fixe de tes scènes, et les alertes sont des notifications déclenchées par des événements. On voit les alertes dans le guide des alertes.

Ce que comprend un overlay complet

Un pack d’overlay se construit en général comme une famille de scènes au même style :

Pièce	À quoi elle sert
Scène de démarrage (« starting soon »)	L’écran pendant que tu attends que les gens arrivent
Scène de jeu	Cadre pour la webcam, bordures et zone libre pour le jeu
Scène discussion seule	Grande caméra pour Just Chatting ou la conversation
Scène de pause (« BRB »)	Annonce que tu reviens tout de suite
Scène de fin	Au revoir, réseaux et prochain live
Cadre de webcam et détails	Cadre qui entoure ta caméra avec ta palette
Éléments de chat et d’événements	Boîte de chat, liste d’événements ou étiquettes avec le dernier follower

Selon le guide des alertes d’OBS, les éléments dynamiques les plus courants sont les alertes, la liste d’événements, la boîte de chat, les étiquettes avec des infos isolées (dernier follower, dernier abonné) et le « bocal » qui se remplit d’icônes d’événements.

À quelle taille le dessiner

Il n’existe pas de taille d’overlay imposée par les plateformes : ce qui compte, c’est le canevas de base d’OBS. Selon le guide général d’OBS, le canevas est l’espace où tu places tes sources et il correspond en général à la résolution de ton écran ou de ton jeu. La règle est donc simple :

1. Dessine chaque scène à la même taille que ton canevas de base. Si ton canevas fait 1920x1080, dessine en 1920x1080.
2. Garde le canevas fixe. Le changer ensuite t’oblige à replacer toutes les sources. Si tu as besoin de streamer dans une résolution plus basse, baisse seulement la résolution de sortie, pas le canevas.
3. Souviens-toi du plafond de ta plateforme. Kick accepte jusqu’à 1920x1080 et 60 fps, et les recommandations de Twitch vont jusqu’à 1080p60. Un overlay 4K ne te sert à rien si tu streames en 1080p.

Si l’overlay est une page web (source Navigateur)

Beaucoup d’overlays animés et toutes les alertes fonctionnent avec une source de type Navigateur (Browser Source). Selon la documentation officielle d’OBS :

• La taille par défaut est 800x600, donc il faut l’ajuster à la main à la taille de ton overlay (par exemple 1920x1080).
• Le CSS par défaut rend le fond transparent et supprime les marges et les barres de défilement.
• Tu peux activer « Éteindre la source quand elle n’est pas visible » (Shutdown source when not visible) pour que la page se décharge quand elle n’est pas à l’écran, et « Actualiser le navigateur quand la scène devient active » pour qu’elle redémarre à chaque changement de scène.

Images et transparence

Pour les pièces statiques (cadres, bordures, textes), utilise une image à fond transparent qui occupe tout le canevas. Ainsi, une fois placée comme source image, elle couvre toute la scène, et ce qui est « vide » laisse voir le jeu ou la caméra en dessous.

Les tailles de ta chaîne comptent aussi

L’overlay vit dans le live, mais ta chaîne a des éléments visuels en dehors d’OBS. Sur Twitch, par exemple, l’aide officielle sur la configuration de la chaîne indique :

• Bannière de profil recommandée : 1200x480 px ; concentre le visuel à gauche, car la page se met à l’échelle selon la fenêtre de chacun.
• Panneaux d’information : images de 320 px de large au maximum (et 300 px de haut), de moins de 2,9 Mo.
• Photo de profil : JPEG, PNG ou GIF jusqu’à 10 Mo.

Si tu utilises les mêmes couleurs, la même typographie et le même logo dans l’overlay, les panneaux et la bannière, ta chaîne ressemble à une seule marque. On parle de la façon d’y arriver dans le guide du branding.

Le monter dans OBS, pas à pas

1. Fixe ton canevas de base dans Paramètres > Vidéo (par exemple 1920x1080).
2. Crée une scène par situation : démarrage, jeu, discussion, pause et fin.
3. Ajoute d’abord les sources de fond (jeu, caméra) et, par-dessus, l’image de l’overlay avec transparence.
4. Étire le cadre de la webcam à la taille de l’encadré de l’overlay ; rogne avec le filtre Rogner/Remplir (Crop/Pad) si besoin.
5. Ajoute tes sources navigateur (alertes, chat, étiquettes) tout en haut pour qu’aucune image ne les cache.
6. Fais un court test de stream ou d’enregistrement et vérifie que rien ne cache d’éléments du jeu.

Pour la configuration complète d’OBS, CBR et bitrate compris, tu as le guide d’OBS.

Erreurs courantes

• Cacher l’interface du jeu. Regarde dans ton jeu où sont la mini-carte, la vie et les textes importants avant de dessiner de grandes bordures.
• Une webcam minuscule ou des encadrés qui ne tombent pas juste. Si le cadre ne correspond pas à ta caméra, ça fait brouillon. Mesure l’encadré et ajuste la caméra dessus.
• Trop d’éléments en même temps. Chaque compteur et chaque boîte en plus salit l’image et fait perdre le focus sur toi et sur le jeu.
• Un texte trop petit. Sur mobile, une lettre de 12 px est illisible. Utilise peu de mots et de grandes tailles.
• Des alertes en double. Si tu copies la source d’alertes dans plusieurs scènes et que tu en laisses une autre dans l’overlay, l’alerte sonne deux fois. N’en garde qu’une.
• Mélanger les styles. Un cadre néon avec des panneaux minimalistes et des emotes dans un autre style donne l’impression d’une chaîne improvisée.

Des overlays faits pour ta chaîne

Chez Epik, tu peux commander un overlay à la carte à 20 $US l’unité. Le pack Boost comprend un logo, 3 overlays, 3 panneaux et 1 bannière (pour une seule plateforme), et le pack Epik ajoute des overlays, des frames, des panneaux, des bannières, des emotes, des badges d’abonné, des alertes, le TTS et la configuration d’OBS multiplateforme. Le tout se paie en une fois via PayPal et on démarre avec ton brief.