1. Design & Illustration
  2. Emoticon Design

Wie kann man Twitch-Emotes erstellen?

by
Read Time:14 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

In diesem Tutorial erfahren Sie, wie Sie in Adobe Photoshop benutzerdefinierte Emotes für Twitch erstellen. Wir erstellen sowohl ein Emote aus einem Archivfoto als auch ein Emote von Grund auf neu. Wenn du fertig bist, kannst du deine Emotes in dein Twitch-Dashboard hochladen, wenn du ein Affiliate- oder Partner-Konto hast.

Was werden Sie in diesem Twitch-Emoji-Tutorial lernen?

  • Wie kann man die Funktion „Betreff auswählen“ in Photoshop verwenden? 
  • Wie kann man das Zeichenstift-Werkzeug in Photoshop verwenden?
  • Wie kann man die Maskenfunktion verwenden, um Fotos auszuschneiden?
  • Wie kann man einen benutzerdefinierten Pinsel in Photoshop perfekt zum Zeichnen erstellen? 
  • Wie kann man die Größe von Grafiken ändern, um Twitch-Chat-Emojis zu erstellen?

Tutorial-Assets

Sie benötigen die folgenden Ressourcen, um dieses Projekt abzuschließen:

  • Stock Photo oder ein beliebiges Portraitfoto Ihrer Wahl

Was sind Twitch-Emotes?

Du fragst dich vielleicht zusätzlich zu dem, was sie sind, wie du Emojis zu Twitch hinzufügst. Twitch-Emoticons sind kleine Chatsymbole, die Affiliate- oder Partnerkanäle ihren Abonnenten als Belohnung zur Verwendung im Chat ihres Kanals anbieten können. Sie sind exklusiv für jeden Kanal, daher ist es ein Muss, benutzerdefinierte Emotes zu haben, wenn Sie einen Anreiz für die Zuschauer zum Abonnieren haben möchten.

Das Beste daran, Ihre eigenen benutzerdefinierten Twitch-Emojis zu erstellen, besteht darin, Ihren Streams etwas Besonderes zu verleihen. Egal, ob es sich um einen Insider-Witz für Ihre Zuschauer oder nur um Ihr glorreiches Gesicht handelt, es verleiht Ihrem Kanal eine solche Note und baut Ihre Streaming-Community auf.

Lassen Sie uns loslegen, wie Sie Emotes auf Twitch bekommen!

1. Wie können Sie Ihr Stock-Foto für Twitch-Chat-Emotes vorbereiten?

Schritt 1

Öffnen Sie Ihr Archivfoto in Adobe Photoshop. Speichern Sie das Foto von Anfang an als .PSD-Datei, damit Ihre Arbeit nicht verloren geht. Schnappen Sie sich das Zauberstab-Werkzeug (W) und klicken Sie in der Optionsleiste auf Thema auswählen.

Select your subject using the Select Subject OptionSelect your subject using the Select Subject OptionSelect your subject using the Select Subject Option

Dadurch wird Ihr Motiv nicht unbedingt perfekt ausgewählt, aber im Fall dieses Fotos ist es sehr einfach, den Umriss ihres Haares im Vergleich zum manuellen Ausschneiden zu erhalten. Klicken Sie im Ebenen-Bedienfeld auf Maske hinzufügen.

Hit Add a Mask to turn your selection into a Layer MaskHit Add a Mask to turn your selection into a Layer MaskHit Add a Mask to turn your selection into a Layer Mask

Schritt 2

Zeichnen Sie mit dem Zeichenstift-Werkzeug (P) eine Form um den Kopf Ihres Motivs und achten Sie dabei darauf, sein Kinn zu umreißen. Dies wird der Fokus Ihres Twitch-Chat-Emojis sein.

Use the Pen Tool to cut out your subjects headUse the Pen Tool to cut out your subjects headUse the Pen Tool to cut out your subjects head

Schritt 3

Erstellen Sie im Ebenen-Bedienfeld einen Ordner und ziehen Sie Ihre Arbeitsebene hinein. Klicken Sie im Pfade-Bedienfeld auf „Pfad als Auswahl laden“. Wählen Sie Ihre Gruppe im Ebenen-Bedienfeld aus und klicken Sie dann auf Ebenenmaske hinzufügen.

Apply the mask to the group to maintain image qualityApply the mask to the group to maintain image qualityApply the mask to the group to maintain image quality

Schritt 4

Als Nächstes duplizieren Sie Ihre ursprüngliche Ebene, die Ihr Archivbild enthält. Löschen Sie die Ebenenmaske auf dieser duplizierten Ebene.

Verwenden Sie das Zeichenstift-Werkzeug, um die Hand Ihres Motivs sorgfältig auszuschneiden. Laden Sie den Pfad erneut als Auswahl und maskieren Sie Ihre Ebene.

