Wie kann man Twitch-Panels erstellen?

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Livestream auf Twitch einrichten? Sie möchten Twitch-Panels für Ihren Kanal erstellen? Ihre Panels befinden sich unter dem Stream. Dies ist ein anpassbarer Bereich, in dem Sie Inhalte für Ihr Publikum hinzufügen können. In diesem Tutorial erfahren Sie, wie Sie Twitch-Panels in Adobe Photoshop erstellen und wie Sie sie verwenden.

Warum also Twitch-Panels? Wozu dienen sie? Nun, der Platz unter Ihrem Stream kann ein großartiger Ort sein, um zusätzliche Informationen mit Ihrem Publikum zu teilen, auch wenn Sie nicht online sind. Dinge wie Ihr Stream-Zeitplan, Ihre Social-Media-Links, die Regeln Ihres Kanals und mehr können in diesem speziellen Bereich untergebracht werden.

Was für Sie und Ihren Kanal am besten ist, hängt weitgehend von Ihren Zielen ab! Die Entscheidung für die beste Richtung kann jedoch ein wenig überwältigend sein.

Placeit wird schnell zu einem meiner Lieblingsorte für Inspiration und schnelle Designmodelle. Es hat auch eine ganze Reihe von Twitch-bezogenen Inhalten – von Stream-Overlays bis hin zu Panels. Es ist großartig, um Ideen für Twitch-Panels zu sammeln! Sie können Designs durchsuchen und direkt in Ihrem Browser anpassen – und damit meine ich nicht nur den Text. Ändern Sie die Farben, verschieben Sie Teile des Designs und vieles mehr! Wenn Sie nach einem einfachen Twitch-Panel-Maker suchen, sind Sie hier richtig!

Und das endet nicht mit Panels. Placeit bietet eine ganze Reihe lustiger, farbenfroher und auffälliger Stream-Overlays, die sich perfekt für Ihre Lieblingsversion von OBS eignen.

Egal, ob Sie nach Inspiration suchen oder nach einem vollständig anpassbaren Online-Ersteller von Twitch-Panels, Placeit könnte genau das sein, wonach Sie suchen.

Lassen Sie uns jetzt eintauchen und Twitch-Panels von Grund auf neu erstellen!

Was werden Sie brauchen?

Die folgenden Assets werden in diesem Tutorial verwendet:

Denken Sie daran, dass Ihre Twitch-Panels Ihren Kanal widerspiegeln sollten. Welche Ästhetik passt am besten zu Ihren Stream-Zielen?

1. Wie kann man benutzerdefinierte Twitch-Panel-Grafiken erstellen?

Schritt 1

Beginnen wir mit Adobe Photoshop. Erstellen Sie ein neues Dokument.

Unser Dokument soll 350 Pixel breit sein – die Twitch-Panelgröße wird auf 350 Pixel Breite skaliert. Das heißt, wenn Sie etwas Größeres erstellen oder hochladen, wird es an diese Größe angepasst. Meiner Meinung nach ist es oft sinnvoller, nur mit der vorgegebenen Größe zu arbeiten – in diesem Fall 350 Pixel.

Dies bedeutet jedoch auch, dass wir eine gewisse Flexibilität bei der Höhe haben! Wir könnten zum Beispiel mit einem längeren Bild oder etwas Kurzem arbeiten. Es hängt alles davon ab, welche Informationen Sie teilen möchten und wie Sie sie teilen möchten. Twitch-Infofelder können beispielsweise von kleineren Bildern und mehr Text profitieren. Ein Spendenpanel könnte von einem größeren Image profitieren.

Ich werde für meine kleineren Twitch-Panels 350 Pixel breit und 125 Pixel hoch verwenden.

Wählen Sie Transparent als Hintergrundinhalt aus.

Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie auf Erstellen.

Schritt 2

