Einsteigerkurs Pixeln

Nachdem wir uns also wie im ersten Teil des Workshops beschrieben, Gedanken gemacht haben, was wir erreichen wollen und uns Vorlagen/Refrenzen zurecht gelegt haben, soll es nun eine gepixelte Charakter-Grafik (auch Sprite genannt) werden. Wir nehmen nun das Grafikprogramm zur Hand und stellen uns alles passend ein.

Skizze und Reinzeichnung

Zunächst kann man sich eine Skizze machen. Ob man diese pixelt, oder zeichnet, ist dabei dem persönlichen Geschmack überlassen. Vorzeichnungen/Skizzen können einem helfen schon im Vorfeld die Pose festzulegen, Proportionsfehler auszumachen, diese zu korrigieren und herumzuprobieren, bis man ein ungefähres Bild hat, das man später erreichen möchte.

Wir erstellen für den Kurs eine einfache Frontpose - ein Mensch, der mit dem Gesicht zum Betrachter still auf der Stelle steht

Nun gilt es (auf einer neuen Ebene) die Reinzeichnung zu machen, sprich die wichtigsten Hauptlinien, auch Outlines genannt, klar herauszuarbeiten.

Hinweis: Es gibt noch einen anderen Weg, bei dem anstatt erst mit Outlines, mit Flächen gearbeitet wird und diese zuerst angelegt werden. Welche der Methoden für euch einfacher ist, müsst ihr für euch selbst feststellen. Wer geübt ist, kann auch frei zwischen den Methoden hin und her springen.

Meiner persönlichen Erfahrung nach und dem, was ich so aus den Live-Kursen mit anderen Anfängern mitgenommen habe, ist die Flächen-Arbeit jedoch etwas schwerer, weil man doch schon eher ein inneres Bild haben muss, was man da eigentlich macht.

Für den Kurs werden wir bei der Outline-Variante bleiben.

Hierbei treffen wir nun auf einen großen Unterschied zwischen Zeichnen und Pixeln.

Da Pixel als viereckige Bildpunkte dargestellt werden, erhält man damit eine gewisse Bauklötzchen-Optik besonders bei Linien und Rändern. Daraus ergibt sich, dass man nicht die gleiche Freiheit in der Strichführung hat, wie das beim Zeichnen der Fall ist. Während bei letzterem Linien egal in welchem Winkel und auch Kurven flüssig gezeichnet sind und weiche Übergänge haben, kann man beim Pixeln nur bestimmte Winkelmaße gut erkennbar darstellen und besonders Kurven sind kniffelig. Auch die Liniendicke kann nicht so einfach variabel umgesetzt werden, wie noch beim Zeichnen.

Die Linien sollten nicht zu dick werden, da sie sonst sehr kantig und Comic-haft wirken. Man sollte sie zunächst möglichst 1 Pixel dünn halten.

Hier noch mal ein Shirt als Anschauungsbeispiel.

Bei Linien in den Winkeln 45° und 90°erkennen wir ungezoomt das Ganze noch als geraden, ununterbrochenen Strich.

Doch bei anderen Winkeln werden die Treppenstufen-artigen Abstände der Teilstriche deutlich. Bei anderen sind diese Treppenstufen sogar unterschiedlich lang, was dann durchaus optisch schon in Richtung eines krakeligen Strichs geht.

Mit Antialiasing lässt sich diesem Effekt entgegenwirken. Dabei wird an den störenden Stellen mit Zwischentönen gearbeitet.

Dies kommt aber gerade bei gepixelten Maker-Grafiken eher selten zum Einsatz.

Kurven richtig auszugestalten und optimale Rundungen zu pixeln, kann manchmal etwas schwieriger sein.

Ich habe für mich dabei die Eselsbrücke, dass die Treppenstufen, welche durch die Teillinien entstehen, nur kürzer, oder länger in eine Richtung werden dürfen. Dabei sollte man sich mit dem kleinsten Wert am Scheitelpunkt (Apex | Mit dem Pfeil markiert) der Kurve orientieren.

Hier ein Anschauungsbeispiel zum Ausbessern von kurvigen Linien.

Tiefenwirkung im 2D - die Anatomie der Dinge

Nun haben wir die wichtigsten Linien übertragen und gesäubert, doch das Männchen wirkt wie ein platter Pappschnitt auf flachem Grund.

Zunächst nicht verkehrt, wo wir doch im 2-dimensionalen Bereich arbeiten. Doch wenn wir keine platte Cartoon-Welt erschaffen wollen, braucht unsere Grafik trotzdem noch eine gewisse Tiefe, die ihr Fülle verleiht. Schon bei den Outlines kann man darauf eingehen.

