Comment créer un overlay pour Twitch ?

Vous êtes en streaming sur Twitch ? Vous avez toujours voulu créer votre propre overlay en direct sur Twitch à partir de zéro ? Twitch-overlay.fr vous propose son guide : Comment créer un overlay pour Twitch ? Dans ce tutoriel, nous allons aborder les bases de la création d’un overlay de streaming, pour votre live-stream Twitch personnalisé, dans Adobe Photoshop. Nous créerons une overlay personnalisée de Twitch à partir de zéro !

Streamlabs OBS est uniquement disponible pour PC, pour le moment. Cependant, vous pouvez également utiliser OBS Studio, avec un outil comme Muxy Alerts comme alternative, si vous utilisez un Mac. L’utilisation de ces outils repose sur des principes similaires.

De plus, si vous recherchez un Stream OBS Twitch rapide et personnalisable – ou même un outil d’overlay OBS – vous pouvez également jeter un coup d’œil à Placeit ! Il y a tellement de contenu Stream et de graphiques Twitch ici – des overlays Twitch aux écrans d’introduction en passant par les panneaux Twitch ! Si vous cherchez un créateur de Twitch overlay, ce site pourrait vous convenir, car ce contenu est également personnalisable !

Overlays gratuits et premiums

Sommaire

1. Comment fonctionnent les Overlay pour Twitch

Étape 1 : qu’est ce qu’un overlay ?

Tout d’abord, parlons de ce qu’est un Overlay et de son fonctionnement. Lorsque vous regardez votre streamer en direct préféré, il est courant de voir des graphiques en plus du contenu qui est diffusé en streaming. Il peut s’agir de graphiques statiques, d’éléments animés, de texte interactif influencé par l’interaction du spectateur, etc.

Étape 2 : quel software utiliser ?

Cela peut sembler très compliqué, mais c’est étonnamment simple ! Je tiens à souligner que je n’ai reçu aucune compensation pour mes recommandations ici – ce sont mes pensées et mes opinions sincères, basées sur mon expérience du streaming et sur la façon dont je réalise mes propres overlay.

D’une manière générale, lorsque nous travaillons avec OBS, trois choses se passent ici :

Premièrement, nous avons nos graphiques ou nos médias. Il s’agit du contenu que nous pouvons créer à l’aide d’un logiciel graphique, comme Adobe Photoshop ou le logiciel de votre choix.

Deuxièmement, nous avons un outil qui génère du contenu basé sur votre Stream. OBS Studio seul, par exemple, ne garde pas de traces de vos nouveaux adeptes. L’un de mes outils gratuits préférés pour les alertes de streaming est Muxy Alerts, mais il y a beaucoup de choix !

Et troisièmement, nous avons des logiciels de broadcast, qui rassemblent tous vos contenus. C’est un peu comme si vous arrangiez tout ce qui vient de différentes sources en une seule présentation finalisée. Un exemple de cela serait OBS Studio.

Cela dit, dans ce tutoriel, nous utiliserons Streamlabs OBS – l’avantage ici est que nous pouvons largement “sauter” le deuxième critère ici. Streamlabs OBS gère les alertes et les broadcasters, le tout dans un endroit agréable et soigné.

2. Comment créer un Overlay de Streaming pour Twitch ?

Étape 1 : que souhaitez vous faire avec votre Overlay ?

Avant de passer directement à la phase de conception, nous devons définir clairement ce que nous espérons créer. Il y a beaucoup de choses que nous pourrions faire avec notre stream overlay – et le bon choix va dépendre de ce que vous souhaitez faire. Certains streams ont beaucoup de contenu visuel supplémentaire, et d’autres préfèrent garder les choses au minimum. Encore une fois, il n’y a pas de bonne réponse – juste ce qui est le mieux pour vous et votre broadcast.

Étape 2 : les différents éléments à prendre en compte pour streamer sur Twitch

Voici une liste d’éléments à prendre en considération pour votre overlay :

Interaction avec le téléspectateur – cela comprend des éléments comme le dernier adepte, le dernier abonné et le dernier donateur.

Objectifs : vous pouvez afficher des éléments tels que l’objectif de votre don, l’objectif de l’abonné ou l’objectif de l’adepte, par exemple.

