So erstellen Sie ein Twitch-Overlay mit Photoshop

Twitch hat das Gesicht des Gamings in den letzten Jahren verändert, wobei die besten Twitch-Streamer mit ihren Lieblingsspielen viel Geld verdienen. Für viele Zuschauer ist Twitch wie eine neue Form von Social Media und trotz der jüngsten Änderungen der Twitch-Regeln ist seine Popularität größer denn je.

Wenn du mit Streaming Geld verdienen willst, musst du Aufbau einer großen Zuschauerzahl auf Twitch , und ein wichtiger Teil davon ist, dass Ihr Stream professionell aussieht.

In diesem Artikel zeigen wir Ihnen, wie Sie ein einfaches Twitch-Overlay mit Photoshop. Und obwohl dieses Overlay für Minecraft ist, kann es so modifiziert werden, dass es mit jedem anderen Spiel funktioniert. Und es funktioniert auch perfekt zum Streamen auf YouTube Gaming oder sogar Mixer, Microsofts Alternative zu Twitch.

Einstieg

Bevor wir beginnen, schauen wir uns an, womit wir heute fertig werden:

Alles in diesem Tutorial ist relativ einfach, aber wenn Sie neu in Photoshop sind, kann es hilfreich sein, zuerst unser Photoshop-Ebenen-Tutorial zu lesen. Wenn Sie nach einer kostenlosen Alternative zu Photoshop suchen, ist GIMP unglaublich leistungsstark.

Wenn Sie ein Twitch-Overlay ohne Photoshop erstellen möchten, ist dieses Projekt in GIMP vollständig möglich. Da die Tools, die Sie verwenden werden, ein wenig anders sein werden, empfehle ich Ihnen, unsere Anleitung zu GIMP Erste.

Lassen Sie uns nun einen Blick darauf werfen, wie Sie mit Photoshop ein Twitch-Overlay erstellen.

Erstellen der Leinwand

Um mit der Erstellung des Overlays zu beginnen, öffnen Sie Photoshop und erstellen Sie ein neues Bild mit der gleichen Größe wie Ihre Bildschirmauflösung.

Da wir nun ein leeres Dokument haben, benötigen wir eine Anleitung, um unser Overlay zu erstellen. Ich würde vorschlagen, einen Screenshot Ihres gewählten Spiels zu machen und ihn in Photoshop zu laden, indem Sie auf klicken Datei & Platzieren und wählen Sie Ihr Bild aus. Dehnen Sie das Bild auf die volle Größe der Leinwand aus. Jetzt können wir mit der Erstellung unserer Overlay-Elemente beginnen.

Hinzufügen einer oberen Leiste

Erstellen Sie eine neue Ebene und benennen Sie sie Top-Banner . Wähle aus Rechteckwerkzeug aus dem linken Seitenmenü. Öffnen Sie im selben Menü die Farbauswahl und wählen Sie Ihre Hintergrundfarbe.

Klicken und ziehen Sie nun über den oberen Rand Ihrer neuen Ebene, um ein oberstes Banner zu erstellen. Machen Sie sich keine Sorgen, wenn Sie die Leinwandkanten überlappen, das Rechteck sollte mit der Seite einrasten.

Um diesem Rechteck einen Rahmen zu geben, klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie Fülloptionen . Auswählen Schlaganfall aus dem angezeigten Menü und stellen Sie die Strichstärke und -farbe so ein, wie es für Sie funktioniert. In diesem Fall sieht 10px breit mit einer dunkelroten Farbe gut aus. Klicken Sie auf OK und wählen Sie Ihre Ebene aus. Schalten Sie das Verschieben-Tool ein, indem Sie den Buchstaben drücken V und verschieben Sie das obere Banner nach oben, damit es genug Platz hat, um später Text hinzuzufügen, aber nicht zu viel vom Spielbildschirm verdeckt.

Wählen Sie schließlich die oberste Bannerebene aus und reduzieren Sie deren Deckkraft auf etwa 75 Prozent. Dies lässt das Spiel leicht durchscheinen und verleiht dem Overlay einen dynamischeren Effekt.

Sie haben einen guten Anfang gemacht und können das, was Sie bisher getan haben, verwenden, um die beiden unteren Banner zu erstellen.

Die unteren Banner

Anstatt die gleiche Arbeit für diese unteren Banner noch einmal auszuführen, klicken Sie einfach mit der rechten Maustaste auf das Top-Banner und wählen Sie Ebene duplizieren . Benennen Sie diese neue Ebene Unten rechts und benutze die Verschieben-Werkzeug ( V auf der Tastatur), verschieben Sie es nach rechts unten auf Ihrem Bildschirm. Achte darauf, dass sie sich nicht mit der Symbolleiste im Spiel überschneidet, und verwende die Strg gedrückt, während Sie ziehen, um es genauer zu platzieren.

