Ce qui est bien avec OBS Studio, c’est que c’est un outil vraiment personnalisable. Que ce soit avec des plugins pour le côté fonctionnel, ou avec un thème personnalisé pour son look. Je vous avais déjà montré comment récupérer des thèmes sympas pour OBS, aujourd’hui on va faire mieux que ça, on va carrément créer notre propre thème OBS, et il sera aux couleurs du ZEvent.

ZEvent, c’est quoi ?

Pour ceux qui ne connaissent pas le ZEvent, c’est très simple, c’est un événement caritatif créé par ZeratoR et Dach, et organisé depuis quelques années maintenant. Le principe est simple, plusieurs streamers se réunissent et vont streamer sur plusieurs jours en essayant de récolter un maximum de dons pour une association, ou plusieurs en l’occurrence cette année. Et si vous voulez participer, vous pouvez faire un don durant l’événement qui aura lieu du 8 au 11 septembre 2022.

Créer un thème custom

En ce qui me concerne, je me suis dit qu’il était temps que je contribue, à mon humble niveau, au ZEvent, et j’ai donc décidé de réaliser un thème custom pour OBS Studio, aux couleurs du ZEvent. Et du coup ça pourra servir à tout le monde puisque je vais vous montrer comment réaliser un thème personnalisé pour OBS. Là pour l’exemple je vais m’inspirer des couleurs du ZEvent, mais vous pouvez parfaitement vous servir de cette vidéo pour réaliser votre propre thème, le principe sera exactement le même. Et une fois que je vous aurai montré tout ça, je vous montrerai évidemment comment installer ce nouveau thème, on verra ça en fin de vidéo.

Donc pour réaliser un thème custom pour OBS, il faut deux éléments principaux :

  • un fichier QSS
  • des images

Le fichier QSS c’est la feuille de style, comme pour un site internet et le fameux CSS pour ceux qui connaissent, on va y définir les couleurs, le style du texte, appeler les images, etc. Et les images, eh bien ce sont tout simplement les icônes qui seront affichées dans OBS, comme par exemple la corbeille, la roue crantée, le symbole « + »… Donc à partir de là, il faudra simplement modifier le style, donc le fichier QSS, et les images, et ça pour le coup ça se fait avec n’importe quel logiciel, ça peut même se faire via un site en ligne comme Photopea.

Choix des couleurs

Donc en ce qui me concerne, j’ai fait ça simplement, je suis parti des couleurs du ZEvent, et plus particulièrement des couleurs du logo. Donc je suis allé chercher ce logo et je l’ai ouvert avec mon acolyte de toujours, ce bon vieux PaintNET, ce qui me permet, grâce à l’outil pipette, d’avoir la couleur verte au format décimal, à savoir la teneur en rouge, en vert et en bleu, avec pour chaque couleur une valeur allant de 0 à 255.

logo zevent couleur verte

Petite parenthèse, on peut aussi utiliser le format hexadécimal quand on modifie le fichier QSS, ça fonctionne, si je suis resté sur le format RGB décimal, c’est tout simplement pour voir à quoi correspondaient les couleurs sur les thèmes inclus dans OBS. Car il a bien fallu prendre un point de départ, donc je suis parti du thème par défaut de la version 28 d’OBS, qui est le thème Yami, et j’ai ensuite regardé où je pouvais modifier les couleurs.

Bref, j’ai le vert du logo ZEvent, j’ai ensuite utilisé un site en ligne pour créer une palette de couleurs, enfin surtout pour avoir des couleurs un peu complémentaires, et j’ai trouvé un bleu et un orange qui me convenaient, donc j’ai noté les codes hexadécimaux, je les ai entrés sur PaintNET et j’ai obtenu la correspondance au format décimal. Il y a sans doute d’autres façons de faire, on peut plus simplement choisir une couleur sur la palette directement sur PaintNET, mais bon… Donc là il me manque plusieurs couleurs, notamment les couleurs foncées, et là pour le coup j’ai récupéré la couleur de fond du site internet du ZEvent, qui est très légèrement teinté de vert et qui me convient. J’ai noté le code hexadécimal via l’inspecteur de Firefox, je l’ai entré dans PaintNET et j’ai eu la correspondance au format décimal.

À partir de là, j’ai commencé à modifier un petit peu les curseurs pour obtenir des variantes plus ou moins claires de mon vert sombre, et j’ai placé ces couleurs pour obtenir un résultat qui me semblait intéressant. Ça a pris quelques essais mais je suis arrivé à quelque chose de potable en essayant donc de rester sur un thème sombre, quelque chose de relativement discret et qui fait quand même penser au ZEvent et à sa thématique.

Fichier QSS

Donc encore une fois, il y a sans doute d’autres façons de faire, mais maintenant que j’ai mon style global, il va falloir que je l’applique via un fichier QSS. Déjà il me faut un fichier QSS, donc direction le répertoire par défaut des thèmes d’OBS, que vous trouverez à cet endroit :