Use the Pen Tool to carefully cut out your subjects handUse the Pen Tool to carefully cut out your subjects handUse the Pen Tool to carefully cut out your subjects hand

Schritt 5

Jetzt sollten Sie eine maskierte Handebene und einen Gruppenordner haben, der die Kopfebene enthält. Wir werden dieses Dokument als Grundlage für unsere Twitch-Emoticons verwenden.

Now you should have one masked hand layer and one group folder containing the head layerNow you should have one masked hand layer and one group folder containing the head layerNow you should have one masked hand layer and one group folder containing the head layer

2. Wie kann man Ihre Twitch-Emote-Komposition anpassen?

Schritt 1

Nachdem wir nun unser Archivfoto für unser Twitch-Lächeln-Emote vorbereitet haben, können wir an der Komposition des Emoticons arbeiten. Erstellen Sie ein neues Dokument mit 500 x 500 Pixel, 72 DPI und Farbmodus auf RGB. Stellen Sie sicher, dass das Dokument einen transparenten Hintergrund hat.

Make a New Document for your twitch chat emoticonMake a New Document for your twitch chat emoticonMake a New Document for your twitch chat emoticon

Schritt 2

Kopieren (Strg-C) Ihre Kopfgruppe und Handebene aus Ihrer Arbeitsfotodatei und Einfügen (Strg-V) in Ihr neues Dokument. Skalieren Sie den Kopf und die Hand nach unten, damit sie in Ihre Twitch-Emoji-Komposition passen. Ich habe sie auf ungefähr 33% herunterskaliert.

Ich arbeite gerne in einem neuen Dokument, damit ich, wenn ich Änderungen am Originalfoto vornehmen möchte, keine Bildqualität verloren habe und ich jederzeit meine Meinung ändern kann, wie ich die Ebenen für die Emoticon-Verwendung beschnitten habe.

Copy and Paste your head and hand layers into the new documentCopy and Paste your head and hand layers into the new documentCopy and Paste your head and hand layers into the new document

Schritt 3

Drehen Sie Ihre Kopfschicht so, dass sie etwa 45° zur Hand geneigt ist. Stellen Sie außerdem sicher, dass sich die Handschicht über dem Kopf befindet.

Schritt 4

Gruppieren Sie (Strg-G) Ihre Ebenen im Ebenen-Bedienfeld und doppelklicken Sie auf die Gruppe, um die Mischoptionen zu öffnen. Wählen Sie Schlagschatten und verwenden Sie die folgenden Einstellungen:

  • Mischmodus: Multiplizieren
  • Deckkraft: 38%
  • Winkel: 90°
  • Entfernung: 6 px
  • Streuung: 0%
  • Größe: 4 px

Klicken Sie auf OK, wenn Sie alle diese Einstellungen übernommen haben.

Apply a Drop Shadow to your Twitch EmojiApply a Drop Shadow to your Twitch EmojiApply a Drop Shadow to your Twitch Emoji

Schritt 5

Speichern Sie (Strg-S) Ihre Arbeits-Emote-Dateien. Von hier aus werden wir dazu übergehen, ein benutzerdefiniertes Emoticon von Grund auf neu zu erstellen, aber wenn Sie nur mit einem Stockfotos arbeiten möchten, können Sie zu Abschnitt 5 dieses Tutorials übergehen, um Tipps zur Twitch-Emote-Größe zu erhalten!

Save your working fileSave your working fileSave your working file

3. Wie kann man benutzerdefinierte Emotes für Twitch zeichnen? 

Schritt 1

Beginnen wir mit der Erstellung unseres benutzerdefinierten Twitch-Emotes mit einigen Pinseleinstellungen. Fühlen Sie sich frei, beliebige Pinsel zum Zeichnen zu verwenden, aber dies ist mein derzeitiger Favorit. Wenden Sie im Pinseleinstellungen-Bedienfeld die folgenden Einstellungen an:

Pinselspitzenform

  • Größe: Variabel, ich habe mit 17 px angefangen
  • Winkel: 34°
  • Rundheit: 67 %
  • Abstand: 4%

Formdynamik

  • Größen-Jitter: 0%
  • Steuerung: Stiftdruck
  • Mindestdurchmesser: 21%
  • Rundheits-Jitter: 0%
  • Steuerung: Stiftdruck
  • Mindestrundheit: 1%

Transfer: ausgewählt, alles auf 0% gesetzt

Aufbau: Ausgewählt

Glätten: Ausgewählt

Custom brush settingsCustom brush settingsCustom brush settings

Schritt 2

In einem neuen Dokument, dieses ebenfalls 500 x 500 Pixel, erstellen Sie eine neue Ebene. Schnappen Sie sich das Pinsel-Werkzeug (B) und skizzieren Sie Ihre grundlegende Emote-Komposition. Dieses ist das gleiche wie das Stock-Foto-Emoji, mit einem lächelnden Gesicht und einer Hand, die ein Friedenszeichen gibt. Ich mag es, in meiner ersten Skizze schnell und schlampig zu sein.

Make a loose sketchMake a loose sketchMake a loose sketch

Schritt 3

Reduzieren Sie die Deckkraft Ihrer ersten Skizzenebene auf etwa 30% und erstellen Sie eine neue Ebene. Wählen Sie ein dunkelbraunes #3b0600 oder eine andere dunkle Farbe, die Sie für Ihre Strichzeichnungen verwenden, und straffen Sie Ihre Skizze. Meine zweite Skizze unten ist etwas zu detailliert für ein Twitch-Chat-Emote, aber die Grundidee ist da!

Tighten up that sketchTighten up that sketchTighten up that sketch

Schritt 4

Blenden Sie Ihre anfängliche Skizzenebene aus und reduzieren Sie die Deckkraft Ihrer Arbeitsskizzenebene auf 30%. Erstellen Sie eine neue Ebene für Ihre Strichzeichnungen. Beachten Sie, wie einfach die Augen geworden sind. Persönlich braucht es ein paar Skizzenebenen, damit ich mich mit straffer Linienarbeit wohl fühle.

Work up your line artWork up your line artWork up your line art

Schritt 5

Blenden oder löschen Sie alle Skizzenebenen unter Ihrer Arbeitsliniengrafikebene. Beachten Sie, dass hier ein großes Gesicht, ein gut lesbarer Ausdruck (in diesem Fall sehr glücklich) und ein süßes Friedenszeichen mit der Hand im Mittelpunkt stehen. Bei der endgültigen Emote-Größe gehen zu viele Details verloren.

Finalize your line artFinalize your line artFinalize your line art

4. Wie können Sie Ihr Twitch-Emote ausmalen und vervollständigen?

Schritt 1

Beginnen Sie auf einer neuen Ebene unter Ihren Strichzeichnungen mit dem Ausmalen Ihrer Arbeit. Ich verwende gerne den gleichen Pinsel wie meine Strichzeichnungsebene, da er leicht zu malen ist.

start coloring in your workstart coloring in your workstart coloring in your work

Schritt 2

Wenn ich an einem Symbol arbeite, das irgendwann auf einem transparenten Hintergrund sein wird, finde ich es am einfachsten, eine sehr helle Farbe zu verwenden, die nicht Teil meines Stücks ist, um die Grenzen des Emotes zu bestimmen. Ich habe meinen Hintergrund auf Neongrün #00ff00 gesetzt, aber Sie können gerne eine andere Farbe ausprobieren, wenn sie für Sie besser funktioniert.

Färben Sie Haut, Mund und Augen in flachen Farben, bevor Sie Schattierungen oder Highlights hinzufügen.

Fill in your design with flat colors firstFill in your design with flat colors firstFill in your design with flat colors first

Schritt 3

Ich mag es, die Haare ein wenig hervorzuheben, indem ich einige lustige Formen einer helleren Farbe hinzufüge. Beachten Sie, dass ich die Unterseite der Augen mit einem dunkleren Braun als der Hautton ausgekleidet habe und das gleiche unter der Nase und in den Ohren gemacht habe. Beim Ausmalen einer Zeichnung setze ich oft flache Farben, Schatten und Glanzlichter auf separate Ebenen, um die Bearbeitung zu erleichtern.

Adding shadows and highlightsAdding shadows and highlightsAdding shadows and highlights

Schritt 4

Gehen Sie nicht zu detailliert in die Schatten oder Highlights für Ihr Twitch-Chat-Emote. Viele dieser Details gehen verloren, wenn die Größe für die Verwendung im Chat Ihres Kanals geändert wird. Wenn Sie jedoch eine größere Zeichnung erstellen, können Sie sie außerhalb von Emojis auf vielfältige Weise verwenden und wiederverwenden.

Twitch chat emote with coloring finishedTwitch chat emote with coloring finishedTwitch chat emote with coloring finished

5. Wie können Sie Ihrem Twitch-Emote die richtige Größe verleihen?

Schritt 1

Die Größe des Twitch-Emotes ist ziemlich wichtig. Sie erscheinen im Chat-Fenster meistens ziemlich klein, und Sie möchten, dass die Benutzer wissen, was sie ausgewählt haben, und andere wissen, was sie zu kommunizieren versuchen.

Twitch gibt drei Emoji-Größen an:

  • 112 px für größere Plattformen
  • 56 px für Retina-Displays
  • 28 px für das Web

Wenn eine Ihrer funktionierenden Chat-Emoticon-Dateien geöffnet ist, gehen Sie zu Datei > Exportieren > Exportieren als. Verwenden Sie für Ihren ersten Export die folgenden Dateieinstellungen:

Dateieinstellungen:

  • Format: PNG
  • Transparenz: Ausgewählt

Bildgröße

  • Breite: 112
  • Höhe: 112
  • Resample: Bicubic Sharper (dies ist besser für die Reduktion)

Wiederholen Sie diese Schritte bei den anderen Größen für jedes Ihrer Symbole, sodass Sie für jedes Symboldesign drei separate PNG-Dateien haben.

Save your Twitch emote in 3 separate sizesSave your Twitch emote in 3 separate sizesSave your Twitch emote in 3 separate sizes

Schritt 2

Beachten Sie, wie klein das 28-Pixel-Emote ist! Es ist schwer zu erkennen, aber selbst bei dieser Größe können wir das Lächeln des Twitch-Emotes und der Hand deutlich erkennen! Experimentieren Sie mit anderen Ausdrücken oder Kompositionen und testen Sie die Größe in diesem Export-Menü.

Achten Sie beim Exportieren darauf, jedem Twitch-Emote einen eindeutigen Namen zu geben, damit Sie es beim Hochladen auf Ihren Kanal leicht finden können.

Check out how small this Twitch emote isCheck out how small this Twitch emote isCheck out how small this Twitch emote is

6. Wie kann man Emotes auf Twitch hochladen?

Schritt 1

Sie haben es geschafft! Nun zur Beantwortung der Frage, wie man Emotes auf Twitch bekommt. Wie oben erwähnt, müssen Sie als Partner lediglich Ihre Emoticons in der richtigen Größe vorbereiten, wie wir es oben getan haben.

Schritt 2

Gehen Sie einfach zu Ihrem Kanal-Dashboard, um sie in Ihren Affiliate- oder Partner-Einstellungen hochzuladen. Sie werden die Twitch-Anleitung zu Emotes für diesen Teil unglaublich hilfreich finden.

Es liegt an Ihnen, ob Sie drei verschiedene Größen von Twitch-Emotes im erweiterten Modus hochladen oder die Site im einfachen Modus eine einzige größere Datei komprimieren lassen. Außerdem finden Sie Antworten auf häufig gestellte Fragen wie "Wie viele Emotes kann ich auf Twitch haben?" oder "Wie lange dauert es, Emotes auf Twitch zu genehmigen?"

Großartige Arbeit, Sie sind fertig!

Jetzt wissen Sie, wie Sie Ihre eigenen benutzerdefinierten Twitch-Chat-Emotes erstellen! Egal, ob Sie nach einem Foto arbeiten oder Ihr Emote von Grund auf neu erstellen, Sie haben die Grundlagen, um eine ganze Reihe lustiger Chat-Emojis als Abonnentenanreiz für Ihren Kanal zu erstellen!

Finished Twitch chat emotesFinished Twitch chat emotesFinished Twitch chat emotes

5 tolle Emoji-Packs für Twitch

Wenn Sie lieber einige vorgefertigte Twitch-Chat-Emotes verwenden möchten, bietet Envato Elements diese fantastischen Sets:

30 Emoji-Symbole

30 emoji icons Set of 30 Emoji Icons30 emoji icons Set of 30 Emoji Icons30 emoji icons Set of 30 Emoji Icons

Dieses Emoji-Set ist mutig, einfach und macht Spaß, mit einer Reihe von Twitch-Emotes für Lächeln in einer Vielzahl von Ausdrücken.

100-Emoji- und Smiley-Bündel-Pack, Band 1

100 Smiley Emojis100 Smiley Emojis100 Smiley Emojis

Dieses Emoticon-Set ist süß, einfach und voller lustiger leuchtender Farben, die sich leicht in einem Meer von Kommentaren abheben. Die Ausdrücke sind leicht zu lesen, was dieses Set perfekt zum Chatten macht.

Am häufigsten verwendete Emoticons

48 Emoji Bundle of Icons48 Emoji Bundle of Icons48 Emoji Bundle of Icons

Dieses Symbol-Bündel ist so vielfältig im Design. Es geht weit über verschiedene Smileys hinaus und gibt Ihren Benutzern viel zu erzählen!

30 Avatar- und Emotion-Symbole - flach

30 Avatar and Emotion Icons30 Avatar and Emotion Icons30 Avatar and Emotion Icons

Brechen Sie mit einigen Avataren von der völligen Einfachheit ab, die perfekt sind, um Ihren Chat etwas persönlicher zu gestalten.

Fast Food - Vektor-Set von Zeichen 

Fast Food vector chat iconsFast Food vector chat iconsFast Food vector chat icons

Werden Sie verrückt und wild mit einigen lustigen Fast-Food-Symbolen für Ihren Twitch-Chat! Besonders nützlich, wenn Sie etwas wie Cooking Mama oder Burger Time streamen!

One subscription.
Unlimited Downloads.
Get unlimited downloads