Um die untere linke Leiste zu erstellen, folgen Sie einfach der gleichen Methode wie oben und verschieben Sie sie auf die untere linke Seite des Bildschirms. Unser grundlegendes Overlay ist jetzt fertig, sodass wir einen Rahmen für unsere Kamera hinzufügen können.

Kamerarahmen

Erstellen Sie eine neue Ebene und nennen Sie sie Rahmen . Wähle aus Rechteckwerkzeug erneut und erstellen Sie ein perfektes Quadrat, indem Sie die -Taste gedrückt halten Schicht während Sie den Mauszeiger ziehen. Machen Sie sich keine Sorgen um die Farbe des Quadrats, wir werden die Füllung später entfernen.

Um den Rahmen zu erstellen, klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie Fülloptionen . Auswählen Schlaganfall aber diesmal wähle Innere von dem Position Drop-Down-Menü, um den Rahmen in das Quadrat zu bringen, anstatt auf der Außenseite platziert zu werden.

Wählen Sie erneut eine Farbe und Breite aus, die zu Ihrem bisherigen Farbschema passt. Wählen Sie nun die Ebene aus und ändern Sie sie Füllen auf 0 Prozent, so dass nur der Rahmen übrig bleibt.

Verwenden Sie die Verschieben-Werkzeug um es über dem unteren linken Banner zu platzieren und die Größe bei Bedarf zu ändern, indem Sie die . gedrückt halten Schicht Taste, um das Seitenverhältnis beizubehalten.

Die Überlagerung beginnt sich zusammenzufügen, aber jetzt ist es an der Zeit, etwas Text hinzuzufügen.

Text hinzufügen

Um mit dem Hinzufügen von Text zu beginnen, erstellen Sie eine neue Ebene. Verwenden Sie die Textwerkzeug (oder drücke T auf Ihrer Tastatur) und ziehen Sie ein neues Textfeld auf. Wähle aus Charakter Menü von der rechten Seite wie unten gezeigt:

Wenn Sie diese Schaltfläche in Ihrem Photoshop-Layout nicht sehen können, können Sie das Menü öffnen, indem Sie auf klicken Fenster > Charakter . Wählen Sie hier Ihre gewünschte Schriftart und Farbe aus und fügen Sie Ihren Text hinzu. Verwenden Sie die Verschieben-Werkzeug um Ihren Text auf einem Ihrer unteren Banner zu platzieren. Es sollte einrasten, aber die Strg key kann Ihnen dabei helfen, es genau dorthin zu bringen, wo Sie es haben möchten.

Jetzt haben wir Text, aber er sieht ein wenig langweilig aus. Um es hervorzuheben, klicken Sie mit der rechten Maustaste auf die Textebene und wählen Sie erneut Fülloptionen . Gib den Text a Schlaganfall und auch a Schlagschatten um es ein wenig hervorzuheben. Hier werden die Standardwerte verwendet, aber Sie können mit den Einstellungen spielen, um auch einen viel ausgeprägteren 'Fließtext'-Effekt zu erzielen.

Erstellen Sie Textelemente für die anderen drei Ecken, indem Sie mit der rechten Maustaste auf diese Ebene klicken und auswählen Ebene duplizieren , und verwenden Sie die Verschieben-Werkzeug um jede neue Ebene in ihre jeweiligen Ecken zu verschieben.

Mit unserem Text jetzt stehen wir kurz vor der Fertigstellung. Fügen wir einfach Logos für soziale Medien und ein Header-Logo für den Kanal hinzu.

Es ist einfacher, vorgefertigte Symbole zu verwenden, die kommerziell kostenlos verwendet werden können. Eine Website wie Symbolfinder kann dabei helfen, aber stellen Sie sicher, dass alle von Ihnen verwendeten Symbole markiert sind Kostenlos für kommerzielle Nutzung um später nicht in rechtliche Schwierigkeiten zu geraten. Importieren Sie Ihr Logo in Photoshop mit dem Datei > Ort Speisekarte. Wenn Sie Ihr Logo nicht sehen können, stellen Sie sicher, dass es oben ist, indem Sie seine Ebene an den Anfang des Ebenenmenüs ziehen.

Jetzt haben wir ein Facebook-Logo, aber es ist ein bisschen langweilig. Lassen Sie es uns einpassen, indem Sie mit der rechten Maustaste auf seine Ebene klicken und auswählen Fülloptionen , gefolgt von Schlaganfall . Geben Sie ihm einen äußeren Strich mit der gleichen Breite wie der Strich Ihres obersten Banners. Bei der Farbauswahl können Sie mit der Pipette die Farbe an Ihr Top-Banner anpassen.

Verschieben Sie das Logo nach oben in den oberen linken Teil des Bildschirms und verwenden Sie die Strg Schlüssel sorgfältig platzieren, sodass er in die Ecke passt.