C:\Program Files\obs-studio\data\obs-studio\themes

Là je vois plusieurs thèmes avec plusieurs fichiers et dossiers, j’ai choisi de partir du thème Yami pour obtenir un résultat similaire, donc j’ai simplement copié/collé le fichier « Yami.qss » que j’ai ensuite renommé en « ZEvent.qss ». J’en ai profité pour faire de même avec le dossier « Yami », renommé là aussi en « ZEvent », on y reviendra.

Ensuite j’ai pu ouvrir le fichier QSS avec Notepad++ (qui est une version évoluée du Bloc-Notes de Windows) et, une fois ouvert, je vois tout le code qu’il faudra modifier pour changer l’apparence du thème. Alors ça peut paraître déroutant quand on n’a jamais vu de CSS ou de QSS, mais c’est en réalité relativement simple et vous allez comprendre avec un exemple tout bête. Je vois que la première couleur que je peux modifier, c’est celle de la ligne « window ». Si je ne sais pas à quoi ça correspond, je peux faire un test en changeant cette couleur par du rouge avec la valeur « rgb(255,0,0) », j’enregistre, je lance OBS, et dans le menu Général des paramètres, je vais sélectionner mon thème ZEvent et surprise, j’ai du rouge sur OBS, du coup je vois à peu près à quoi correspond la couleur !

Et là vous allez me dire « mais alors tu changes les couleurs une par une et tu regardes ce que ça fait ? ». En fait non, j’ai pris une capture d’écran d’OBS avec le thème Yami, je l’ai ouverte avec mon logiciel de dessin, et je suis allé chercher avec la pipette les couleurs que je voulais changer. Exemple : je veux remplacer le gris des boutons pour un gris vert. Je choisis la couleur grise avec ma pipette, je regarde la correspondance au format décimal, donc ici « rgb(60,64,75) », et je vais ensuite faire une recherche dans mon fichier QSS sur cette expression, et à chaque fois que je tombe sur cette couleur, je la remplace par mon gris vert, donc pour le coup « rgb(62,75,65) », je fais ça pour chaque itération, je sauvegarde mon fichier QSS et je retourne sur OBS. Si je change de thème et que je recharge le thème ZEvent, je peux voir que les changements sont appliqués, j’ai ma nouvelle couleur, je suis content.

Donc voilà en gros comment je procède pour modifier le fichier QSS. Alors oui, c’est un peu long, et je ne vais pas vérifier toutes les entrées si une couleur apparaît plusieurs fois dans le fichier, je fais confiance à la cohérence du thème Yami pour que ça s’accorde avec le reste. Méthode de semi-fainéant. Et donc si je répète l’opération avec les couleurs que j’ai retenues pour mon nouveau thème, j’obtiens un résultat équivalent à ce que j’avais fait avec PaintNET !

Modifications avancées

Alors il existe d’autres modifications que je peux faire et qui ne sont pas forcément intuitives avec le thème Yami. Vous avez bien remarqué que par défaut, le texte est blanc un peu partout, or moi je veux mettre les titres des docks avec le vert du logo ZEvent, alors comment je fais ? Eh bien j’ai tout simplement regardé dans le QSS et j’ai cherché l’expression « dock », du coup j’ai vu qu’il y avait une section « Dock Widget », je me suis dit que c’était forcément là-dedans. Bon, j’ai eu un peu de bol, mais en voyant l’attribut « font-weight: bold; » qui permet de mettre du texte en gras, je me suis dit que c’était peut-être là que je pouvais modifier la couleur du texte. Donc tout simplement, j’ai ajouté l’attribut « color : rgb(75,186,49); », et après avoir enregistré et rechargé le thème, j’ai pu voir le titre des docks en vert, nickel !

Une autre méthode consiste à charger un autre thème plus « coloré » et d’utiliser la méthode de la pipette. Exemple avec le thème Rachni, dans les paramètres, les titres des sections sont en rose, eh bien j’aimerais bien les mettre en vert ! Donc j’ai pris une capture d’écran, je l’ai ouverte avec PaintNET pour obtenir la couleur rose au format décimal. Ensuite j’ai ouvert le QSS du thème Rachni, j’ai cherché la couleur, et j’ai vu où il fallait faire les modifications. Du coup j’ai cherché ces mêmes lignes sur dans le fichier QSS de mon thème custom, et j’ai remplacé la couleur par mon vert. Je sauvegarde, je recharge le thème et bingo, j’ai le vert où je voulais.

Donc là aussi, ça prend un peu de temps, mais ce n’est pas bien compliqué en soi, il faut juste un peu de patience. J’en ai profité pour corriger la taille du texte d’avertissement dans l’onglet Enregistrement du menu Sortie, car sur chaque thème, je ne sais pas pourquoi mais le texte était coupé, donc j’ai trouvé l’entrée dans le fichier QSS, j’ai changé la couleur pour le orange que j’ai retenu au début, je réduis un peu la taille du texte, et après application des changements, voilà quelque chose de propre sur OBS et un texte non coupé.

