Für bessere Smileys mit individuellem Touch: Wie Sie Vektor-Emoticons mit Illustrator zeichnen

Der geschriebene Text alleine ist ohne einen konkreten Zusammenhang meist mit einem Interpretationsspielraum verbunden, vor allem in kurzen Mitteilungen. Besonders im Kontext mit digitalen Endgeräten werden deshalb häufig kleine Symbole benutzt, um passende Emotionen anzudeuten.

Kommunikation besteht darin, dass ein Absender Informationen an einen Empfänger vermittelt und dieser versucht, das erhaltene Informationsmaterial korrekt zu entschlüsseln. Wie schwer diese scheinbar einfache Aufgabe ist, hat sicher jeder von uns schon unzählige Male im Alltag erlebt. Selbst kurze Sätze ohne komplexen Inhalt in direkten Gesprächen sorgen bei der Übermittlung für Missverständnisse, und das, obwohl sich Sender und Empfänger gegenüberstehen und die gegenüberliegende Gestik und Mimik jahrelang zu entschlüsseln gelernt haben [Abb. 1].

Abb. 1: »Portrait of a man« (Gert Germeraad, CC-BY-SA-3.0)

Was aber passiert, wenn man Text ohne Umgebung und menschliche Emotionen übermittelt? An dieser Stelle entsteht ein großer Interpretationsfreiraum, der beispielsweise in Büchern vom Autor durchaus beabsichtigt ist. In einer kurzen Textnachricht an einen Freund allerdings nicht.

Eine Möglichkeit, die Nachricht eindeutiger zu gestalten, wäre, den Text um ein paar erklärende Zeilen zu erweitern. Beispiel:

  • »Bitte fahr nicht zu schnell! (Das Abendessen kann warten/Gut gemeinte Erinnerung.)«
  • »Bitte fahr nicht zu schnell! (Du hast bereits drei Strafzettel und ich habe Angst um dein Leben.)«

Say it with a smile(y)

Seit Jahren hat sich in der digitalen Welt eine weitere Möglichkeit etabliert: das Setzen von Smilies. Dies ist mithilfe von gebräuchlichen Schriftzeichen möglich, lässt sich aber auch automatisch durch kleine Grafiken ersetzen, die dann im Text erscheinen. Hier das fertige Iconset [Abb. 2].

Abb. 2: Vollständiges Iconset mit allen Emotionen

Worauf sollte man beim Erstellen solcher Icons achten?

Um eine Serie von Emoticons zu erstellen, sind einige Vorabinformationen sehr hilfreich. Auf einige möchte ich im Folgenden kurz eingehen.

Welche Emotionen?

Eine der allerersten Fragen, die beim Erstellen neuer Symbole aufkommt, ist die des Inhalts. Welche Emotionen sollen dargestellt werden? Welche Gesichtsausdrücke sind notwendig, um den geschriebenen Text zu unterstützen? Die Liste wird angeführt von Standardemotionen wie Freude, Trauer, Angst, Entsetzen, Erstaunen und wird nach unten hin mit endlosen Zusätzen erweitert. Dabei sollten Sie darauf achten, keine zu feinen Differenzen anzuwenden und die Darstellung der einzelnen Ausdrücke so treffsicher wie möglich zu gestalten. Eine Verwechslung sorgt nur für unnötige Verwirrung und macht aus der Problemlösung, einem Text Unterstützung zur Seite zu stellen, wieder ein neues Interpretationsproblem.

Vektoren oder Pixel?

Die Frage nach der Umsetzungstechnik wird durch das Einsetzungsgebiet beantwortet. Je nach Nutzung sollten die Vor- und Nachteile der Dateiformate gegeneinander ausgespielt werden, um einen maximalen Vorteil zu erlangen.

Pixel:

+ Kann von allen Plattformen angezeigt und abgespielt werden.

+ Kann schnell und einfach animiert werden.

+ Endergebnis schon bei der Bearbeitung sichtbar.

Schlecht zu skalieren.

Dateigröße etwas umfangreicher.

Vektor:

+ Unendlich skalierbar.

+ Sehr gut im hochaufgelösten Bereich.

Schwer zu animieren.

Nicht auf allen Plattformen anzuwenden.

Vorausdenken beim Erstellen notwendig.

Anti-Aliasing

