Créer une bannière Twitch avec GIMP : Guide Complet
Si vous avez déjà regardé des streams sur Twitch, vous avez sûrement remarqué le « cadre » autour du contenu : des images statiques, des animations ou des textes interactifs appelés overlays Twitch. Créer un overlay personnalisé n’est pas seulement esthétique : cela renforce votre image de marque, améliore l’expérience des viewers et facilite la communication avec votre communauté. L’important est de garder un design lisible et clair.
Avant de passer à la phase de conception de votre overlay Twitch personnalisé, vous devez prendre le temps de définir clairement ce que vous souhaitez y faire figurer. Ainsi, si certains streams présentent un grand nombre de contenus visuels supplémentaires, d’autres préfèrent au contraire jouer la carte de la sobriété. Nous allons ici vous expliquer comment produire un overlay Twitch à partir d’une toile blanche. Si vous optez pour un template, la personnalisation sera plus rapide et ne nécessitera pas d’explication particulière.
Conservez toujours un arrière-plan transparent. En effet, votre overlay est destiné à être installé au-dessus de votre flux Twitch. Votre design est donc le seul élément de l’overlay qui n’est pas transparent. Attention donc de lui octroyer un emplacement où il ne risque pas de cacher quelque chose d’important.
Quoi qu’il arrive, votre overlay doit impérativement rester le plus lisible possible. En effet, son but est avant tout d’améliorer l’expérience et non de la distraire. Vos textes doivent donc être faciles à lire et à comprendre. Restez cohérent en proposant à vos viewers un overlay visuellement harmonieux, en particulier si vous tentez de créer une marque professionnelle. Ainsi, votre logo et vos couleurs de signature doivent offrir un aspect cohérent, comme dans une véritable charte graphique d’entreprise.
Ne vous précipitez pas. Prenez le temps d’expérimenter plusieurs palettes chromatiques et plusieurs textures, de jouer avec les polices de caractères, etc. Une fois le graphisme de votre overlay rondement peaufiné, vous devez le mettre en œuvre. Créez ensuite vos scènes dans OBS. Celles-ci doivent être abordées comme des réglages qui décrivent les différents aspects de votre page. Intégrez à présent vos graphismes d’overlay en fonction des scènes auxquelles ils se destinent.
Outils pour la création d'overlays Twitch
Chaque outil offre son propre fonctionnement et ses propres qualités.
- GIMP : C'est un outil de conception graphique gratuit qui fonctionne aussi bien sur Mac que sur Windows, et qui doit être téléchargé en local sur desktop.
- Adobe Photoshop : C'est un outil de conception graphique de pointe, très largement sollicité par les graphistes professionnels. Il permet de réaliser des overlays personnalisés de très grande qualité. Créer un overlay avec Photoshop ou Gimp est sans doute la méthode qui permet la personnalisation la plus poussée.
- Streamlabs : C'est un logiciel gratuit et l'une des références en matière de conception d’overlay. Cet incontournable permet de créer une atmosphère visuelle globale de qualité pour votre stream.
- Canva : C'est un outil gratuit de graphisme accessible en ligne, qui permet aussi la conception simple d’overlay gaming. Vous y trouverez des templates prêts à l’usage pour créer vos bannières Twitch.
Créer un overlay Twitch est aujourd’hui une étape incontournable pour tous les streamers. Si vous ne parvenez pas à vos fins, n’oubliez pas que les professionnels du design peuvent vous être d’une très grande aide.
Créer une bannière pour Twitch avec GIMP : Guide pas à pas
Pour le cadre de votre bannière, nous allons donc faire simple. Une fois Gimp lancé, nous allons commencer par ouvrir une image de 500x100 pixels (puisqu'il s'agit du format max des bannières en hauteur, et que la largeur max est plus petite résolution).
Étape 1 : Préparation de la toile et du cadre
Maintenant, nous allons ouvrir un premier calque. Pour ce faire, il faut se rendre dans "Calque", "Nouveau calque". Pour la suite, assurez-vous de bien avoir deux fenêtres ouvertes : "Calques, canaux, chemins..." et "Boîte à outils". Si ce n'est pas le cas, allez dans "Fenêtres" pour les ouvrir.
Cliquez sur "Outil de sélection rectangulaire" (le rectangle !), et sélectionnez l'ensemble de l'image. Puis, rendez-vous dans la boîte à outils pour changer la taille de sélection en 494x94. Il ne vous reste plus qu'à placer la sélection au centre de l'image de manière symétrique.
Étape 2 : Ajout de la couleur du cadre
Il est temps d'y ajouter la couleur de cadre ! Pour que cela passe plutôt bien sur le forum de DC, je vous suggère un gris très sombre. Pour ma part, j'utilise un gris "2f2f2f" (code hexa' de la couleur).
Nous allons donc faire un clic droit sur le cadre sélectionné, puis aller dans "Sélection", "inverser". Nous allons maintenant cliquer sur la Brosse, choisir une grande échelle, et tout simplement colorier le contour de l'image hors sélection pour avoir notre beau cadre.
Étape 3 : Remplir le cadre avec le contenu principal
Maintenant, il est temps de remplir votre cadre ! Il est d'abord important de penser votre signature, et ce que vous allez y mettre.
Ajout de l'arrière-plan
Nous allons donc commencer par le background. Il va vous falloir vous rendre dans "Fichier, ouvrir en tant que calque". Pour cela, il faut aller dans "Calque", puis "Échelle et taille du calque". Ceci va vous ouvrir une fenêtre permettant de modifier la taille de votre calque afin de lui donner une taille idéale selon vous.
Sur les dernières versions de Gimp, une petite chaîne est affichée à côté des mesures du calque ; cliquer dessus permet de les lier ou de les délier. Tant qu'elles sont liées, la modification de la taille est proportionnelle, elle ne se déformera pas. Enfin, une fois que les mesures vous semblent bonnes, cliquez sur "Cubique" (qui est l'algorithme de modification de base) et changez-le pour "Sync (Lancoz3)" qui est bien meilleur. N'oubliez pas, si le résultat ne vous plaît pas, il vous suffit de faire Ctrl + Z pour annuler et recommencer.
Normalement, vous avez votre arrière plan !
Ajout du premier plan (personnage, symbole, etc.)
Maintenant, nous allons ajouter le premier plan, en général les gens aiment mettre leur personnage, ou un symbole... La méthode est la même ! Attaquons maintenant le premier plan ! Tout comme pour l'arrière-plan, nous allons ouvrir l'image de premier plan en tant que calque, ce qui doit vous donner un résultat très moche, puis l'adapter à la taille souhaitée.
Comme vous l'avez deviné, ça ne colle pas vraiment, nous allons donc devoir détourer l'image. Pour ce faire, nous allons utiliser l'outil "Outil de sélection à main levée" (le lasso !). Cet outil fonctionne d'une manière particulière. Comme des "ciseaux", on découpe, on encercle tout ce que l'on souhaite garder ! N'hésitez pas à mettre plein de points, plus il y en aura, plus cela sera précis. Une fois la zone sélectionnée, il vous suffit de faire un clic droit dessus, et de nouveau sur "Sélection", "inverser". Puis passer la gomme sur tout ce que l'on ne souhaite pas garder.
Attention ! Il arrive des fois que gommer ne vous donne qu'un fond blanc sur le calque, et non l'image au-dessus. Bien, vous voilà maintenant avec votre image bien placée, bien détourée, tout est beau tout est mignon !
Flouter légèrement les contours
Qu'à cela ne tienne, nous allons flouter très légèrement les contours découpés pour les fondre dans le décor. Pour ce faire, il faut cliquer sur "Outil de flou / de netteté" (la goutte d'eau !), et badigeonner les contours au feeling.
Une fois le floutage fini, il vous suffit de glisser ce calque entre le calque d'Arrière plan fait plus tôt, et le calque "Cadre", et il ne reste qu'à se lancer dans la dernière étape.
Étape 4 : Ajout du texte
Le texte, le plus simple. En règle générale, c'est assez simple tant que l'on ne cherche pas à se donner un style particulier, et n'avoir qu'un texte de couleur posé sur une image. Puis on peut s'amuser avec les polices d'écritures ("Fonts"), les styles de calque, etc. Leur donner de la consistance, de l'ombre, de la lumière aussi... Des textures, des formes...
Installation de nouvelles polices
Les polices déjà intégrées à Gimp ne sont pas suffisantes pour certains. Pour ceux qui veulent de belles polices, il faut les installer. Il faut d'abord localiser votre dossier ".gimp-2.x" (x étant la version de votre gimp). Si vous avez mis "Pikachu" comme nom de poste, vous le trouverez dans le dossier "Pikachu". (Ceci est valable que pour Win7 et Vista.)
Il n'est pas nécessaire de relancer Gimp pour les voir apparaître ; il vous suffit d'actualiser la liste des polices. Ceci ouvre une petite fenêtre pleine de polices, sous laquelle se trouve l'icône d'actualisation ; il ne vous reste qu'à cliquer dessus pour que le logiciel charge les nouvelles polices !
Utilisation de l'outil Texte
Maintenant que vous avez cliqué sur le "gros A", l'outil texte, il vous suffit de sélectionner la zone où mettre le texte, écrire, puis jouer avec les polices, couleurs, et taille.
Et voilà, maintenant il ne tient plus qu'à vous de vous entraîner avec les divers outils de Gimp, et trouver de nouvelles astuces pour étoffer vos bannières !
Intégrer votre overlay dans OBS
Une fois votre bannière, logo, ou toute autre image que vous souhaitez superposer sur votre stream Twitch créée, ouvrez le logiciel Open Broadcaster Software (OBS) et sélectionnez la scène à laquelle vous souhaitez ajouter l'overlay.
Ajouter l'image comme source
Si vous avez configuré plusieurs scènes pour votre stream dans OBS, vous devez avant tout vous assurer que la scène à laquelle vous souhaitez ajouter votre superposition est bien sélectionnée. Cliquez avec le bouton droit de la souris dans la zone "Sources" et cliquez sur "Ajouter > Image". Nommez votre source d'image et cliquez ensuite sur "Parcourir..." pour trouver l'overlay que vous souhaitez utiliser sur votre ordinateur.
Si vous souhaitez que l'overlay entier soit semi-transparente, réglez l'Opacité sur un nombre inférieur à 100. Lorsque vous avez fini de modifier les paramètres de l'image, cliquez sur OK.
Déplacer, réorganiser et redimensionner l'overlay
Cliquez sur "Preview Stream" pour voir à quoi ressemble votre stream. Vous devriez voir votre overlay, ainsi que d'autres éléments qui ont été ajoutés à votre stream Twitch.
Lorsque vous ajoutez un overlay à OBS pour la première fois, vous remarquerez probablement que l'image est trop grande et/ou n'est pas positionnée là où vous le souhaitez.
Pour redimensionner et modifier le positionnement de votre overlay, vous pouvez cliquer avec le bouton droit de votre souris sur l'overlay réelle dans votre fenêtre de prévisualisation, ou sur le fichier dans votre onglet "Sources". Dans le menu d'options qui apparaît lorsque vous faites un clic droit, survolez l'option "Transformer" et vous trouverez un tas d'options pour modifier votre overlay.
- Pour déplacer votre overlay, cliquez gauche et faites glisser l'image dans la fenêtre de prévisualisation.
- Pour redimensionner votre overlay, cliquez gauche et faites glisser l'un des petits cercles rouges qui entourent votre image.
Vous disposez également de quelques autres options de clic gauche pour redimensionner votre overlay :
- Si vous maintenez la touche Alt enfoncée et cliquez sur le bouton gauche de la souris tout en faisant glisser votre overlay, vous pourrez recadrer l'image.
- Si vous maintenez la touche Maj et cliquez sur le bouton gauche, vous pourrez redimensionner votre overlay sans que le format de l'image ne soit verrouillé.
Une fois que vous avez redimensionné et positionné votre overlay comme vous voulez qu'elle apparaisse sur votre flux, vous avez terminé ! Vous venez d'apprendre comment ajouter votre overlay Twitch à OBS.
Nommer son overlay
Une fenêtre s'ouvrira dans OBS avec les options "Créer nouveau" ou "Ajouter existant". Comme c'est la première fois que vous ajoutez un overlay à OBS, vous devez sélectionner l'option "Créer nouveau".
Dans cette fenêtre, vous avez également la possibilité de donner un nom à votre scène. Veillez donc à lui donner un nom qui vous permettra de l'identifier facilement dans votre onglet "Sources". Une fois que vous avez fait cela, cliquez sur OK.
Que faire si mon overlay n'apparaît pas dans OBS ?
Si votre overlay n'apparaît pas dans la fenêtre d'aperçu OBS lorsque vous l'avez ajoutée, cela peut être dû au fait que votre source d'image se trouve sous votre source de capture de jeu ou de capture d'affichage. Considérez chaque source comme un calque ! Les sources qui sont en haut de la liste apparaîtront au-dessus des sources qui sont en dessous d'elles. Donc, si vous avez une source qui occupe tout votre écran (comme votre capture d'écran ou de jeu), assurez-vous que chaque source que vous voulez voir (comme votre overlay) est listée au-dessus de ces sources plein écran.
GIMP - Comprendre les calques
Voilà comment utiliser votre overlay dans Twitch. Maintenant que vous savez comment configurer votre overlay, vous savez comment ajouter d'autres images que vous pourriez vouloir ajouter à votre stream Twitch.
Alternatives et fonctions avancées
Il est important de noter que la création d'overlays peut également impliquer l'utilisation d'écrans verts, une technique couramment utilisée dans la production vidéo pour remplacer l'arrière-plan. Bien que GIMP soit principalement un outil de retouche d'images, il peut être utilisé pour supprimer des arrière-plans verts, permettant ainsi d'intégrer des sujets dans de nouveaux environnements.
Suppression de fond vert avec GIMP
Pour supprimer un écran vert dans GIMP, vous pouvez suivre ces étapes :
- Ouvrez votre fichier média dans GIMP.
- Ajoutez un canal alpha au calque.
- Utilisez l'outil de sélection du premier plan pour sélectionner votre sujet.
- Passez le pinceau sur votre sujet pour affiner la sélection.
- Une fois le sujet séparé de l'arrière-plan, vous pouvez ajouter un nouvel arrière-plan.
Cependant, GIMP peut avoir ses limites, notamment pour le montage vidéo avancé. Des logiciels comme Wondershare Filmora sont plus adaptés pour gérer les effets d'écran vert dans les vidéos, offrant des outils dédiés comme la "Clé chromatique" pour supprimer instantanément l'écran vert.
Autres outils de conception graphique
Outre GIMP et Photoshop, d'autres outils peuvent être utiles pour la création de bannières et d'overlays :
- Canva : Idéal pour les débutants, offre des modèles préconçus et une interface intuitive.
- Streamlabs : Propose des overlays gratuits et des outils d'intégration directe avec OBS.
- Removebg : Un outil simple et rapide pour supprimer automatiquement les arrière-plans d'images.
- Picsart : Une plateforme d'édition photo en ligne avec diverses fonctionnalités et modèles.
La création d'une bannière ou d'un overlay Twitch réussi ne repose pas uniquement sur l'esthétique, mais aussi sur la lisibilité, la cohérence et la pertinence par rapport à votre contenu et à votre marque.
tags: #faire #une #banniere #twitch #avec #gimp