Médias sociaux – vous pouvez rendre vos comptes de médias sociaux visibles sur la overlay elle-même, afin d’encourager les téléspectateurs à interagir avec vous.

Webcaméra : de nombreux streamers sont équipés d’une webcam qui permet aux spectateurs de les regarder en même temps que le sujet du stream.

Fenêtre de chat – vous pouvez également afficher le chat de votre chaîne sur le Stream lui-même. Personnellement, je ne suis pas un grand fan de cette méthode, car elle nécessite beaucoup de temps, mais elle peut aussi être un moyen amusant de capturer le chat avec la vidéo.

La mise au point du stream en soi – nous devons, bien sûr, allouer de l’espace pour la mise au point du stream en soi. C’est souvent là que le gameplay est montré, s’il s’agit d’un streaming de jeu en direct.

Lire : Twitch annonce une interdiction des jeux d'argent en ligne au milieu d'une controverse

Notez que cette liste n’est pas exhaustive ; il y a beaucoup d’autres choses que vous pourriez faire avec votre streaming en direct et son overlay. Par exemple, j’ai un éclairage interactif dans ma chambre, et j’ai utilisé un carrousel animé, à l’écran, pour présenter une petite sélection de mes œuvres d’art. Une fois que vous connaissez les bases, vous pouvez les développer comme vous le souhaitez.

Étape 3 : un overlay doit être lisible

Alors, comment savoir ce que vous devez inclure dans votre overlay ? Je vous recommande de garder à l’esprit ce qui suit :

Où se trouve votre point focal ? C’est amusant d’avoir beaucoup de choses interactives à l’écran, mais assurez-vous de garder l’accent sur le point central de votre Stream. Ainsi, par exemple, si vous diffusez un jeu en streaming, il peut être judicieux de le garder comme point central.

Des ajouts devraient compléter votre Stream. Cela signifie que le contenu que vous ajoutez doit améliorer l’expérience et non la distraire.

Assurez-vous que le contenu est lisible. Si les choses sont difficiles à lire ou à comprendre, cela pourrait aller à l’encontre du but recherché. Par exemple, les polices décoratives sont souvent mieux adaptées aux titres et aux en-têtes qu’à des éléments comme le corps du texte ou un texte plus petit.

Faites preuve de cohésion. Envisagez un thème visuellement unifié, surtout si vous essayez de créer une marque professionnelle. Ayez un logo, des couleurs de signature et une esthétique cohérente – cela ne veut pas dire que vous ne pouvez pas le changer, mais la cohérence peut rendre l’expérience visuelle plus cohérente. Par exemple, l’utilisation de six polices de caractères différentes peut sembler assez chaotique.

Vos décisions sur ces points doivent être influencées par vos objectifs. Par exemple, vous ne voulez peut-être pas de logo, mais vous préférez peut-être un avatar. Peut-être voulez-vous mettre en valeur des œuvres d’art, afin que les visuels changent régulièrement. Réfléchissez à vos objectifs et vous aurez probablement plus de chances de réussir.

3. Comment concevoir un Stream Overlay

Étape 1 : ouvrez photoshop

Donc, maintenant que nous avons une idée de ce que nous aimerions inclure, creusons et commençons à concevoir. Il y a de nombreuses façons d’aborder la question. Personnellement, j’aime commencer par Adobe Photoshop et planifier ma conception sur place.

Ouvrez Adobe Photoshop et commencez un nouveau document.

Notre nouveau document doit avoir une largeur de 1920 pixels et une hauteur de 1080 pixels – c’est la taille de notre surface visible totale.

Étape 2 : utilisez un fond transparent

Avant de créer notre document, changeons notre contenu de base en transparent.

Une fois que vous avez fait cela, cliquez sur Créer pour créer votre document.

Étape 3 : Lasso polygonal

Pour ce tutoriel, je vais inclure les éléments suivants dans ma mise en page :

les interactions avec les spectateurs à l’écran
espace pour une caméra web
contenu des médias sociaux
espace pour un objectif d’abonné
mes images sur le streaming principal

J’ai décidé de commencer par quelques zones de contenu pour mes interactions avec les spectateurs à l’écran. Je voulais que la overlay affiche les nouveaux adeptes, les nouveaux abonnés et les derniers dons – vous pouvez choisir d’inclure (ou d’exclure !) ce que vous préférez.

J’ai commencé par créer une nouvelle couche. Vous pouvez le faire dans le panneau des couches, comme indiqué ci-dessous. J’aime nommer mes couches, pour garder les choses organisées. Vous pouvez nommer vos couches en cliquant sur le nom de la couche elle-même, dans le panneau “Couches”.

Ensuite, à l’aide de l’outil Lasso polygonal, mis en évidence ci-dessous dans le panneau Outils, j’ai dessiné un polygone avec ma souris. Chaque clic est un point dans votre sélection. Une touche de décalage supplémentaire pendant que vous dessinez votre forme pour créer des lignes parfaitement droites !

Enfin, remplissez cette sélection avec l’outil Seau à peinture – j’ai choisi de le faire en noir.

Étape 4 : préparer les interactions

Ensuite, dupliquez cette couche. Vous pouvez le faire en cliquant avec le bouton droit de la souris (sur PC) ou en cliquant avec la touche Ctrl (sur Mac). Dans le menu résultant, sélectionnez Dupliquer la couche.

Nous voulons trois copies de cette couche au total – une pour chacune des interactions prévues.

Lire : Comment s'abonner à Twitch Turbo ?

Étape 5 : fusionnez les trois couches ensemble

Pour ce faire, maintenez la touche Shift enfoncée pour sélectionner plusieurs couches à la fois. Ensuite, cliquez avec le bouton droit de la souris (sur PC) ou avec la touche Ctrl (sur Mac). Dans le menu résultant, sélectionnez Fusionner les couches.

Notez que cela permet de combiner les couches ensemble. Vous pouvez vouloir les garder indépendants. Gardez toutefois à l’esprit que si vous décidez de séparer ce contenu, il suffit de couper et de coller sur une nouvelle couche, une fois de plus.

Étape 6 : dupliquez la couche fusionnée

Maintenant, dupliquez notre couche fusionnée, en utilisant le même procédé.

Cela nous laisse deux copies des trois mêmes polygones. Utilisez l’outil de déplacement pour ajuster leur alignement – si vous me suivez, nous voulons que l’on ait l’impression que l’un est “au-dessus” de l’autre, comme indiqué ci-dessous.

Étape 7 : appliquer de la couleur

Maintenant, verrouillez la transparence sur notre jeu de polygones inférieur. Cela nous permettra d’appliquer de la couleur sans nous soucier d’aller “en dehors des lignes”. Vous pouvez verrouiller la transparence dans le panneau des couches, comme indiqué ci-dessous.

Sélectionnez une couleur bleue et une couleur cyan pour vos couleurs d’avant-plan et d’arrière-plan – ou sélectionnez les couleurs que vous préférez ! Vous pouvez trouver vos couleurs dans les Outils – cliquez sur les carrés de couleur pour ouvrir le sélecteur de couleurs.

Étape 8 : outil de gradient

Utilisez l’outil de gradient pour appliquer un gradient à nos polygones du bas. Il suffit de cliquer et de faire glisser pour appliquer votre dégradé.

Encore une fois, la couleur “restera” dans cette zone, car nous avons verrouillé la transparence dans notre panneau “Layers”.

Étape 9 : texte

Maintenant, ajoutons du texte avec notre outil de texte. C’est difficile à voir, ci-dessous, mais j’ai tapé “nouvel adepte”.

Puisqu’il est difficile à voir, ajoutons un trait à ce texte pour améliorer sa visibilité.

Pour ce faire, sélectionnez la couche de texte et cliquez sur Ajouter un style de couche, dans le panneau “Couches”. Le menu suivant s’ouvre alors, comme indiqué ci-dessous – sélectionnez “Stroke”.

Étape 10 : layer style

Voici à quoi ressemblent nos options de style de calque : n’hésitez pas à copier mes valeurs ! J’ai opté pour un 3 px Stroke.

Une fois que vous êtes satisfait de vos paramètres, cliquez sur OK.

Étape 11 : Second layer style

Répétez ce processus deux fois, afin que nous ayons du texte au-dessus des trois polygones.

Étape 12 : Crééer des groupes de calques

Lorsque je travaille sur une overlay, j’aime souvent insérer des échantillons de contenu, juste pour avoir une idée de l’aspect des choses. Dans ce cas, j’ai ajouté des noms de test à chacune de mes sections, en bleu, pour pouvoir voir à quoi cela ressemble quand il y a du contenu.

Je l’ai fait à l’aide de l’outil texte et j’ai placé ce contenu dans un dossier. Vous pouvez créer des dossiers au bas du panneau des couches. Les dossiers (ou groupes) sont un excellent moyen de garder votre contenu organisé. Je vais les utiliser dans ce tutoriel, mais ils sont facultatifs.

Étape 13

Maintenant, créons un espace pour certains contenus de médias sociaux.

Comme pour nos polygones originaux, j’ai créé une nouvelle couche, dans un nouveau dossier (je veux garder les différentes parties de ma mise en page organisées).

J’ai commencé par dessiner une sélection à l’aide de l’outil Lasso Polygonal. Ensuite, remplissez l’espace avec la couleur de votre choix, en utilisant l’outil Paint Bucket – j’ai choisi le noir, encore une fois.

Étape 14

Vous remarquez un schéma ici ? Nous allons répéter le processus que nous avons fait avec nos autres formes noires :

Copier le calque.
Déplacez le calque, à l’aide de l’outil Déplacer, pour que l’un regarde “devant” l’autre.
Verrouillez les pixels transparents dans le panneau “Layers”, afin que nous ne puissions pas appliquer la couleur “en dehors des lignes”.
Appliquez ensuite votre dégradé, en utilisant l’outil Dégradé.

Notre but est de créer un aspect similaire, afin que le contenu ici corresponde.

Étape 15

Maintenant, ajoutons un peu de contenu ici.

Vous pouvez ajouter tout ce que vous voulez ici – des icônes de médias sociaux, des noms, des URL, un avis, tout ce que vous voulez ! Dans ce cas, j’ai ajouté ici deux annonces de médias sociaux, afin qu’elles restent à l’écran et soient faciles à voir.

J’ai utilisé l’outil texte pour écrire les poignées de médias sociaux, puis j’ai copié et collé quelques icônes de médias sociaux dans ma mise en page.

Voici les icônes de médias sociaux que j’ai utilisées, si vous souhaitez les utiliser vous aussi !

Étape 16

Ensuite, j’ai décidé d’ajouter un espace pour une caméra Web. Encore une fois, je tiens à souligner que tout dépend de ce que vous voulez inclure dans votre mise en page – vous pourriez, par exemple, laisser cette section entièrement de côté !

Lire : Streamlabs vs OBS : lequel choisir ?

Répétez le même processus à partir des étapes 14 et 15 – uniquement pour l’espace de notre webcam.

Notez que vous pouvez prendre en considération les dimensions de votre caméra Web. J’ai choisi de travailler avec 640 pixels de large par 480 pixels de haut comme base générale (par exemple, créer un nouveau document à cette taille, le coller dans votre document, puis le mettre à l’échelle en utilisant l’outil Déplacer ou Transformer librement).

Ensuite, j’ai réduit l’échelle, de sorte que je savais que le rapport hauteur/largeur resterait le même.

Étape 17

Encore une fois, j’aime avoir des exemples de contenu dans ma mise en page, pour que je puisse avoir une idée de la façon dont les choses se passent. Dans ce cas, j’ai choisi d’appliquer une image test à mon espace webcaméra.

Si vous souhaitez le faire aussi, collez votre image dans votre document. Assurez-vous que le calque contenant cette image se trouve juste au-dessus du carré noir que nous avons désigné pour l’espace de la caméra web.

Ensuite, sélectionnez la couche d’image et cliquez avec le bouton droit de la souris (sur PC) ou maintenez la touche Ctrl enfoncée et cliquez (sur Mac), puis sélectionnez Créer un masque de découpe dans le menu qui apparaît. Nous allons maintenant voir un exemple d’image affichée dans cet espace.

Étape 18

Ajoutons aussi un espace pour nos objectifs d’abonnés ! Je veux que cela ressemble à une barre de progression, c’est pourquoi j’ai gardé cela à l’esprit en créant ces formes.