Modifier les images

Et donc maintenant que je sais comment modifier l’aspect et les couleurs de mon thème, il me reste à revoir les images. Comme je vous le disais en intro, pour certains éléments, OBS fait appel à des images, ce sont toutes les icônes qu’on peut voir sur l’interface. Eh bien ces images, on peut les changer, par ce qu’on veut d’ailleurs. Si je veux mettre les boules de cristal dans les paramètres d’OBS, c’est possible ! Mais pour les besoins du thème aux couleurs du ZEvent, je suis resté dans la sobriété.

Donc j’ai pris les images du thème Yami, je les ai mises dans un logiciel qui accepte le format SVG et j’ai modifié les couleurs. Vous voyez que par exemple pour les checkbox, il en existe 6, trois actives et trois inactives, avec à chaque fois la box vide, la box cochée et la box quand la souris passe dessus. Eh bien j’ai simplement modifié les couleurs de chaque image et j’ai enregistré le tout au format PNG, car chez moi j’avais des soucis avec le format SVG.

Du coup, comme j’ai changé de format, il faut que je modifie également mon fichier QSS, parce que ce dernier va appeler les images au format SVG. Donc après une petite recherche, j’ai trouvé les lignes où étaient appelées mes checkbox, j’ai modifié le nom/chemin des fichiers, et c’est tout, après rechargement du thème, j’ai mes nouvelles images actives sur mon thème ! Notez qu’il existe beaucoup d’autres images, la plupart sont appelées via d’autres emplacements, notamment via le dossier Yami et surtout le dossier du thème Dark, qui comprend presque toutes les images par défaut.

Si jamais je veux changer une de ces images, le mieux c’est d’en créer une nouvelle, de la placer dans le dossier correspondant à mon thème, donc ici celui que j’avais copié/collé au début et qui correspond à mon thème ZEvent. Exemple avec l’icône de la source Capture de jeu, que j’ai remplacée par le petit alien de ZeratoR, pour le fun. Et je peux faire ça pour chaque image, jusqu’à ce que toutes les images du thème soient comme je le souhaite.

Résultat final

Et donc après plusieurs heures de modifications, c’est terminé, je vous propose donc de voir à quoi ressemble le thème ZEvent pour OBS Studio, et je passe ainsi du thème Yami par défaut à mon nouveau thème qui me permet de profiter des couleurs du ZEvent. L’aspect général est relativement simple hormis les couleurs qui tirent sur le vert évidemment, je n’ai pas voulu que ce soit surchargé de vert non plus, que ça reste lisible, donc j’ai laissé les textes en blanc la plupart du temps, à part pour quelques titres. Et je précise que ce thème est compatible avec la version 28 d’OBS, mais également avec la version précédente, pour ceux qui seraient restés dessus.

J’ai également glissé trois easter eggs dans ce thème, le premier vous l’aviez vu c’était le petit alien qui sert d’icône pour les sources Capture de jeu, une autre icône est visible dans les paramètres d’OBS, et enfin le dernier clin d’oeil c’est… un cactus. Mais je ne vous dirai pas où il est, il faudra le trouver. Et j’espère que vous ne le verrez pas, car en général au moment où on commence à voir un cactus, ce n’est pas bon signe.

Installer un thème custom

Et pour terminer, je vais vous montrer tout simplement comment installer ce thème personnalisé pour OBS. C’est facile, vous téléchargez le thème ZEvent pour OBS Studio, c’est une archive ZIP qu’il faudra donc ouvrir et vous pourrez extraire son contenu dans le répertoire par défaut des thèmes d’OBS, que vous trouverez ici :

C:\Program Files\obs-studio\data\obs-studio\themes

Une fois les éléments copiés, relancez OBS et dans le menu Général, vous devriez voir le nouveau thème aux couleurs du ZEvent. Activez-le, et let’s go voir la vie en vert !

Bon du coup, libre à vous d’essayer de faire votre propre thème personnalisé, vous avez vu comment j’avais procédé. Si la vidéo vous a plu, pensez à laisser un petit pouce bleu, vous pouvez aussi vous abonner à la chaîne et activer la cloche pour ne pas rater les prochaines sorties, cette chaîne traite de tout ce qui touche au streaming et vous y trouverez des tutos, des conseils, des astuces, des tests de matériel…

 

J’en profite pour vous rappeler que si vous avez des questions concernant le streaming, vous pouvez venir me les poser dès que je suis en live sur Twitch, la porte est toujours ouverte, et pour les questions plus techniques, je vous invite à rejoindre le Discord communautaire Zero Absolu Gaming, lisez bien les règles pour débloquer les salons d’aide et on vous répondra au plus vite, tous les liens sont dans la description juste en dessous ! Sur ce, c’est la fin de cette vidéo, on se retrouve très vite pour la prochaine et d’ici-là… bon stream !