Chaque année, on a l'impression que les streamers et les créateurs de contenu redoublent de créativité et trouvent de nouvelles idées pour leur site stream afin de divertir et d'interagir avec leur communauté. En tant que nouveau venu dans le domaine du streaming, ou même en tant que personne qui pratique le streaming depuis un certain temps, on peut se demander par où commencer lorsqu'il s'agit de faire preuve de créativité pour ses propres configurations. L'article d'aujourd'hui a donc pour but de célébrer cette créativité et de vous donner, à vous le streamer, le créateur de contenu, 4 nouvelles idées pour stimuler votre créativité.

Téléchargements de vidéos en vedette

Nerd Or Die Overlays et Widgets

Plugin StreamFX pour OBS

Photopea - Logiciel gratuit d'édition de photos

Télécharger Mobile Phone Chat Background

FugiTech Reactive (surligneur d'activité Discord)

Now Playing de MrBoost Widget (canal Discord #free-resources de Nerd Or Die)

Le Media Looper de Nerd Or Die


1. Bordure de webcam réactive

OK, la première chose que nous allons mettre en place est une bordure de webcam, mais elle réagit à l'audio. Et le signal particulier auquel il réagira sera notre voix. Pour cet exemple, nous allons utiliser un cadre de webcam statique du Nerd Or Die Stealth Pack. Nous voulons mettre en place une bordure de webcam qui réagira à un signal audio. Une fois notre bordure de webcam du Stealth Pack prête, nous allons commencer à l'éditer dans Photopea: un outil d'édition en ligne gratuit qui, si vous avez utilisé Photoshop, vous semblera assez familier. Nous avons d'ailleurs réalisé une vidéo sur cet outil, alors n'hésitez pas à la consulter !

Allez dans Nouveau et créez un nouveau projet. Nous allons utiliser des dimensions de 1280 x 720, et je vais utiliser un fond gris pour l'instant, que nous désactiverons plus tard, lorsque nous serons sur le point d'exporter.

sélecteur de couleurs réactif pour webcam

Avant d'aller plus loin, nous allons configurer quelques guides. Appuyez sur Ctrl+R ou Cmd+R pour faire apparaître les règles sur chacun de nos axes et si vous cliquez et faites glisser de chaque côté, vous créerez un guide. Les guides sont très utiles pour garder les choses centrées ou verrouillées dans certaines zones de notre toile. Dans ce cas, nous voulons marquer le centre de notre toile, c'est-à-dire la moitié de 1280 et la moitié de 720, 640 et 360. Nous voulons faire glisser une ligne de guidage jusqu'à 640, puis une autre jusqu'à 360 : cela devrait vous donner votre point central.

Cadre de webcam furtif

Assurez-vous que cette image est alignée au centre pour faciliter le chevauchement plus tard dans ce tutoriel.

Faites glisser ici notre image de bordure de webcam du Stealth Pack de Nerd Or Die. Lorsque vous faites glisser votre calque, vous avez la possibilité de le redimensionner : nous voulons qu'il soit plus grand, mais pas de la taille de la toile. Maintenez la touche Maj et cliquez sur l'un des coins pour augmenter la taille de l'image, et assurez-vous de laisser un peu d'espace autour de l'extérieur, car nous allons ajouter un effet de lueur que nous voulons diffuser en douceur dans le vide. Centrez-la une fois qu'elle est suffisamment grande, et vous verrez les lignes de guidage devenir rouges, ce qui vous aidera à verrouiller la bordure de la webcam et à la centrer sur les deux axes.

Sur notre image, vous pouvez voir quelques parties claires parmi le design sombre de la Stealth, nous allons les faire vivre.

Pour ce faire, nous allons créer un nouveau calque en cliquant sur ce bouton ici, et sur ce calque, nous allons peindre un peu. Dirigez-vous vers le calque du pinceau sur le côté gauche, cliquez dessus, et après cela, maintenez la touche Alt enfoncée et cliquez sur la zone jaune de la bordure de la webcam, cela va échantillonner la couleur de cette partie jaune, et nous allons peindre sur la même zone de la bordure de la webcam, mais sur notre nouveau calque.

pinceau réactif pour webcam

Pour accéder rapidement aux paramètres du pinceau, faites un clic droit sur le canevas, et vous pourrez ajuster ses propriétés. La seule propriété que nous voulons ajuster est la taille, c'est la taille que j'utilise, mais la vôtre peut varier - le but est de s'assurer que le pinceau ne peint pas en dehors de la barre jaune, de l'image originale de la webcam.

pinceau réactif pour webcam 2

Cliquez sur la zone à peindre, et une petite astuce que j'aime utiliser est que lorsque je clique et que je commence à peindre, je maintiens la touche shift enfoncée et je me déplace sur cet axe, que ce soit de haut en bas, ou de gauche à droite - maintenir la touche shift permet de s'assurer que vous peignez une ligne parfaitement droite, ce qui peut être très pratique pour les barres supérieures et inférieures. Vous pouvez vous entraîner, et si vous n'y arrivez pas, vous pouvez utiliser ctrl+z ou cmd+z pour annuler et réessayer, ou vous pouvez simplement essayer de peindre à la main. C'est vous qui décidez, faites ce qui vous semble le plus confortable.

Une fois que vous avez terminé, double-cliquez sur le nom de votre calque pour le renommer, juste pour que nous sachions de quoi il s'agit, je vais l'appeler Glow. Ensuite, double-cliquez sur le calque, loin du texte, et cela ouvrira la fenêtre des effets, où nous pouvons ajouter un éclat extérieur et intérieur. La première chose que je veux faire ici, est d'ajouter l'éclat extérieur. Je vais utiliser ces paramètres, en utilisant la couleur de la barre jaune comme éclat. Vous pouvez échantillonner la couleur de la barre en cliquant sur le nuancier de gradients, puis en maintenant la touche alt+clic pour échantillonner le jaune de la barre sur la bordure de notre webcam.

style de couche webcam réactive

Maintenant, nous arrivons à quelque chose. L'effet est que la lumière brille, mais on n'a pas l'impression qu'elle brille à l'intérieur de la barre jaune elle-même, donc c'est là que l'éclat intérieur va entrer en jeu.

l'éclat réactif de la webcam

Je vais utiliser ces paramètres ici, et cela peut sembler une différence subtile, mais lorsque vous désactivez cette lueur intérieure, vous pouvez vraiment voir la différence que cela fait en l'utilisant. Maintenant que nous avons terminé, nous allons exporter l'image inactive et l'image parlante de la bordure de notre webcam. Veillez à désactiver le calque d'arrière-plan car nous n'en avons pas besoin, puis exportez avec le calque lumineux activé. Ensuite, désactivez le calque luisant et exportez-le avec le calque luisant maintenant désactivé. Ensuite, rendez-vous sur ce site Web - il s'appelle Reactive de FugiTech. Lorsque vous vous connectez, il vous demande d'autoriser votre compte Discord, car il utilisera votre voix sur un canal Discord pour activer la bordure de la webcam.

Notez que vous devez être dans un canal vocal sur discord, sinon le site widget ne captera pas votre voix et ne fonctionnera pas.

Prenez vos deux images, et une fois que vous vous serez connecté à Reactive, vous pourrez les télécharger ici :

Cliquez sur Enregistrer sur les deux, et sur le côté gauche, nous voulons ajuster certains des paramètres de configuration. Je m'assurerais que ces trois cases ne sont pas cochées, et puisque nous n'utiliserons pas Reactive pour d'autres voix que la nôtre, le reste de ces paramètres n'aura pas d'importance. Si vos paramètres ressemblent déjà à ceci, c'est parfait, sinon, configurez-les et cliquez sur Appliquer.

Dans la section Liens, prenez la source du navigateur individuel. Ensuite, rendez-vous sur OBS et ajoutez une source de navigateur. Assurez-vous que vous êtes connecté à un canal vocal dans discord, sinon la bordure de la webcam ne se chargera pas. Ensuite, positionnez-la au-dessus de votre webcam. Une fois que c'est fait, vous verrez que cela commence à réagir à votre voix immédiatement.

Donner vie aux bordures de webcam est une excellente façon d'utiliser ce programme, et il y a tellement d'autres idées géniales pour l'utiliser de cette façon, nous aimerions entendre ce que vous créez avec cela, alors sautez dans votre discord, et n'hésitez pas à partager n'importe laquelle de vos créations cool avec notre communauté, et vous trouverez très probablement quelques créations cool déjà là aussi.


2. Idées créatives de chat

Le chat fait désormais partie intégrante de la vie de beaucoup de streamers, que ce soit sur l'ensemble du site stream ou au début ou à la fin d'un stream pour se réchauffer ou se détendre avec sa communauté. Bien que les options visuelles proposées par Nerd or Die soient nombreuses et magnifiques (sans aucun préjugé), nous sommes nombreux à vouloir donner à nos streams une touche unique, pour y mettre notre propre marque.

Utiliser les packs stream ne signifie pas que vous êtes incapable de le faire, en fait, cela vous donne un avantage sans pareil, avant même d'essayer différentes façons de l'utiliser, comme ce chat amusant overlay sur mon téléphone, par exemple. On dirait qu'il est affiché sur le téléphone et filmé, mais en réalité il s'agit juste d'une photo avec mon téléphone éteint, et le chat est projeté par-dessus. Configurons donc ce système dans OBS Studio, en partant de zéro.

Pour l'utiliser, vous aurez besoin d'un plugin OBS appelé StreamFX, le lien pour le récupérer est dans la description. Si vous l'avez déjà installé, assurez-vous que votre OBS et vos plugins sont à la version la plus récente. Si vous utilisez StreamLabs Desktop, ils ne supportent pas les plugins OBS Studio, vous devrez donc faire le changement si vous voulez utiliser cet effet.

Avec votre OBS Studio éteint, installez la suite de plugins StreamFX, puis rouvrez OBS Studio. Et la meilleure façon de vérifier que StreamFX a été installé est de vérifier la présence de cet onglet en haut d'OBS Studio. Si vous pouvez voir cet onglet StreamFX... vous l'avez installé correctement, bravo !

stream onglet fx

OK, faisons une scène de chat ! Pour réaliser cette scène, j'ai mis cette image à la disposition de tout le monde, mais je vous recommande d'être créatif, de prendre votre propre téléphone ou appareil, et de filmer à côté d'autres choses actives, comme des voitures qui passent dehors, ou une télévision allumée en arrière-plan avec votre stream en train de tourner, ou vous dansant comme un fou - c'est à vous de voir, mais la dernière est la seule chose que vous devriez faire.

Une fois que vous avez placé l'image dans sa propre scène, l'étape suivante consiste à ajouter une source de navigateur, puisque nous allons y placer l'URL de notre chat widget . Nous allons utiliser le chat Amused widget dans cette configuration, car il a un aspect de messagerie textuelle qui, à mon avis, convient très bien à cette idée.

Fond d'écran du Phone Chat MobileJe veux donner à la discussion l'impression d'être à l'échelle, comme si elle était sur mon téléphone, je vais donc utiliser ces dimensions pour créer une longue fenêtre, puis la réduire. L'important est de s'assurer que la source entière est plus grande que la zone à laquelle vous allez l'appliquer, car une fois la transformation 3D appliquée, nous utiliserons cette plus grande zone de toile pour la déplacer vers l'intérieur sans nous soucier de recadrer ou de couper des parties de la discussion. Cela vous donne simplement plus de liberté pour modifier les choses en fonction de la taille et de l'angle de votre zone de discussion.

téléphone twitch chat navigateur

Vous pouvez soit mettre une source de couleur derrière, soit une image, c'est à vous de voir. Je vais utiliser certains des fonds d'actifs supplémentaires fournis avec le design Nerd or Dies Flatpack. Alt+click glisser pour recadrer les côtés de votre image autour de votre chat, et laissez un peu d'espace supplémentaire autour de la fenêtre de chat, puisque nous aurons besoin de rembourrage. Pour l'instant, nous allons réduire un peu la fenêtre de chat et la configurer comme suit :

téléphone twitch chat navigateur

Ensuite, nous allons les regrouper, sélectionner les deux sources, faire un clic droit et sélectionner cette option ici. Ensuite, allez dans les filtres de votre groupe, et ajoutons un filtre de transformation 3D, puis un filtre de correction de couleur : Réduisez l'opacité du filtre de correction des couleurs, afin que vous puissiez voir le téléphone derrière ce groupe, cela va nous aider à obtenir la prochaine étape aussi précise que possible.

Avec le mode caméra Corner Pin, nous allons déplacer chacun des quatre coins de la mise en page du chat jusqu'à ce qu'ils correspondent aux coins du téléphone. Ne vous préoccupez pas des valeurs exactes que j'ai définies ici, car elles peuvent varier - concentrez-vous simplement sur l'adaptation au téléphone, dans chaque coin. Et pensez à l'aspect du téléphone lorsqu'il est allumé.

téléphone twitch chat perspective navigateur

Une fois que c'est bon, cliquez avec le bouton droit de la souris sur le groupe et allez dans les Modes de mélange, sélectionnez Additif ou Écran, et vous devriez voir apparaître le reflet du téléphone, qui commence à ressembler de plus en plus à ce qui apparaît réellement sur le téléphone. Vous pouvez garder le filtre de correction des couleurs sur votre groupe pour réduire l'opacité, je trouve que cela aide à créer l'aspect authentique encore plus. J'aime ajouter un peu plus de correction de couleur (gamma réduit) à la scène globale elle-même, et même mélanger une LUT à la scène, pour rapprocher un peu plus la source et l'image. Vous pouvez facilement trouver des packs de LUTs gratuits sur YouTube et avec une simple recherche sur Google, mais la LUT teal_lows_orange_highs qui se trouve dans le dossier LUT par défaut d'OBS a des effets très intéressants lorsqu'elle est utilisée avec un peu de correction de couleur.

téléphone twitch chat perspective navigateur

Si vous créez votre propre installation, je vous recommande d'avoir une surface plate et immobile sur laquelle vous pouvez projeter la discussion, avec d'autres éléments autour. Il y a de nombreuses façons de faire cela, et pas seulement avec le chat amusant. Vous pouvez mettre en place des configurations simples mais impressionnantes qui vous permettent, à vous et à votre communauté, de profiter ensemble de clips et d'autres contenus de manière créative, ou créer une scène attrayante avec des décors réels. Le potentiel de créativité est vraiment infini.

téléphone twitch exemple de navigateur de chat


3. Spotify de MrBoost Widget

Si vous ne savez pas encore qui est MrBoost, sachez qu'il s'agit d'un créateur magistral qui a créé de nombreux widgets remarquables. Comme le chat latéral widget, célèbrement utilisé sur Twitch par de nombreux créateurs de contenu, la bulle de chat, et bien d'autres encore. L'un de mes widgets préférés qu'il a créé est le Now Playing Widget pour Spotify, iTunes et Pretzel.

Maintenant, si vous n'utilisez généralement pas Spotify ou iTunes, et que vous jouez la plupart de votre musique localement, par exemple, vous pouvez toujours l'utiliser. Depuis Spotify et iTunes, vous permet de lire les fichiers locaux sur votre disque dur, android ou iOS appareil. Et les deux lecteurs vous permettent de définir un mode hors ligne afin que vous ne soyez pas gêné par les publicités ou les services en ligne.

Pour le mettre en place, il suffit de télécharger leDiscord de widget Nerd Or Die dans le canal #free-resources. Extrayez le contenu dans un dossier, ouvrez snip et assurez-vous de cocher l'option de sauvegarde séparée des informations, puis depuis le dossier faites glisser un des fichiers html dans OBS, et il s'ajoutera comme source du navigateur, commençant à fonctionner dès que vous jouez de la musique dans Spotify, iTunes ou Pretzel.

Et c'est tout !

  • Télécharger widget: [https://github.com/mrboost/Spotifywidget/releases/tag/2.0](https://github.com/mrboost/Spotifywidget/releases/tag/2.0)
  • Ouvrez Snip et assurez-vous de cocher la case "Enregistrer les informations séparément".

L'avantage de ce système est qu'il est très facile à configurer et qu'il est très impressionnant, surtout si vous l'associez à des éléments sur votre site stream, comme l'utilisation de transitions d'affichage et de masquage pour le faire apparaître et disparaître de derrière votre webcam, mais même si vous ne le faites pas, il possède une excellente animation d'affichage et de masquage intégrée. Il en existe d'autres variantes, dont une avec un rebond et une autre plus minimale, alors essayez-les toutes et voyez ce que vous préférez.

Et si pour une raison ou une autre, ce n'est pas votre truc, il y en a un autre que MrBoost a fait qui est dans le style de notre récente sortie Flatpack, il est gratuit et vous pouvez l'obtenir dans notre canal #free-resources sur le discord, qui en fait fonctionne aussi avec Pretzel !

mrboost spotify widget


4. Boucleur de médias

La quatrième et dernière chose que nous allons couvrir est notre très propre Media Looper, non seulement il est génial pour faire tourner vos liens de médias sociaux sur stream avec style, il est facile à configurer et il est GRATUIT ! Et si vous *pouvez* l'utiliser pour faire tourner vos liens twitter, youtube, tiktok et ainsi de suite, pourquoi ne pas l'utiliser pour d'autres éléments liés à stream ? Des choses comme :

  • Règles du chat : vous pouvez y définir les choses à faire et à ne pas faire de manière plus créative qu'en utilisant une commande ou un message de minuterie dans le chat.
  • Programme : les nouveaux venus peuvent savoir quand ils pourront vous voir, directement à l'écran, sans avoir à vous demander ou à chercher dans vos panneaux.
  • Les sponsors : Si vous avez la chance d'avoir un ou plusieurs sponsors, vous pouvez les regrouper avec Media Looper pour les faire apparaître de temps en temps, afin que vous puissiez représenter ce sponsor à votre manière, tout en stream!
  • Question du jour, générer des conversations pour votre chat : les streamers réfléchissent toujours à des moyens d'enrichir l'expérience de leurs communautés en étant présents sur stream, et l'une des suggestions qui revient le plus souvent est de proposer un début de conversation. Créer une question du jour et l'intégrer dans votre rotation peut être un excellent moyen d'inciter les gens à discuter sur votre site stream, alors pourquoi ne pas tenter l'expérience ?

 

Il existe de nombreuses façons de l'utiliser, et nous aimerions connaître vos idées sur la façon dont vous l'utiliseriez. Nous avons déjà réalisé une excellente vidéo sur Media Looper, alors consultez le tutoriel et n'oubliez pas de nous faire savoir comment vous utilisez Media Looper.

C'est tout pour cet article, mais faites-nous savoir ici, sur Twitter, ou sur Discord, comment vous avez été créatifs avec votre stream. Si vous souhaitez voir d'autres vidéos de ce type, faites-le nous savoir dans les commentaires. Merci de nous avoir suivis, à bientôt !