Ne vous préoccupez pas de la barre de progression elle-même, mais assurez-vous qu’il y a un espace pour elle et qu’elle s’harmonise visuellement avec le reste de notre composition. Suivez les mêmes étapes pour créer l’aspect dégradé bleu derrière nos espaces de contenu noirs.

Étape 19

J’ai décidé que je voulais ajouter des éléments décoratifs supplémentaires à ma mise en page.

Dans ce cas, j’ai créé une nouvelle couche. Ensuite, j’ai utilisé l’outil Marquise rectangulaire pour dessiner une sélection horizontale. J’ai ensuite utilisé l’outil Seau à peinture pour remplir cet espace de noir. Cela vous semble familier ?

Étape 20

Comme vous l’avez peut-être deviné, j’ai utilisé le même procédé pour créer une ligne bleue dégradée sous cette longue ligne noire ! J’essaie de garder les visuels ici cohérents.

Suivez les mêmes étapes avec les couleurs que vous préférez !

Étape 21

Nous n’avons pas besoin de nous en tenir à des lignes droites – en fait, notre mise en page utilise quelques diagonales amusantes, alors j’ai pensé qu’il pourrait être amusant de créer une ligne de fond qui joue là-dessus. Encore une fois, c’est le même processus que la ligne précédente.

Expérimentez avec des directions visuelles différentes !

4. Comment préparer les graphiques pour une overlay de Stream

Étape 1

À ce stade, j’étais assez satisfait de ma mise en page – alors préparons-la pour OBS !

Tout d’abord, assurez-vous de supprimer ou de cacher tout contenu test, comme les noms ou les images que vous mettez dans votre mise en page, juste à titre d’exemple.

Ensuite, nous devons fusionner nos couches de manière sélective. Par exemple, je veux que le contenu de mon dossier “Top Line” soit fusionné en une seule couche, afin que je puisse l’exporter comme une seule image.

Maintenez la touche Shift enfoncée tout en sélectionnant les calques que vous souhaitez fusionner. Ensuite, faites un clic droit (sur PC) ou un contrôle-clic (sur Mac) et sélectionnez Fusionner les calques dans le menu résultant pour les combiner.

Ne fusionnez pas tout ensemble ! Fusionnez des éléments spécifiques pour qu’ils n’aient plus de composants en couches. Réfléchissez aux images que vous voulez faire fonctionner comme une seule unité et que vous souhaitez conserver indépendamment.

Étape 2

Voici un exemple de mes couches, après que tout ait été fusionné. Plus de dossiers, plus de parties multiples à chaque composant de ma mise en page.

En dessous, seules les barres d’information supérieures sont visibles (vous pouvez activer et désactiver la visibilité en cliquant sur l'”œil” situé à côté de chaque couche). Remarquez, encore une fois, que tout cela se trouve sur une seule couche – les polygones noirs, les polygones bleus derrière eux et le texte.

Gardez la couche que vous souhaitez exporter sélectionnée.

Étape 3

Nous devons maintenant sélectionner ce contenu. Allez sur Sélectionner > Tout pour sélectionner l’ensemble de votre toile.

Étape 4

Ensuite, copiez (Edition > Copie) et créez un nouveau document.

Maintenant, Coller (Edition > Coller)-Photoshop doit coller le contenu que nous avons copié de notre mise en page, comme le montre l’exemple ci-dessous. Notez cependant que c’est exclusivement la partie fusionnée de notre mise en page que nous avons sélectionnée.

Sauvegardez ce contenu au format PNG, afin que l’arrière-plan reste transparent.

Répétez ce processus pour chaque partie de votre mise en page. Vous pourriez, en théorie, exporter l’ensemble de votre mise en page en un seul PNG transparent, mais je préfère souvent garder les différentes parties séparées. C’est à vous de choisir !

J’adore expérimenter de nouvelles choses pour mon stream – vidéos, panneaux, éclairage – c’est très amusant ! Si vous avez besoin d’aide pour personnaliser votre Stream et votre chaîne, vous pouvez vous rendre sur Placeit ! Il s’agit d’un outil convivial d’overlay de flux, d’overlay de “stream starting soon”, et bien plus encore !

Il y a tellement de contenu à personnaliser, et il est très facile à utiliser. Regardez !

Overlays gratuits et premiums