Dafür müssen wir uns bewusst machen, was für eine 3D-Form unser Objekt hat, selbst wenn wir es nur 2D darstellen wollen - im Falle des Beispiels also ein Körper - und mit welcher Perspektive wir auf unser Objekt schauen.

Dies wird auch bei der Coloration eine Rolle spielen.

Im Maker-Bereich wird meistens eine 3/4-Perspektive genutzt. Also weder komplettes Profil, wie in Jump'n'Run-Games, noch Vogelperspektive, wie z.B. in den alten Zelda-Titeln für Gameboy.

Dabei handelt es sich um eine Form der parallelperspektivischen Darstellung, bei der es keine Verzerrung der Flächen zu Fluchtpunkten hin gibt. (Weitere Infos Cyangmou's Tutorial)

Näheres dazu soll für unseren Einsteigerkurs erst mal unerheblich sein. Wichtig ist nur, dass man sich bewusst macht, dass man weder rein von oben, noch von der Seite drauf schaut und beide Ansichten vereint. Dadurch sieht man z.B. mehr von der Schädelplatte und es wird auch öfter mal der Hals weggelassen, weil er perspektivisch unterhalb des Kopfes verschwindet.

Anstatt z.B. der geraden Linie vom Shirt, wäre also eine Wölbung wegen des Bauchs passender. Auch Beine, Arme und Kopf nehmen Platz ein, füllen die Kleidung aus und überlappen teilweise einander.

An diesem Punkt lässt sich der Char schon gut erkennen, so dass man nochmals korrigieren oder Details zufügen kann. Wenn dann das Grundgerüst steht, kommt nun als nächstes Farbe und Schattierung, um der Figur Leben einzuhauchen.

Man könnte jetzt einfach jeder Fläche eine Grundfarbe geben und sich dann bei der Schattierung an den Outlines entlang (Pillow-Shading*) hangeln. Doch das Ergebnis passt nicht recht.

Der Char schaut noch sehr nach Cartoon aus, wirkt auch noch immer etwas platt und die Schatten verstärken bloß die Outlines, lassen sie sogar ein wenig verschwommen aussehen.

Doch wie funktioniert das mit Licht und Schatten? Das ist eine der häufigsten Fragen, die sich Anfänger stellen.

Zuerst möchte ich dabei auf das Thema Schattierung in Verbindung mit der Form des Objekts eingehen. Je nachdem wie Licht und Schatten verteilt sind, wird uns dadurch ein Eindruck von Tiefe, Körper, sogar Textur des Objekts gegeben.

Hier haben wir nun dreimal das gleiche Quadrat als Fläche, doch die Schattierung des Objekts suggeriert uns jeweils eine andere Form, anstelle eines flach liegenden Stück Papiers.

Hinweis: Die schwarz-weiße Schattierung sorgt allerdings zusätzlich für eine optische Illusion. So lässt sich nicht fest sagen, ob man rechts z.B. auf eine Röhre schaut, die sich zu einem hin wölbt, oder doch eher in eine aufgeschnitte, die von einem weg gebogen ist.

Es gibt noch weiterer solcher Illusionen. Eine der bekanntesten dürfte die Maske sein Link

Normalerweise zeigen Lichtakzente wo Erhebungen sind, auf die Licht fällt und Schatten, wo Tiefen sind. Sie geben uns damit einen Eindruck der Form des Objekts im Raum.

Nachdem wir nun wissen, wozu überhaupt Licht und Schatten nötig sind, bleibt immer noch die Frage: wohin damit auf unserer Figur?

Für den Anfang kann man sich als Hilfestellung seine Lichtquelle und auch die Farbe des Lichts und die Wirkungsrichtung auf seinem Arbeitsbild markieren, z.B. als eine kleine Sonne mit Sonnenstrahlen für Tageslicht oben im Bild.

Hinweis: In der RPG Maker-Serie kommt das Licht für Tiles und Sprites meistens von oben links.

Gut erkennbar daran, dass die Schatten entgegengesetzt unten rechts zu finden sind. Bei Tiles ist dies leichter ersichtlich, während bei Chars weniger auf diese Lichtrichtung geachtet wurde. Am deutlichsten wird das noch bei Charakteren mit Hüten, Mänteln, oder langen Haaren.

Licht von oben links Schatten unten rechts Nicht vergessen, dass es aber die Form des Objekts ist, die bestimmt, wo das Licht auftrifft und wo es verdeckt, oder verschluckt wird und so Schatten entstehen.

Tipp: Hier ein schön anschauliches Zeichen-Tutorial, welches das ganze noch mal an einem Gesicht veranschaulicht, sich aber gut übertragen lässt Link

Wie man an den Beispielen aber auch sehen kann, gibt es verschiedene Schattierungs-Techniken, die zum Einsatz kommen und unterschiedliche Ergebnisse erzielen. Ich möchte hier lediglich auf die wichtigsten 3 Schlagworte eingehen: Cel-Shading, Pillow-Shading und Dithering

• *Pillow-Shading (2. von links| pillow = engl. für Kissen) - Dabei wird von den Outlines gleichmäßig nach innen schattiert, ohne auf die Einwirkung einer Lichtquelle und die Form des Objekts einzugehen.
  Simpel zu benutzen, ist es jedoch eine schlechte Methode, weil sie vor allem die plastische Form des Objekts verfälschen kann.
• Cel-Shading (2. von rechts) - Die einzelnen Farbflächen, auch Licht und Schatten haben klar abgegrenzte Flächen und die Verteilung orientiert sich dabei korrekt an der Lichteinwirkung auf das Objekt.
  Diese Technik ist vor allem aus dem Cartoon- und Manga/Anime-Bereich bekannt und kann auch genutzt werden, um gezielt eine dem ähnliche Optik zu erreichen. Dabei wird oft auf einen Farbton für Schatten und einen für Licht reduziert und es gibt keine Übergänge.
  Wikieintrag
• Dithering (ganz rechts | to dither = engl. für schwanken/zittern) - Mit dieser Technik macht man sich zu Nutzen, dass die einzelnen Bildpunkte vom Auge kaum wahrgenommen werden und die richtigen Farben in Kombination, nebeneinander stehend (z.B. Schachbrettmuster), als eine andere Farbe (z.B. blau + rot = lila) wahrgenommen werden. So lässt sich selbst mit einer reduzierten Farbpalette ein größerer Farbbereich darstellen und Farbübergänge schaffen.
  Wikieintrag
  Wir kommen später noch einmal auf dieses Thema zurück.
  Beispielbild mit nur 4 Farbtönen "The Spartan" von Helm
  Für Charsets im Maker-Bereich wird diese Technik kaum in dem Sinne verwendet, weil die Chars zu kleine Flächen haben, als dass sich Dithering lohnen würde. Auch weil die Grafiken im Vollbildmodus heran gezoomt werden und sich der Ditheringeffekt dabei aufhebt, wenn die Bildpunkte einzeln erkennbar sind und nicht mehr in Kombination wahrgenommen werden.

Auf unsere Figur angewandt, zeigt sich damit die Plastizität gegenüber der vorherigen Version deutlicher. (Die Lichtakzente würden bei der Coloration nicht gelb bleiben, dies soll nur noch mal verdeutlichen, wo das Licht auftreffen würde!)

Abgesehen von der Schattierung des Objekts selbst, kommt hinzu, dass das Objekt ja durchaus eine Wechselwirkung mit seiner Umgebung hat. Die Rede ist in diesem Fall vom Schatten, den das Objekt wirft.

Je nachdem, wie der Schatten angelegt ist, suggeriert er dem Betrachter eine Beziehung zu seinem Umfeld.

- Mit einem Schatten darunter gehen wir davon aus, dass sich der Ball auf einer Oberfläche befindet.

Würde der Schatten verzerrt aussehen, würde man von einer unebenen Fläche unter dem Ball ausgehen.

- Etwas Abstand zwischen Schatten und Objekt, lässt den Ball gleich abheben und optisch schweben.

- Noch ein paar Bewegungslinien hinzu und es sieht so aus, als würde der Ball durch die Luft gen Boden fliegen.

Paletten erstellen

Hier muss ich gleich sagen, dass ich das Thema nur ankratzen kann und es gerade zum Erstellen eigener harmonischer Paletten bessere Tutorials im Netz gibt.

Da ich mit dem Tutorial als Zielgruppe eher jene ansprechen möchte, die mit dem Maker arbeiten und für vorhandene Ressourcen kompatible Sachen erstellen wollen, gehe ich mit meiner Anleitung und den Tipps auch eher in Richtung des RTPs.

Grundsätzlich lässt sich sagen: Beim Pixeln kann man schon mit wenig, viel erreichen.

Beispiel für Game-PixelArtworks mit nur 4 Farben von jalonso

Beispiel für PixelArtwork mit 29 Farben von jalonso

Man pixelt meist mit einer recht minimalistischen Palette und versucht dabei so wenige Farben wie möglich zu nutzen. Als Faustformel kann man sich dabei in etwa 3 bis 5 Farbstufen pro Farbfläche nehmen. Je nach Größe der Fläche kann dies variieren. So würde man bei einem kaum zu sehenden Gürtel vielleicht eher 2 Farbtöne nehmen, oder auf einer großen Zeltplane 8 oder mehr.

Man unterscheidet dabei in 3 Gruppen:

• Grundfarbe
  Dabei wird meist von der Farbe ausgegangen, die bei normalem Tageslicht zu sehen wäre.
  Sie empfiehlt sich als die erste Füllfarbe für die Flächen.
• Licht
  Gemeint ist hier nicht das Licht, dass von der Lichtquelle ausgeht, sondern die Veränderung der Grundfarbe unter dem Einfluss von Helligkeit und Farbe der Lichtquelle.
  Wie stark dabei der Grundton aufgehellt, oder eingefärbt wird, liegt zum einen an der Stärke der Lichtquelle, zum anderen daran, wie stark die Fläche das Licht dämpft oder wieder gibt. Auf poliertem Metall würde das Licht beispielsweise fast im Originalton reflektiert, während ein grober Leinenstoff viel Licht schluckt.
• Schatten
  Ähnlich wie beim Licht spielt auch hier die Stärke der Lichtquelle eine Rolle, aber vor allem auch, wie stark das Licht an der entsprechenden Stelle abgeschirmt wird. Je weniger Licht die Stelle erreicht, desto dunkler ist sie natürlich auch.
  Hinweis: Es empfiehlt sich, nicht unbedingt mit Schwarz als dunkelstem Ton einer Fläche zu arbeiten.
  Schwarz wird meistens eher dazu benutzt, Kontrast zu erzeugen und so Flächen und Objekte gegeneinander abzuheben.
  Der Schatten, den das Objekt insgesamt wirft, ist hier nicht gemeint. Diesen kann man den getrost schwarz machen.

Tipp: Ob ihr nun die Tools eures Grafikprogramms benutzt, oder euch die Farbpalette (auf einer extra Ebene) mit auf eure Arbeitsfläche pixelt, eine Palette bietet den Vorteil, dass man einen guten Überblick über die verwendeten Farben hat, sie schnelleren Zugriff auf diese erlaubt und das Zusammenspiel der Farben direkt sichtbar ist.

Besonders für Einsteiger und jene, die etwas in einem existierenden Stil erstellen wollen, empfiehlt sich bei der Farbauswahl schlicht und ergreifend auf bereits benutzte zurück zu greifen. Egal ob ihr nun etwas neues mit dieser Palette pixelt, oder etwas anderes umfärben wollt.

Achtet dabei aber auch darauf, welcher Farbton in welcher Weise genutzt wurde (Licht, Schatten, Grundton).

So lässt sich auch Selbstgepixeltes harmonisch in Sets mit einem bestimmten Stil eingliedern.

Ein weiterer Vorteil bei dieser Methode, ist dass Kontrast und Sättigung gleich optimal mit übernommen werden.

Unter Sättigung versteht man die Intensität einer Farbe. Je höher die Sättigung, umso strahlender die Farben und je geringer, umso gräulicher wirken sie. Eine Übersättigung der Farbskala wirkt daher schreiend bunt, fast Neon-farbig, während bei einer zu geringen Sättigung die Farben womöglich gar nicht richtig erkennbar sind.

Unter Kontrast hingegen versteht man, wie stark sich unterschiedliche Farben voneinander abheben. Ein höher Kontrast lässt unterschiedliche Farbflächen besser erkennen. Dies wirkt sich negativ aus, wenn man eigentlich eine Farbfläche mit Licht und Schatten hat, diese aber nicht mehr als zusammen hängend erkannt wird. Bei zu geringem Kontrast dagegen, gehen die Farben so stark ineinander über, dass Details nicht mehr zu erkennen sind.

Wie bereits bei der Schattierung erwähnt, wird der Effekt, dass man Flächen durch hohen Kontrast abgrenzen kann, besonders bei Chars genutzt, indem mit schwarzen Outlines z.B. überlappende Körperteile deutlicher voneinander, oder der Char vom Hintergrund im Allgemeinen abgehoben wird.

Will man Kontraste in einem Bereich vermeiden und Verläufe schaffen, gibt es zwei Möglichkeiten.

Üblicherweise wählt man sich Zwischentöne zwischen den kontrastierenden Farben, um damit die Grenze an den Farbflächen weicher zu gestaltet.

Tipp: Der einfachste Weg, um einen exakten Zwischenton von zwei Farben zu finden, ist die eine mit 50% Deckkraft über die andere zu zeichnen. Die dabei entstehende Farbe hat nun genau den 50/50-Farbwert.

Will man aber eine möglichst reduzierte Farbpalette behalten, also keinen weiteren Farbton in seine Palette aufnehmen, kann man statt dessen zum Dithering greifen, bei dem durch die Verteilung zweier Farben in bestimmten Mustern und Algorithmen ein Verlauf beider Farben erzeugt wird. (Dies funktioniert aber nur, wenn der Kontrast zwischen den Farben nicht zu hoch ist.)

Ebenfalls bereits genannt wurde, dass diese Methode im Maker nicht viel Anwendung findet, weil die Flächen meistens zu klein sind. (Außerdem löst sich der Vermischungseffekt beim Zoom im Vollbild wieder auf.) Trotzdem wollen wir noch einmal ganz kurz darauf zurückkommen.

Das bekannteste und verbreitetste Muster ist dabei ein einfaches Raster, auch als Schachbrett-Muster bekannt, bei dem sich je 1 Pixel beider Farben abwechseln.

Rot und Gelb sind im Kontrast noch zu hart, darum braucht es einen Zwischenton.

Der Auslauf des Dithering ist mit einem Noise/Zufalls-Rauschen gepixelt. Dies ist gerade für Einsteiger jedoch schwieriger und sieht am besten mit einem Verteilungsalgorithmus aus, um keine Pixelanhäufungen zu haben.

Dieses Raster löst sich dann zu beiden Seiten hin auf Dabei gibt es es verschiedene Varianten, die mit stilisierten Mustern, bestimmten Rasterpixelungen, oder Verteilungsalgorithmen arbeiten.

Wiki-Eintrag Dithering, Abschnitt Verfahren

Pixel-Tutorial von cure, Abschnitt Dithering

Textures and Dithering auf OpenGamesArt.org

Wir haben nun schon zusammengetragen, dass man sich das Objekt, das man pixeln möchte, auch im Raum vorstellen, sowie Perspektive und Lichteinfall beachten sollte. Bei der Coloration kommt dann hinzu, dass man sich eine Palette zusammenstellt, die nicht übersättigt sein sollte und einen guten Kontrast der einzelnen Farbflächen ermöglicht.

Nun gilt es aber nicht nur eine einfache Fläche einzufärben. Je nachdem aus welchem Material die Fläche ist und welche Struktursie aufweist, können unterschiedliche Texturen dazu kommen.

Ebenfalls bereits kurz erwähnt, reflektiert beispielsweise Leinen ganz anders als Metall und ein Federkleid zeigt sich anders, als Fell. In jedem Fall gilt es alle bisherigen Regeln bei der Detailarbeit hier nochmals anzuwenden. Sprich auch hier muss man sich vor Augen halten, wo sich Erhebungen und Vertiefungen ausbilden, sowie Licht- und Schattenwurf beachten.

Unter Textur verstehen wir dabei ein Muster/Oberflächenbeschaffenheit/Material, aus dem eine Fläche besteht. (Im 3D-Bereich wäre es dabei ein Bild, dass auf das Modell gezogen wird.)

Hinweis: Im Pixelbereich finden wir Texturen besonders häufig bei Tilesets.

Ein Tile = ein Quadrat/eine Kachel mit einer Textur, die nahtlos mehrfach aneinander gesetzt werden kann

(Beim RM 2000 und 2003 sind diese Tiles 16x16 Pixel und beim RM XP, VX und VX Ace 32x32 Pixel groß.)

Bei Charakteren hingegen kommt das Thema am ehesten im Bezug auf das Material hinzu, wie z.B. bei Fell, Haar, Federn, Schuppen und Metall, Lack und Seide.

Hinweis: Tiles werden im RM VX und VX Ace gezeichnet, nicht gepixelt.

Besonders die Darstellung solcher Strukturen ist sehr vom Künstler und seinem gewählten Stil abhängig. (Auch bei den Makern unterscheiden sich die Stile stark.) Hier verschiedene Beispiele unterschiedlicher Künstler und ihrer Herangehensweise:

Pixel art tutorial - shading / textures + examples von UszatyArbuz

some small structure pixel tutorial von Avery

pixel fur tutorial von faustbane

Hier einige eigene Beispiele zu verschiedenen gepixelten Texturen: