Zum Hauptinhalt springen
ToolsByUs

Twitch-Sub-Badges skalieren

Twitch-Abonnenten-Abzeichen benötigen drei quadratische Größen – 72, 36 und 18 Pixel – jeweils unter 25 KB. Schneiden Sie einmal hier zu, exportieren Sie alle drei als ZIP und sehen Sie, wie jede Datei gegen das Limit geprüft wird. Die 18-Pixel-Version ist diejenige, die entscheidet, ob das Design funktioniert.

Nur lokal

PNG, JPG, WebP oder GIF hierher ziehen

oder irgendwo auf der Seite ablegen · Datei auswählen · 100 MB

Unterstützt: PNG, JPG, JPEG, WebP, GIF, AVIF

Twitch-Sub-Badges skalieren erklärt

Abonnenten-Abzeichen sind die kleinen Markierungen neben dem Namen eines Zuschauers im Chat, und sie verwenden ihre eigene Satzgrößen: 72 mal 72, 36 mal 36 und 18 mal 18 Pixel. Es sind nicht die Emote-Größen, und das Hochladen von Emote-Dateien in das Abzeichen-Formular erzeugt einen Satz, der überall subtil falsch ist.

Achtzehn Pixel sind die entscheidende Größe. Das ist, was neben einem Benutzernamen im Chat erscheint, und bei achtzehn Pixeln ist eine Illustration keine Illustration mehr – es ist eine Form und eine Farbe. Abzeichen, die gut lesbar sind, sind fast immer eine einzelne, fette Form: ein Herz, eine Krone, ein Buchstabe, ein einfaches Tierhaupt ohne jegliche Innendetails.

Diese Seite enthält die drei Abzeichenrahmen, exportiert sie zusammen als ZIP und misst jede Datei gegen Twitchs 25-KB-Limit. Alles läuft in Ihrem Browser, sodass ein in Auftrag gegebenes und noch nicht angekündigtes Abzeichen-Set auf Ihrem Rechner bleibt.

Emotes verwenden ein anderes Größentrio, daher der Emote-Resizer ist die Seite dafür.

Wenn das Abzeichen in einem Format ankommt, das der Browser nicht öffnen kann, wie z. B. eine mehrschichtige Datei, es zuerst in PNG umwandeln.

Die Abzeichen-Größen und wo jede erscheint

Drei Größen, jeweils einen Zweck. Die kleinste ist die, die Zuschauer tatsächlich tausendfach pro Abend sehen.

GrößeErscheint inWas sich bei dieser Größe gut liest
72 × 72Abzeichen-Einstellungen und VorschauenVollständige Kunstwerke, einschließlich mäßiger Details
36 × 36Größere Chat-Layouts und OverlaysDie Hauptform und ihre Umrandung
18 × 18Neben einem Benutzernamen im ChatEine Silhouette, eine oder zwei Farben

Das Design für achtzehn Pixel

Ein achtzehn-Pixel-Quadrat hat insgesamt 324 Pixel. Es ist Platz für eine Idee. Alles mit einem Inneren – ein Gesicht mit Augen, ein Logo mit einer Gegenform, eine Zahl mit zwei Ziffern – kollabiert zu einem Fleck.

Arbeiten Sie andersherum: Skizzieren Sie das Abzeichen zuerst bei 18 Pixeln, entscheiden Sie, ob es lesbar ist, und fügen Sie dann die Details hinzu, die die 72-Pixel-Version tragen kann. Die Stufen eines Abzeichen-Satzes sollten sich auch durch Form oder Farbe statt durch Details unterscheiden, weil Detail das Erste ist, was die kleine Größe entfernt.

  • Eine Silhouette, keine Innendetails kleiner als etwa ein Viertel des Abzeichens.
  • Hoher Kontrast sowohl gegen Chats von Twitch als auch gegen ein helles Theme.
  • Unterscheiden Sie Stufen durch Farbe und Umrandungsstärke, nicht durch hinzugefügte Verzierungen.
  • Vermeiden Sie dünne Umrandungen: Ein Pixel bei 72 ist ein Viertel Pixel bei 18, was nichts ist.