Beachten Sie den grau karierten Hintergrund in unserem neuen Dokument. Auf diese Weise zeigt Photoshop Transparenz an. Wenn wir dieses Bild beispielsweise als transparentes PNG speichern, würde dieser karierte Bereich transparent und "leer" erscheinen.

Ich werde eine Form erstellen, die nicht unsere gesamte Leinwand ausfüllt und einen Teil dieses Raums transparent lässt.

Beginnen wir mit dem Erstellen einer neuen Ebene.

Gehen Sie zu Ihrem Ebenen-Bedienfeld. Wenn Sie dieses Bedienfeld nicht sehen, gehen Sie oben auf dem Bildschirm zu Fenster > Ebenen.

Erstellen Sie eine neue Ebene, indem Sie auf das Symbol für neue Ebene klicken, wie unten hervorgehoben.

Beachten Sie, dass Sie Ihre Ebenen umbenennen können, indem Sie im Ebenenbedienfeld auf den Namen der Ebene klicken. Ich empfehle dies oft, weil es hilft, Ihre Arbeit zu organisieren – insbesondere, wenn Sie am Ende zehn, zwanzig oder mehr Ebenen haben!

Schritt 3

Twitch hat sowohl ein helles als auch ein dunkles Thema. Das bedeutet, dass alle hier verwendeten Bilder sowohl auf einem hellen als auch auf einem dunklen Hintergrund funktionieren müssen. Unsere Twitch-Panels können auch transparent sein, daher ist es auch hier wichtig, dass die Sichtbarkeit sowohl auf dunklen als auch auf hellen Hintergründen stark ist.

Ich beginne gerne mit einem hellen Hintergrund und einem dunklen Hintergrund, damit ich leicht zwischen den beiden wechseln und meine Arbeit testen kann. Verwenden wir dazu unsere zwei Ebenen. Ich habe meine Ebenen Heller Hintergrund und Dunkler Hintergrund umbenannt.

Verwenden Sie das Füll-Werkzeug, um jede Ebene mit einer anderen Farbe zu füllen – Weiß auf der Ebene „Heller Hintergrund“ und Dunkelgrau auf der Ebene „Dunkler Hintergrund“.

Sie sind sich nicht sicher, wie Sie Ihre aktiven Farben ändern sollen? Die Vordergrund- und Hintergrundfarben befinden sich in Ihrem Werkzeuge-Bedienfeld. Klicken Sie einfach auf die farbigen Blöcke, um den Farbwähler zu öffnen und eine neue Farbe auszuwählen.

Schritt 4

Wählen Sie nun in Ihren Formwerkzeugen das Abgerundete-Rechteck-Werkzeug aus. Wenn das Abgerundete-Rechteck-Werkzeug nicht angezeigt wird, klicken und halten Sie das aktive Formwerkzeug, um diesen Teil Ihrer Werkzeuge zu erweitern. Sie werden sehen, Sie haben viele verschiedene Formen zur Auswahl!

Wenn das Werkzeug ausgewählt ist, sehen Sie sich Ihre Optionen oben auf dem Bildschirm an. Dort können Sie den Eckenradius Ihres Rechtecks vor dem Zeichnen anpassen. So wird das Rechteck abgerundet. Ich bin mit 25 Pixeln gegangen.

Klicken und ziehen Sie dann, um eine Form auf unserer neuen Ebene zu zeichnen. Sie können diese Form in jeder beliebigen Farbe gestalten, die mit unserem hellen und dunklen Hintergrund funktioniert. Ich ging mit einem hellblauen!

Sie können Ihre Form mit dem Verschieben-Werkzeug anpassen (schalten Sie in Ihren Optionen die Option Transform-Steuerelemente anzeigen ein, um die Größe zu ändern).

Schritt 5

Lassen Sie uns diesen Vorgang nun wiederholen, jedoch mit einer Ellipse.

Erstellen Sie eine neue Ebene. Wählen Sie dann das Ellipsenwerkzeug aus.

Klicken und ziehen Sie, um eine Ellipse zu erstellen. Positionieren Sie es auf unserem abgerundeten Rechteck.

