Je continue de retracer l’évolution de mes outils de stream avec ce second article sur mes overlays1 et layouts2 de ces dernières années !
partie 1 : [720p PERIOD] >> partie 2
NEW~
Réalisé à la base en 720p, j’ai ensuite quelques temps plus tard passé tous les assets de NEWon en 1080p, résolution que j’ai conservée pour mes streams à partir de là, pour profiter du retour de la fibre avec mon nouveau logement. Si j’ai tout tenté pour alléger les ressources demandées par OBS avec ce layout, un des inconvénients de celui-ci est d’avoir trois designs de chat différent, donc trois source (le CSS étant dans la source browser), pas des plus optimisés donc, à moins de mettre l’option que le chat se reset à chaque changement de scène. Bref, vous l’aurez compris ce layout est devenu à son tour une machine infernale, à tel point que je n’ai plus réussi à l’utiliser pendant un an, jusqu’à ce que je sois contraint de changer de PC, et puisse le réintégrer, haha !
À nouveau dans le besoin d’un nouvel habillage de stream léger en 2022, pour NEWray je reprends ainsi à partir de sources existantes l’idée de l’overlay avec un cadre webcam seul, que je crée dans l’esprit de mon style à base de bandes et dégradés.
LITE~
Mais comme j’avais tout de même envie d’un habillage plus élaboré tout en restant versatile, LITEror a donc fait son apparition, en évitant de repartir dans la complexification ; il y a bien quelques éléments animés pour le style (et le waveform fait ici partie du background), mais rien qui tourne dans le vent en tâche de fond !
J’ai réutilisé des illustrations faites lors des défis Inktober comme simple image d’intro / pause, qui se place devant la scène de discussion en glissant, pas besoin d’en faire une scène différente. La webcam à droite et le chat à gauche, le logo habituel, et seules fioritures tardives le titre de la musique en cours, le “découpable” Kubo Magazine (retravaillé) et la barre d’objectif Twitch du moment. Une nouvelle police de caractère principale est aussi de la partie !
Pour le contenu, la webcam a un contour simple et peut être déplacée comme un overlay, mais un habillage de type layout peut se faire pour du 4:3 par exemple, en affichant un fond ; une variante pour le speedrun de Yoshi’s Island existe par exemple depuis un Muxiversaire dont j’ai repris le visuel ! La plupart des assets sont repris d’avant, comme quoi il suffit parfois juste de nouvelles idées ^^
Et des idées apparemment, j’en ai eu, dont celle de faire un layout d’un format “cinémascope”, LITEnse, avec des bandes noires. L’avantage étant d’avoir le contenu en entier sans rien qui passe devant, avec tout le reste à côté, et styliser des infos sur le bas de l’écran comme si c’était des sous-titres de film. L’écran de talk / attente est sur le même principe avec une partie pour le chat et une pour une illustration ou la webcam. Je ne l’ai pas beaucoup utilisé, pensant à la base m’en servir pour des streams de codage où j’aurais mis deux fenêtres côte à côte, que je n’ai finalement jamais encore fait.
Tout ça nous amène à LITEkh, overlayout multitâches que j’ai utilisé le plus entre mi-2022 et début 2025, notamment pour dessiner ! L’idée initiale était d’avoir une scène de discussion avec la webcam en plein écran et un overlay à webcam flottante simple. De nombreux éléments, et même dispositions, sont encore repris des designs précédents, et les nouvelles features n’ont cessé de s’ajouter. Une bande d’info sur le stream est placée en haut si besoin, et un cadre partiel semi-transparent autour de la webcam. Seuls les contenus 4:3 ne sont pas très intéressants ici, c’est pourquoi j’ai continué à utiliser les autres !
L’écran d’attente est basé sur celui de discussion (à moins que ce ne soit l’inverse ?) et cette fois scindé en trois scènes dont une de pause. On y trouve un décompte, des waveforms son / voix, l’inamovible encart Kubo Magazine, mais le design a pris tout son sens avec l’arrivée du projet Distortion (avec Weekl’iNK), puisque j’y affichais mes illustrations grand format réalisée dans ce cadre ! Elles ont toutes été insérées au fur et à mesure, avec des variantes “fresques” défilantes et une légère transparence pour deviner la webcam derrière et casser l’aspect statique. Sur l’écran de contenu, toujours pour les stream Distortion, une bande disparaissant progressivement (avec les masques) se place sur la droite, avec différents dessins de mon projet.
Au fil du temps ont été ajouté des filtres sur la webcam pour isoler certaines couleurs et rompre avec le niveau de gris en vigueur depuis 2020. D’abord sur le rouge, pour donner un effet couleur sur ma cam (assez basique) sans être moche, puis souvent sur le bleu parce que j’avais envie de revenir sur une dominante noire et blanche tout en gardant une petite touche colorée. J’ai aussi pensé un système pour afficher en accéléré de précédents streams lors des pauses, même si je l’ai peu utilisé comme je les stocke sur un disque externe.
Autre truc peu utilisé, une scène plus orienté “création” ou “web”, sous forme de cases (le but était de faire du code sur une fenêtre et avoir un encart navigateur avec le résultat, et me voir taper au clavier). J’avoue qu’elle aurait pu servir plus et qu’elle aurait été pratique parfois pour des choses variées, mais j’avoue surtout l’avoir souvent oubliée, haha !
C’est aussi à cette période que j’ai commencé à m’intéresser aux pistes son, et ne plus diffuser seulement la sortie “desktop”, pour enfin dissocier ce qu’on entend en live de ce qu’on entend sur le replay, et éviter les inconvénients du DMCA et ses VOD mute par endroits, en mettant des piou-pious sur les rediffusions…
De retour dans mes idées farfelues, en 2024 j’ai ressorti le principe de format extra-large, mais cette fois ci en allant plus loin que l’aspect esthétique, puisque LITEmo permet de streamer en résolution 1920×810 pixels. L’idée était d’un design assez brut, pour des streams informels, qui rompt plus avec les précédents. L’aspect du chat en noir et blanc avec une police à largeur fixe est ainsi totalement différent (et sera repris pour certains layout suivants), et les scènes ne font que disposer les sources visuelles (webcams, jeux, etc) côte à côte sans artifices. Vous voyez donc des bandes noires en plein écran avec ce format, mais elle n’existent pas sur la vidéo !
Est ensuite arrivée un test pour utiliser le système de scènes imbriquées, auquel j’ai été introduit en revoyant ma manière de gérer le son des streams. En effet, chaque source avec du son “utile” ayant un équivalent audio grâce à Application Audio Capture, on peut choisir ce qui est audible en mettant ces sources audio dans une scène à part, que l’on appelle dans chaque autre scène. Pourquoi donc ne pas utiliser ce système… pour tout ?
J’ai donc à partir de là revu de manière relativement superficielle toute l’organisation de mes différents designs, pour avoir d’un côté les scènes principales, avec les éléments “dynamiques” bien visibles qui sont switchable en stream, et de l’autre tout ce qui est statique (alertes, décoration, etc, dont tout une imbrication pour appliquer les filtres aux webcams), à part, bien aidé par le plugin Scene Tree ; cela me permet ainsi de basculer plus facilement d’assets dessin à ceux pour le JV. On peut penser tout cela de multiples manières pour un résultat identique, selon ses préférences et ses méthodes, un peu comme le CSS, et donc LITEar, fut le premier layout qui a été directement pensé avec ce système en tête.
Pour ce design je voulais renouer avec “l’entremêlement de rectangles” à la NEW~ tout en utilisant les assets plus récents. D’un clic je peux afficher tout ce qui est promotion de mon site et cie, inverser la position des webcams (colonne ou contenu), et j’ai organisé toutes les scènes imbriquées pour séparer le visuel du fonctionnel.
NEO~
Avec ce nouveau système de scènes qui en appellent d’autres, plein de nouvelles idées et d’optimisation me sont venues ; j’ai par exemple totalement isolé les webcams pour réutiliser partout les scènes “caméra” et appliquer (ou non) facilement les filtres voulus, sans avoir à changer et rechanger les paramètres lorsque j’utilise différents thèmes.
Partant du principe de faire un thème utilisant d’une manière plus poussée les imbrications de scène (avec plusieurs niveaux) en composant différents “blocs” que j’appelle selon les besoins, pour NEOjin, j’ai voulu faire un overlayout spécialement pour le dessin, avec des sources media en plein écran, et un système de fenêtre glissantes (sur le même principe que l’écran d’opening de NEWon). On retrouve ainsi un volet zoomé, la facecam, la camera horizontalement inversée (pour déceler des défauts d’équilibre de mes illustration) ou encore pour afficher un navigateur web. Et en plein écran, un encart caméra aux bord arrondis, sans oublier la bande noire qui s’atténue sur le côté en guise de touche décoration.
J’ai également réalisé une scène pour des streams en duo, qui a bifurqué sur une séparation alternative des caméras avec une transition progressive au lieu d’une ligne. L’écran d’intro repart pour une fois de zéro, Je suis aussi allé beaucoup plus loin dans l’imbrication de scènes, avec plusieurs niveaux et un découpage des sources plus important. C’est un peu plus de réflexion pour organiser tout ça, mais ensuite l’habillage est bien plus clair à utiliser en stream. De nouveaux pop-ups de promo pour mes sites et réseaux font aussi leur apparition, avec une sorte d’onglet incluant une capture d’écran et une phrase.
Enfin, avec NEOke, que j’ai voulu le plus simple à utiliser possible, c’est un peu la version gaming du précédent. J’ai étendu le thème des bords arrondis de la webcam un peu partout, par exemple avec l’agrandissement de la caméra pour les discussions, ou bien sur les écrans d’ouverture et de pause via le cadre noir. Sur ces derniers ainsi que sur le fond du mode “talk”, j’ai introduit en semi-transparence le motif de lignes courbes entremêlées que j’utilise depuis des années sur mes sites, la boucle est bouclée !
Stop les idées. Go streamer !
Voilà je pense vous avoir montré à peu près tout l’historique de la période “old school” et du “golden age” de mes streams… Voulant changer l’orientation de mes lives, aspirant à la simplicité et l’immédiateté les plus totales, il est temps désormais d’aller vers une “new era” de streaming décroissant, et repartir vraiment de zéro dans les mois à venir ! En gardant quand même tout ce que vous venez de voir au chaud…
Et pour voir plus loin, une fois les connaissances acquises, j’aimerais me pencher en particulier sur les éléments dynamiques (CSS, JavaScript, etc), en m’appuyant moins sur les fonctionnalités internes de base d’OBS Studio (qui permettent cela dit énormément, comme on a pu le voir). Mais cela est une autre histoire !