Das 25-KB-Limit in der Praxis

Für ein gut gestaltetes Abzeichen ist das Limit überhaupt keine Einschränkung: Flache Farbe bei 72 mal 72 Pixeln komprimiert sich als PNG auf ein paar Kilobyte. Es wird nur relevant, wenn die Kunst als gerendertes 3D-Objekt, ein Foto oder eine Illustration mit vielen Gradienten ankommt.

Wenn das Ihre Ausgangslage ist, ermöglicht der Export als WebP der Qualitäts-Suche, eine Version zu finden, die passt. Aber ein Abzeichen, das Gradienten benötigt, um zu funktionieren, ist meistens auch ein Abzeichen, das bei 18 Pixeln nicht lesbar ist, daher warnt das Limit Sie oft vor dem Design und nicht vor dem Encoder.

Was in das Upload-Formular geht

Twitch verlangt ein Abzeichen pro Abonnenten-Stufe und pro Meilenstein des Monats, jeweils mit den drei Größen. Die ZIP von dieser Seite enthält eine Datei pro Größe, benannt nach Dimension, sodass die Zuordnung zu den drei Slots des Formulars eindeutig ist. Wiederholen Sie den Zuschnitt für die Kunst jeder Stufe.

Häufig gestellte Fragen

Wie groß ist ein Twitch-Sub-Abzeichen?

Drei Größen sind erforderlich: 72 mal 72, 36 mal 36 und 18 mal 18 Pixel. Alle sind quadratisch und müssen unter 25 KB groß sein. Sie sind absichtlich anders als die Emote-Größen, daher passt ein Satz, der für Emotes exportiert wurde, nicht in das Abzeichen-Upload-Formular.

Warum sieht mein Abzeichen wie ein Fleck im Chat aus?

Weil der Chat die 18-Pixel-Version rendert, und das sind insgesamt 324 Pixel. Innendetails, dünne Umrandungen und alles mit einer Gegenform verschmelzen zu einer Masse. Ein lesbares Abzeichen ist eine einzelne Silhouette in ein oder zwei hochkontrastigen Farben.

Sollten sich Abzeichen-Stufen voneinander unterscheiden?

Durch Farbe und Umrandungsstärke, nicht durch hinzugefügte Verzierungen. Bei 18 Pixeln ist eine zusätzliche Verzierung unsichtbar, daher sehen sich Sätze, die Stufen durch mehr Details unterscheiden, im Chat identisch aus. Die Änderung des Farbtons und der Gesamtform ist, was ein Zuschauer tatsächlich unterscheiden kann.

Haben Abzeichen die gleiche Dateigrößenbegrenzung wie Emotes?

Ja, 25 KB pro Datei. Das ist für Abzeichen-Kunstwerke selten ein Problem, was aus Notwendigkeit meist flach und einfach ist. Wenn es doch relevant ist, ist die Ursache normalerweise ein gerendertes oder fotografisches Ausgangsmaterial – und dieses Ausgangsmaterial hat bei 18 Pixeln Legibilitätsprobleme, unabhängig davon.

Kann ich meine Emote-Kunst als Abzeichen wiederverwenden?

Sie können daraus zuschneiden, aber die Größen sind unterschiedlich und die Lesbarkeitsanforderung ist höher. Ein Emote wird bei 28 Pixeln im Chat gesehen; ein Abzeichen bei 18, neben Text und nicht allein. Kunst, die nur als Emote funktioniert, benötigt meist eine Vereinfachung, bevor sie als Abzeichen funktioniert.

Wird meine Abzeichen-Kunst beim Export hier hochgeladen?

Nein. Der Zuschnitt, die drei Größenänderungen, die Kodierung und die ZIP werden alle in diesem Browser-Tab erzeugt. Es wird nichts übertragen, es gibt kein Konto, und Sie können es in DevTools überprüfen, bevor Sie es mit Kunst vertrauen, die Sie noch nicht veröffentlicht haben.

ToolsByUs-Team · Wie wir unsere Tools prüfen