Schritt 6

Ich möchte diese Formen zusammenführen, damit sie weitgehend eine Form sind.

Wählen Sie dazu beide Formebenen aus – Sie können dies tun, indem Sie beim Klicken die Strg- (auf dem PC) oder die Befehlstaste (auf dem Mac) gedrückt halten, um mehrere Ebenen gleichzeitig auszuwählen.

Sobald Sie diese beiden Formebenen ausgewählt haben, klicken Sie mit der rechten Maustaste (auf dem PC) oder bei gedrückter Strg-Taste (auf dem Mac). Wählen Sie Formen zusammenführen aus der resultierenden Liste der Optionen.

Schritt 7

Danach wurden unsere Formen zu einer Form zusammengefügt, wie unten zu sehen ist.

Schritt 8

Ich dachte, es könnte Spaß machen, hier einen Avatar auszuprobieren – also habe ich einen Avatar-Hersteller verwendet, um einen süßen Charakter zu erstellen! Sie können es gleich hier überprüfen. Es erfordert Adobe Illustrator, ist aber super einfach zu bedienen (und macht viel Spaß!).

Nachdem ich meinen Charakter erstellt hatte, kopierte ich ihn und fügte ihn in mein Dokument ein – beachte, dass es meine oberste Ebene ist. Es ist über den Formen, die wir zuvor erstellt haben.

Grafischer Inhalt ist optional, kann aber viel dazu beitragen, wie du deinen Kanal präsentierst. Werden Sie ein Logo verwenden? Ein Avatar oder Charakter? Was verbinden Sie visuell mit Ihrem Kanal und Ihrer Arbeit?

Schritt 9

Ich wollte jedoch, dass der Charakter in der Form bleibt. Schnittmasken sind genau das, was der Arzt dafür verordnet hat!

Um eine Schnittmaske anzuwenden, wählen Sie die Ebene aus. Klicken Sie dann mit der rechten Maustaste (auf dem PC) oder bei gedrückter Strg-Taste (auf dem Mac). Wählen Sie Schnittmaske erstellen aus der resultierenden Optionsliste.

Beachten Sie, dass sich die Grafik hier über der Form befinden muss – wir möchten, dass die Grafik auf den Raum der Form beschränkt ist.

Schritt 10

Voila! Das Kunstwerk ist auf die Form beschränkt, wie unten gezeigt.

Schritt 11

Als Nächstes fügen wir unserem Panel mit dem Textwerkzeug einen Typ hinzu.

Klicken Sie bei ausgewähltem Textwerkzeug im Werkzeug-Bedienfeld einfach auf Ihre Leinwand, um mit der Eingabe zu beginnen. Ihr Text wird automatisch auf einer neuen Ebene platziert.

Ich habe die Schriftart Philadelphia Signature verwendet und mich entschieden, diese zu einem Twitch About Me-Panel zu machen.

Schritt 12

Als nächstes fügen wir unserer kombinierten Form einen Schlagschatten hinzu.

Wählen Sie dazu die Ebene aus, die unsere hellblaue Form enthält. Klicken Sie dann im Ebenen-Bedienfeld auf Ebenenstile hinzufügen.

Wählen Sie im resultierenden Menü Schlagschatten.

Schritt 13

Hier sind die Optionen für den Ebenenstil – und die Werte, für die ich mich entschieden habe.

Der Mischmodus ist auf Normal eingestellt – er wird als normale Volltonfarbe angezeigt.

Die Deckkraft beträgt 100%.

Passen Sie Winkel, Abstand, Ausbreitung und Größe nach Ihren Wünschen an. Ich habe mich dafür entschieden, meine Distanz bei 3, Spread bei 100% und meine Größe bei 2 zu halten.