Befolgen Sie für das Twitter-Logo die gleiche Verwendungsmethode Stelle um es dem Projekt hinzuzufügen. Sie können hier ein wenig Zeit sparen, indem Sie die Facebook-Logo-Ebene auswählen, mit der rechten Maustaste klicken und auswählen Ebenenstil kopieren , bevor Sie zur neuen Twitter-Logo-Ebene zurückkehren und verwenden Ebenenstil einfügen um ihm die gleiche Strichstärke und Farbe zu geben. Verschieben Sie dieses Logo in die gegenüberliegende obere Ecke und verschieben Sie bei Bedarf Ihren Text, damit er passt.

Jetzt fügen wir das Center-Logo hinzu.

Kanallogo

Wenn Sie ein Kanallogo haben, ist es gut, es vorne und in der Mitte zu platzieren, damit jeder es sofort sehen kann, wenn er mit dem Anschauen beginnt. Wenn Sie noch kein Logo haben, können Sie dieses durch ein ersetzen etwas benutzerdefinierter Text mit deinem Kanalnamen oder deiner Website.

Ziehen Sie zunächst ein Lineal aus der linken Symbolleiste, es sollte in der Mitte des Bildschirms einrasten.

Wenn Sie Ihr Lineal nicht sehen können oder es nicht einrastet, sehen Sie unter dem Sicht Menü und überprüfen Sie, ob beide Herrscher und Snap ausgewählt sind.

Stelle Ihr Logo in das Projekt. Es sollte automatisch auf dem Lineal zentriert werden. Erstellen Sie eine neue Ebene und ziehen Sie sie auf die Ebene unter dem Logo. Verwenden Sie die Rechteckwerkzeug um ein Rechteck zu erstellen, das etwas größer als das Logo ist, um ihm einen gerahmten Effekt zu verleihen.

Um es hervorzuheben, geben Sie Ihrem neu erstellten Quadrat ein Äußerer Hub die gleiche Farbe wie der Rest Ihrer Ränder. Um das gemeinsame Verschieben von Logo und Rahmen zu erleichtern, halten Sie Strg um beide Ebenen auszuwählen. Klicken Sie mit der rechten Maustaste und wählen Sie In intelligentes Objekt umwandeln . Dadurch werden sowohl unser Logo als auch unser Rahmen auf derselben Ebene gespeichert, die später bei Bedarf noch bearbeitet werden können.

Verschieben Sie Ihr Logo an den oberen Rand des Overlays und passen Sie es an die Größe an. Und das war's, wir sind alle fertig.

Speichern des Overlays

Bevor Sie das Overlay als Bild speichern, speichern Sie es als Photoshop-Dokument mit einem Dateinamen wie 'Minecraft Twitch Template', damit Sie es später ändern können, um es mit anderen Spielen zu verwenden.

Um den Hintergrund transparent zu machen, wählen Sie die Auge Symbol auf Ihrem Spiel-Screenshot und den Hintergrundebenen, sodass nur die Überlagerungselemente angezeigt werden.

Speichern Sie diese Datei mit der Erweiterung .PNG und laden Sie sie in Ihre Streaming-Software Ihrer Wahl, um sie zu verwenden. Hier ist das fertige Overlay in meiner Streaming-Software, mit dem Overlay als oberster Ebene, der Kamera als mittlerer Ebene und Minecraft als unterster Ebene.

Twitch Overlay abgeschlossen: Jetzt zum Streamen!

Jetzt, da Sie wissen, wie Sie ein Twitch-Overlay erstellen, ist es Zeit für das Streaming! Starten Sie Ihren Kanal von Einrichten Ihrer Streaming-Software und auswählen, welche Spiele auf Twitch gespielt werden sollen. Und wenn Sie wirklich Wert auf den Produktionswert legen, versuchen Sie es Übertragung mit grünem Bildschirm . Vor allem viel Spaß!

Teilen Teilen Tweet Email 5 Tipps zum Aufladen Ihrer VirtualBox-Linux-Maschinen

Haben Sie genug von der schlechten Leistung virtueller Maschinen? Hier ist, was Sie tun sollten, um Ihre VirtualBox-Leistung zu steigern.

Weiter lesen Verwandte Themen

Spiele
Kreativ
Adobe Photoshop
Online-Video
Zucken
Spielkultur
Photoshop-Tutorial

Über den Autor Ian Buckley(216 veröffentlichte Artikel)

Ian Buckley lebt als freiberuflicher Journalist, Musiker, Performer und Videoproduzent in Berlin. Wenn er nicht gerade schreibt oder auf der Bühne steht, bastelt er an DIY-Elektronik oder Code, in der Hoffnung, ein verrückter Wissenschaftler zu werden.

Wie starte ich Outlook im abgesicherten Modus?

Mehr von Ian Buckley

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren