Aller au contenu principal
ToolsByUs

Créer des badges d’abonné Twitch

Les badges de subscriber Twitch nécessitent trois tailles carrées — 72, 36 et 18 pixels — chacune en dessous de 25 KB. Recadrez une fois ici, exportez les trois dans un ZIP, et voyez chaque fichier mesuré contre la limite. La version de 18 pixels est celle qui détermine si le design fonctionne.

100 % local

Déposez un PNG, JPG, WebP ou GIF

ou n’importe où sur la page · Choisir un fichier · 100 Mo

Acceptés : PNG, JPG, JPEG, WebP, GIF, AVIF

Créer des badges d’abonné Twitch en clair

Les badges de subscriber sont les petites marques à côté du nom d’un téléspectateur dans le chat, et ils utilisent leur propre ensemble de tailles : 72 par 72, 36 par 36 et 18 par 18. Ils ne sont pas de la même taille que les emotes, et envoyer des fichiers d’emote dans le formulaire de badge produit un ensemble qui est subtilement incorrect partout.

Dix-huit pixels, c’est la taille qui compte. C’est ce qui apparaît à côté d’un nom d’utilisateur dans le chat, et à dix-huit pixels, une illustration n’est pas une illustration — c’est une forme et une couleur. Les badges qui se lisent bien sont presque toujours une seule forme audacieuse : un cœur, une couronne, une lettre, une tête d’animal simple sans aucun détail intérieur.

Cette page contient les trois cadres de badge, les exporte ensemble comme un ZIP, et mesure chaque fichier contre la limite de 25 KB de Twitch. Tout s’exécute dans votre navigateur, donc un ensemble de badge commandé et pas encore annoncé reste sur votre appareil.

Les emotes utilisent un trio de tailles différent, donc le redimensionneur d’emote est la page pour ceux-ci.

Si le badge est arrivé dans un format que le navigateur ne peut pas ouvrir, comme un fichier en couches, convertissez-le en PNG d’abord.

Les tailles de badge et où chacune apparaît

Trois tailles, une fonction chacune. La plus petite est celle que les téléspectateurs voient réellement des milliers de fois par soir.

TailleApparaît dansCe qui se lit à cette taille
72 × 72Paramètres et aperçus de badgeŒuvre complète, y compris un détail modéré
36 × 36Mises en page de chat plus grandes et surplombsLa forme principale et son contour
18 × 18À côté d’un nom d’utilisateur dans le chatUn seul contour, une ou deux couleurs

Concevoir pour dix-huit pixels

Un carré de dix-huit pixels contient 324 pixels au total. Il y a de la place pour une seule idée. Tout ce qui a un intérieur — un visage avec des yeux, un logo avec un contreforme, un nombre avec deux chiffres — se transforme en une boule informe.

Procédez dans l’autre sens : esquissez le badge à 18 d’abord, décidez s’il est lisible, puis ajoutez le détail que la version de 72 pixels peut supporter. Les niveaux d’un ensemble de badge devraient aussi différer par forme ou couleur plutôt que par détail, car le détail est la première chose que la petite taille supprime.

  • Un seul contour, aucun détail intérieur plus petit qu’environ un quart du badge.
  • Contraste élevé contre le chat sombre de Twitch et un thème clair.
  • Différenciez les niveaux par couleur et épaisseur de contour, et non par ornement ajouté.
  • Évitez les contours fins : un pixel à 72 représente un quart de pixel à 18, ce qui est rien.

La limite de 25 KB en pratique

Pour un badge bien conçu, la limite n’est pas du tout une contrainte : une couleur plate à 72 pixels carrés se compresse à quelques kilo-octets en PNG. Elle ne pose problème que lorsque l’œuvre arrive comme un objet 3D rendu, une photographie ou une illustration riche en dégradés.

Si c’est ce que vous avez, exporter en WebP permet au moteur de qualité de trouver une version qui convient. Mais un badge qui a besoin de dégradés pour fonctionner est généralement un badge qui ne sera pas lisible à 18 pixels non plus, donc la limite vous avertit souvent sur le design plutôt que sur l’encodeur.

Ce qui va dans le formulaire d’envoi

Twitch demande un badge par niveau de subscriber et par jalon mensuel, chacun avec les trois tailles. Le ZIP de cette page contient un fichier par taille, nommé par dimension, donc les associer aux trois emplacements du formulaire est sans ambiguïté. Répétez le recadrage pour l’œuvre de chaque niveau.

Questions fréquentes

Quelle est la taille d’un badge de subscriber Twitch ?

Trois tailles sont requises : 72 par 72, 36 par 36 et 18 par 18 pixels. Toutes sont carrées et toutes doivent être sous 25 KB. Elles sont délibérément différentes des tailles d’emote, donc un ensemble exporté pour les emotes ne correspondra pas au formulaire d’envoi de badge.

Pourquoi mon badge ressemble-t-il à une boule informe dans le chat ?

Parce que le chat affiche la version de 18 pixels, et cela fait 324 pixels au total. Le détail intérieur, les contours fins et tout ce qui a une contreforme fusionnent en une seule masse. Un badge qui se lit est un seul contour dans une ou deux couleurs à contraste élevé.

Comment les niveaux de badge devraient-ils différer les uns des autres ?

Par couleur et par épaisseur de contour, et non par ornement ajouté. À 18 pixels, un embellissement supplémentaire est invisible, donc un ensemble qui distingue les niveaux avec plus de détail a l’identique dans le chat. Changer la teinte et la forme globale est ce qu’un téléspectateur peut réellement distinguer.

Les badges ont-ils la même limite de taille de fichier que les emotes ?

Oui, 25 KB par fichier. C’est rarement un problème pour l’œuvre de badge, qui est généralement plate et simple par nécessité. Lorsque cela pose problème, la cause est normalement une source rendue ou photographique — et cette source aura des problèmes de lisibilité à 18 pixels de toute façon.

Puis-je réutiliser mon œuvre d’emote comme badge ?

Vous pouvez en recadrer une partie, mais les tailles diffèrent et le seuil de lisibilité est plus élevé. Un emote est vu à 28 pixels dans le chat ; un badge à 18, à côté du texte et non seul. L’œuvre qui survit à peine comme emote a généralement besoin d’être simplifiée avant de fonctionner comme badge.

Mon œuvre de badge est-elle envoyée lorsque j’exporte ici ?

Non. Le recadrage, les trois redimensionnements, l’encodage et le ZIP sont tous produits dans cet onglet de navigateur. Rien n’est transmis, il n’y a pas de compte, et vous pouvez le vérifier dans DevTools avant de lui faire confiance avec une œuvre que vous n’avez pas publiée.

Équipe ToolsByUs · Comment nous vérifions nos outils