Ich empfehle, die Vorschau einzuschalten, damit Sie in einer Vorschau sehen können, wie sich diese Werte auf Ihre Arbeit auswirken. Meiner Meinung nach ist dies der beste Weg, um die visuelle Wirkung dieser Werte auf Ihre Arbeit zu erfahren – sehen Sie sich eine Live-Vorschau an und probieren Sie sie aus!

Schritt 14

Und hier ist unser Schlagschatten, wie unten gezeigt!

Beachten Sie, dass in meinen Ebenen "Effekte" und "Schlagschatten" unter der Ebene angezeigt werden, auf die diese Effekte angewendet wurden. Doppelklicken Sie darauf, um Ihren Ebenenstil zu bearbeiten.

Wir können ihre Sichtbarkeit auch ein- und ausschalten, indem wir auf das Augensymbol neben jedem Wort klicken, genauso wie wir die Sichtbarkeit auf der gesamten Ebene umschalten können.

Schritt 15

Versuchen wir, unserer Arbeit einen weiteren Effekt hinzuzufügen. Ich möchte hier einen subtilen Farbverlauf hinzufügen.

Zuerst werde ich eine zusätzliche Schnittmaske erstellen. Sie können eine neue Ebene erstellen und dann den gleichen Vorgang wie zuvor ausführen: Klicken Sie mit der rechten Maustaste (auf dem PC) oder bei gedrückter Strg-Taste (auf dem Mac) und wählen Sie dann Schnittmaske erstellen.

Wenn Sie jedoch die Formebene ausgewählt haben und eine neue Ebene erstellen, wird sie automatisch zu einer Schnittmaske zwischen unseren anderen Schnittmasken. Praktisch!

Schritt 16

Wählen Sie die Farben aus, die Sie verwenden möchten. Ich ging mit einem weichen, hellblauen und einem hellvioletten. Unser Farbverlauf geht allmählich von dieser ersten Farbe zur zweiten über.

Verwenden Sie dann das Verlaufswerkzeug für unsere neue Schnittmaske. Beachten Sie, wie der Farbverlauf innerhalb der Form begrenzt ist.

Schritt 17

Als letzten Schliff habe ich beschlossen, die Farbe des Shirts meines Avatars zu ändern! Ich habe das Füll-Werkzeug verwendet, um diese Farbe einfach zu füllen.

Denken Sie daran, wenn Sie ein Werkzeug verwenden, stellen Sie sicher, dass Sie die richtige Ebene ausgewählt haben!

Schritt 18

Wenn Sie mit Ihrer Arbeit zufrieden sind, denken Sie daran, zu speichern!

Ich empfehle, auch eine Kopie Ihrer Arbeit zu speichern, damit wir mehrere Panels erstellen können, ohne sich Gedanken über das Überschreiben unserer Originaldatei machen zu müssen. Zum Beispiel möchten Sie vielleicht ein Über mich Twitch-Panel, ein Discord-Twitch-Panel oder vielleicht etwas für Ihren YouTube-Kanal. Wir können unser Original im Wesentlichen als Twitch-Panel-Vorlage speichern – und für andere Panels wieder verwenden.

Einige Ihrer Panels könnten davon profitieren, einheitlich auszusehen. In diesem Fall kann das Erstellen zusätzlicher Bedienfelder so einfach sein wie das Bearbeiten Ihres Textes. Beginnen wir dort!

Zuerst habe ich meine Textebene „About Me“ kopiert. Sie können die Ebene nach unten auf das Symbol „Neue Ebene“ ziehen, um Ebenen einfach zu duplizieren – oder klicken Sie mit der rechten Maustaste (auf einem PC) oder bei gedrückter Strg-Taste (auf einem Mac) und wählen Sie dann Ebene duplizieren.

Um eine Textebene zu bearbeiten, klicken Sie einfach mit dem Textwerkzeug. Dann habe ich meinen Text ersetzt. Voila! Jetzt habe ich ein zweites Panel.

Schritt 19

Einige Ihrer Panels können jedoch von mehr Variation als einer Textbearbeitung profitieren. Vielleicht möchten Sie ein Twitch-Panel verfolgen oder etwas, das die Zuschauer dazu ermutigt, Ihre Arbeit an anderer Stelle zu abonnieren.

In diesem Beispiel habe ich eine Variante unserer Arbeit für einen YouTube-Kanal erstellt.

Sie können das Verschieben-Werkzeug verwenden, um Ihre Inhalte einfach zu verschieben und neu anzuordnen. Ich wollte, dass sich dieses Panel von den anderen abhebt, also habe ich ein Social-Media-Symbol verwendet, um visuell zu kommunizieren, dass dieser Streamer auf YouTube präsent ist.

Denken Sie an Speichern unter – speichern Sie Kopien Ihrer Arbeit, anstatt das Original zu überschreiben!

Schritt 20

Aber sagen wir, wir wollen die Dinge wirklich durcheinander bringen. Vielleicht möchten wir das Twitch-Panel, das wir entworfen haben, nehmen und etwas ganz anderes daraus machen. Vergessen Sie nicht zu speichern, bevor Sie fortfahren – auch hier empfiehlt es sich, eine Kopie zu speichern!

Passen wir unsere Leinwandgröße an. Gehen Sie dazu zu Bild > Leinwandgröße. Wählen Sie Pixel als Maßeinheit (je nach Standardeinstellung können Sie beispielsweise Zoll oder Zentimeter anzeigen).

Denken Sie daran, dass unsere Twitch-Panel-Dimensionen absichtlich auf eine Breite von 350 Pixeln festgelegt sind – darauf wird Twitch unsere Arbeit anpassen. Lassen wir also die Breite in Ruhe. Für die Höhe geben wir unserer Arbeit jedoch etwas mehr Raum. Dieses Panel wird größer sein als unsere anderen.

Ich habe die Höhe auf 260 Pixel geändert.

Schritt 21

Mit meiner größeren Leinwandgröße habe ich Teile meines Designs neu angeordnet und überarbeitet. Zum Beispiel ging ich zurück und ließ meine Ellipse und mein abgerundetes Rechteck getrennt. Ich habe die gleichen Verlaufsfarben verwendet.

Da dieses Panel stärker variieren wird als meine anderen, habe ich mich entschieden, es für mein Twitch-Spendenpanel zu verwenden.

Schritt 22

Erinnern Sie sich an unseren Schlagschatten?

Diesmal habe ich beschlossen, einen Inner Shadow auszuprobieren – dies ist ein anderer Ebenenstil und funktioniert fast genauso! Sie finden es wie zuvor unter Ebenenstil hinzufügen in Ihrem Ebenen-Bedienfeld!

Diese Ebene ist ein weißes abgerundetes Rechteck mit dem Mischmodus auf Farbig nachbelichten eingestellt. Dadurch entsteht eine Überlagerung, die der Innenseite meines farbigen Rechtecks diesen inneren Schatten verleiht. Versuchen Sie es!

Sie sind mit Ebenenstilen nicht vertraut und möchten mehr erfahren? Schauen Sie sich dieses Tutorial an! Mit Ebenenstilen können Sie einige wirklich coole Dinge tun.

Ebenenstile

Was sind Ebenenstile?

Monika Zagrobelna

Schritt 23

Schließlich wollte ich ein paar süße letzte Schliffe. Viel Spaß mit Ihren Twitch-Panels – erwäge, Grafiken, Schriftarten und Farben hinzuzufügen, die Ihr am besten widerspiegeln – Ihren Stream, Ihre Persönlichkeit und Ihren Kanal!

Ich habe diese Herzsymbole und die Schriftart Knicknack verwendet, um meinem Panel-Design einige Extras hinzuzufügen.

Denken Sie auch hier daran, dass der Hintergrund hier transparent ist!

Stellen Sie sicher, dass Sie Speichern unter wählen, um Kopien Ihrer Arbeit zu speichern! Überschreiben Sie nicht Ihr Original oder Varianten Ihres Designs!