»Warum ist die Linie nicht scharf?« So oder so ähnlich klingt die Reaktion auf ein Icon mit schlechtem Anti-Aliasing.

Anti-Aliasing, zu deutsch Kantenglättung, ist die Verminderung von unerwünschten Effekten, die durch ein begrenztes Pixelraster entstehen können. Diese Treppeneffekte (Alias-Effekte) können durch Hinzurechnen von Informationen ausgeglichen werden [Abb. 1].

Abb. 1: Aliasing und Anti-Aliasing

Um ein Symbol auch in kleiner Größe von beispielsweise 30x30 Pixel noch scharf darzustellen, sollte man darauf achten, dass weitestgehend auf eine Pixelumrechnung bzw. Interpolation verzichtet wird. Das Ausrichten an einem festen Pixelraster mit geraden Werten hilft dabei sehr und vermeidet ungewollte verschwommene Objektkanten. Je nach Linienwinkelung fällt das Anti-Aliasing unterschiedlich aus – Sie sollten daher auch diese Winkelungen nach diesen Auswirkungen auswählen und möglichst vereinheitlichen [Abb. 2].

Abb. 2: Am Pixelraster ausgerichteter Kreis mit (links) und ohne (rechts) Anti-Aliasing

Im folgenden Abschnitt kümmern wir uns um Einstellungen in Illustrator, die das Ausrichten am Pixelraster erleichtern.

Schriftgröße und Zeilenhöhe

Icons sollten im besten Fall auf die vorwiegend eingesetzte Größe optimiert werden. Emoticons finden ihren Einsatzbereich zwischen dem Text, daher orientiert sich auch ihre Größe daran. Legen Sie für die Anpassung ein Beispielwort in korrekter Größe neben die Icons und passen daran die Höhe und Breite an. Referenzwerte hierfür liefert die Grundlinie und Versalhöhe, aber auch die x-Höhe der Schriftzeichen [Abb. 3].

Abb. 3: Symbole auf Schriftgrößen abstimmen

Strichstärken

Nachdem die Dimensionen der Smilies geklärt sind, legen Sie ein Regelwerk für den Einsatz von Linien und Punkten fest. Um ein Verschwimmen in kleiner Größe zu vermeiden, gibt es keine Einheit unter einem Pixel! Weder die Strichstärke noch der kleinste Abstand innerhalb der Symbole sollte unter diesem Wert liegen. Nach oben hin können Sie in ganzen Schritten erweitern. Auch unterschiedliche Strichstärken sind möglich, beispielsweise 2 Pixel für die Umrandung und 1 Pixel für den Innenbereich.

Rund oder eckig?

Eine Frage, die vor allem in unserem Beispiel eine große Rolle spielt. Am besten funktionieren 90°-Winkel, also klare Ecken. Hier muss nichts umgerechnet werden und eine Skalierbarkeit ist problemlos möglich. Alle Rechtecke machen somit keinerlei Probleme. Rundungen hingegen werden nachträglich umgerechnet und teilweise, je nach Skalierungsfaktor, verschwommen dargestellt. Über diese Einbuße sollte man sich beim Einsatz von Rundungen bewusst sein und prüfen, ob und wie stark sie die Lesbarkeit beeinflusst [Abb. 4].

Abb. 4: Runde und eckige Grundform

Stilfrage Farbe

Ob die Icons mit Farbe gefüllt sind oder nicht und welche Farbigkeit die Konturen aufweisen, ist eine Frage des Geschmacks [Abb. 5].

Abb. 5: Umsetzung: Linear, Flächig, Linie und Farbe

Bei der Entscheidung lohnt sich ein Blick auf die Kontrastwerte in kleinster Darstellung. Hier wird schnell deutlich, welche Farben gut funktionieren und welche einen zu einheitlichen Grauwert beim Betrachter erzeugen. Denken Sie dabei nicht nur an die »Anatomie« des Smilies selbst, sondern auch an eventuell hinzuzufügende Accessoires wie Herzchen, Wolken, Tränen etc. [Abb. 6].

Abb. 6: Beispiel Smiley in großer Ansicht

openpanel-ca50.png

Inhaltsverzeichnis

Arbeitsdateien

Beitragsinfo

Um den kompletten Beitrag zu lesen, melden Sie sich bitte nachfolgend an.

Sie haben Ihr Passwort vergessen? Klicken Sie hier, um sich ein neues zusenden zu lassen!