Vorwort
Hallo und willkommen zu meinem Grundlagenkurs Pixeln, in dem Grundlagenwissen zum Pixeln und speziell zum Character-Erstellen vermittelt werden soll.
Bevor der Kurs beginnt, möchte ich noch einige Dinge klar stellen, damit es nicht zu Missverständnissen kommt.
Wie die meisten Dinge, so benötigt auch das Erlernen des Pixelns eine Menge Zeit, Geduld und Übung. Mit diesem einfachen Einsteigerkurs wird man nicht von 0 auf 100 kommen und sofort super pixeln können.
Genauso gibt es die unterschiedlichsten Techniken und Ansichten und ich kann nur meine eigenen Erfahrungen, Techniken, Tipps und Tricks vermitteln.
Nun wünsche ich viel Spaß und dass es einiges Interessantes zu erfahren und zu lernen für euch gibt.
Vorbereitungen - Was sollte ich vorher schon wissen?
Dieser erste Teil des Kurses beschäftigt sich vorwiegend mit dem, was man wissen und bedenken sollte, bevor man mit dem Pixeln loslegt. Darunter auch einiges zu den Programmen selbst.
Wikipedia schrieb:Pixel, Bildpunkt, Bildzelle oder Bildelement (selten Pel) bezeichnet sowohl die kleinste Einheit einer digitalen Rastergrafik als auch deren Darstellung auf einem Bildschirm mit Rasteransteuerung. „Pixel“ (Nominativ Singular: das Pixel; Genitiv: des Pixels; Plural: die Pixel) ist ein Kunstwort aus der Abkürzung der englischen Wörter pictures (umgangssprachlich verkürzt „pix“) und element. Es wird oft mit px abgekürzt.
Pixeln kann man daher als kleinstmögliches digitales Zeichnen sehen. Jedoch führt diese Annahme gerne dazu, dass Anfänger die falschen Werkzeuge nehmen, um zu pixeln. Man kann Pixeln derart vom Zeichnen abgrenzen, dass gezielt Pixel für Pixel gesetzt/gefärbt wird. Wenn ihr also beim pixeln ungewollt umliegende Pixel mit einfärbt und sei es auch nur ein bisschen, habt ihr meistens die falsche Werkzeugspitze (nämlich Pinsel statt Stift) gewählt.
Beide Punkte oben entstehen bei einer Einstellung von 1 px Größe. In der unteren Zeile sind genau diese winzigen Punkte um 1600% größer dargestellt. An diesem Beispiel könnt ihr die Auswirkungen sehen, was die Wahl des Werkzeugs betrifft. Der Stift (links) färbt nur einen einzigen Pixel ein, während der Pinsel (rechts) auch umliegende Pixel mit einfärbt. Grund dafür ist, dass dabei ein optischer Punkt gesetzt wird.
In der Originalgröße ist der Unterschied kaum noch sichtbar.
Oft sagt man auch, dass ein Bild "pixelig/verpixelt" aussieht, wenn man die scharfen Kanten der einzelnen Pixel besonders gut sieht (wie rechts z.B. der Kreis). Während einem die Linien und Kanten mit Antialiasing glatt vorkommen.
Dieser Effekt wird später beim Colorieren noch eine Rolle spielen, um die Kanten der Outlines abzumildern.
So lässt sich Pixeln (rechts) von Zeichnen (links) unterscheiden. Gepixelt wird vor allem, um auf möglichst kleinem Raum eine vereinfachte und möglichst scharfe und gut erkennbare Darstellung zu bekommen.
Hier noch ein Vergleichsbeispiel von Ayene zwischen den Ressourcen-Stilen:
gezeichnet VS gepixelt
Zoom (ohne Filter)
Da Pixeln grundlegend mit recht wenig auskommt, weil man, überspitzt gesagt, einfach nur die kleinen Pixel bunt macht, reicht oft schon das simpelste Grafikprogramm, wie z.B. MS Paint, aus, um sich erst einmal einfach nur auszuprobieren. Mit genug Geschick kann man selbst in diesem Programm wundervolles erstellen. Dennoch gibt es in anderen Programmen viele Werkzeuge und Funktionen, die einem die Arbeit erleichtern und daher lohnt es sich, sich nach Alternativen umzusehen. Dabei muss man nun nicht gleich zum Teuersten und Komplizierten greifen, wie z.B. Adobe Photoshop, das im Laden locker seine 1.000 € kostest. Kostenlose Programme wie Paint.Net oder GIMP erfüllen die meisten Voraussetzungen ebenso.
Hier ein ausführlicher Artikel über weitere kostenlose Programme zur Bildbearbeitung: Link
Hilfreiche Werkzeuge (Tools) und Funktionen
• Stift
Mit dem Stift könnt ihr pixelgenau zeichnen. Die Größe der Spitze ist dabei variabel, bleibt aber immer pixelig und hat keine Kantenglättung.
Wenn ihr einstellen könnt, ob ihr eine runde oder eckige Spitze mit dem Stift habt, könnt ihr so gezielt große und kleine Kreise und Rechtecken erstellen und müsst nicht herumprobieren.
• Radiergummi
Mit dem Radiergummi könnt ihr auch pixelgenau löschen. Je nach Programm wird dabei das Gelöschte völlig entfernt, oder mit der Hintergrundfarbe übermalt.
Ebenfalls wie beim Stift, kann der Radiergummi mit der richtigen Einstellung wie eine Schablone für Kreise und Rechtecken genutzt werden.
• Fülleimer
Mit dem Fülleimer könnt ihr ganze Flächen einfärben. In einigen Programmen kann man jedoch auch alle gleichen Farbflächen mit diesem Tool umfärben, was beim Editieren sehr praktisch sein kann.
• Pipette
Mit der Pipette könnt ihr Farben aus einem Bild entnehmen. Das ist zum einen gut, wenn man bestehende Grafiken editiert, weil man so mit den gleichen Farben arbeiten kann. Aber auch gut, um ganze Paletten aus einem anderen Bild für das eure zu übernehmen. Besonders, wenn man sich nicht an eigene Farbzusammenstellungen traut, kann man die aus anderen Bildern übernehmen.
• Palette
In der Palette könnt ihr Farben speichern. So behaltet ihr den Überblick über eure Farben und könnt Zusammenstellungen einrichten, die beim Pixeln hilfreich sein können.
• Deckkraft
Mit der Deckkraft beim Malen mit dem Stift und von Ebenen kann man viele Effekte erzielen (z.B. transparente Schleier). Es ist aber auch gut, um Farbverläufe anzulegen, in dem man mit einer Farbe, die zweite mit z.B. 50% Deckkraft übermalt.
• Zoom
Besonders wichtig beim Pixeln ist der Zoom, denn gerade bei der Kleinstarbeit ist es bequemer, wenn man das zu bearbeitende Bild passend vergrößern kann.
Vielen fällt das umdenken schwer. Es ist keine Schande, wenn man oft zwischen Original-Ansicht und verschiedenen Zoom-Stufen hin und her springt, um für sich die passende Ansicht zu finden und zu vergleichen.
• Raster
Die Tiles beim MV Maker sind alle 48 px hoch und breit. Auch alle Charsets basieren auf diesem 48er- Raster, auch wenn man ein Charset kleiner und auch größer machen kann. Ein Raster hilft nicht nur bei der Größeneinschätzung von Relationen (z.B. Charakter zu Tileset, oder Kind zum Erwachsenen), es hilft auch beim Zurecht rücken von Charsets etc.
Wenn eurer Grafikprogramm kein Raster anzeigen kann, könnt ihr euch ein Kästchen-Muster erstellen und dies als Raster-Untergrund nehmen.
• Ebenen
Wer die Funktion schon kennt, liebt sie; wer sie kennen lernt, wird sie lieben. Ebenen sind mitunter das hilfreichste Tool, das ein Grafikprogramm beim Pixeln bieten kann. Damit kann man ein Bild in Schichten erstellen, diese Schichten einzeln bearbeiten, einzeln verschieben und ihre Anordnung übereinander verändern. So kann man auf der unteren Ebene sein Template haben und auf einer Ebene darüber Klamotten pixeln, ohne, dass das Template direkt verändert wird. Man kann auf einer Ebene Haare machen und diese gegen Haare auf einer anderen Ebene austauschen.
Wer schon mal den Chara Maker für XP benutzt hat, wird den Vorteil auch schon kennen.
Als Faustregel kann man sich merken, dass man alles, was sich überlappt, auf eine eigene Ebene machen sollte; Haare, Klamotten, Rüstung, Accessoires...
• Hilfslinien
Wenn das Programm keine Hilfslinien bietet, kann man sich auch selber welche ziehen. Ähnlich wie beim Raster hilft es Relationen zueinander besser einschätzen zu können, aber auch wenn man ein Charset um Platz erweitern will (z.B. damit der Char ein Schwert schwingt) den passenden Abstand, oder bei der Umsetzung von Front- auf Seitenansicht, die richtige Position für alles zu finden.
• Zauberstab
Mit dem Zauberstab kann man alle Bereiche mit der gleichen Farbe auf einem Bild anwählen. Das hilft eher beim Bearbeiten/Editieren, als beim komplett selber Pixeln, soll aber nicht unerwähnt bleiben.
Wenn man z.B. den Hintergrund von einem Charakter entfernen möchte, kann man mit diesem Tool gleich den ganzen gleichfarbigen Grund mit einem Klick anwählen. Manchmal scheint das nicht ganz zu klappen. Besonders bei jpg-Bildern bleiben gerne mal lauter Pixel besonders am Rand des Objekts und des Bildes übrig. Obwohl die übrig gebliebene Farbe für das Auge des Betrachters gleich aussehen mag, hat sie andere Farbwerte und wird deshalb nicht mit angewählt.
Dem kann man ein wenig entgegenwirken, wenn man mit dem Regler der Toleranz/dem Schwellwert experimentiert. Steht die Toleranz auf 0, wird nur exakt die gleiche Farbe ausgewählt, die also immer den gleichen Farbwert hat. Stellt man den Regler hoch, werden auch andere, sehr ähnliche Farbwerte toleriert und mit ausgewählt.
Ehe man einfach aus dem Kopf drauf los pixelt, wie es viele Anfänger machen, sollte man erst inne halten und sich einige Gedanken machen, was man da vorhat. Denn ein Charakter ist kein willkürlicher Pixelhaufen und selbst nach Jahren kann man nicht alle Gesetzmäßigkeiten auswendig kennen.
Hier nun ein paar wissenswerte Grundbegriffe:
Konzept
Unter Konzept versteht man einen Plan. Dies gilt für ein Spiel, ebenso wie für einen Charakter. Ehe man also drauf los macht, sollte man sich eine Vorstellung von dem machen, was man haben möchte und diese Gedanken auch am besten festhalten. Textform ist immer gut, für einen Charakter wären Skizzen jedoch noch besser. Selbst wenn man nicht der beste im Zeichnen ist, lohnt es sich. Denn man kann gleich feststellen, ob man überhaupt weiß, wo Falten sitzen, welchen Stoff man verwenden will, welche Farben am Charakter gut aussehen... Man kann auch Details einarbeiten, die man nicht gepixelt umsetzen kann.
Wenn man einen Plan hat, kann man sich außerdem effektiver daran machen, sich Referenzen zu suchen.
Skizze:
Charakter: Mara aus Charon II
Zeichnung von sorata
Referenzen
Damit sind Vorlagen gemeint. Ob Fotos, Skizzen, Screenshots, Artworks, andere Sprites... Alles woran ihr euch orientieren könnt, hilft euch und fällt unter diesen Begriff. Farben, Formen, Posen, Größenverhältnisse, Faltenwurf, Lichtreflexe; es gibt eine Menge, was man dabei studieren kann, um seinen Charakter bestmöglich umzusetzen. >
Für Charaktere und vor allem für Posen, kann ich euch diesen Link ans Herz legen: Link
Editieren
Der ideale Einstieg ins Pixeln. Darunter versteht man das Bearbeiten und Verändern von vorhandenen Grafiken, angefangen beim reinen Umfärben, bis hin zur Posenerstellung. Es lohnt sich, damit für die ersten Versuche zu beginnen, weil man sich so an die geringe Auflösung gewöhnt, der gepixelte Chars unterliegen und die für viele schwer zu verstehen ist. Zudem kann man sich gleich viel von den Grafiken ab gucken und ein Gefühl für die Größen und Techniken entwickeln.
Zum Editieren gehört auch ein weiterer verbreiteter Begriff:
Frankenspriting
Verpönt, doch oft benutzt und eine gute Übung für den Umgang und Aufbau von Einzelteilen von Charakteren. Leicht zu merken entstammt der Begriff der Literatur, genauer:
Frankensteins Monster. So wie dieses in der Geschichte aus verschiedenen Menschen zusammen gesetzt wurde, versteht man im Pixelbereich darunter, das Zerschneiden und Zusammensetzen von vorhandenen Sprites (Grafiken).
Stile und Templates
Wenn also das Konzept zum Charakter steht und ihr euch schon ein wenig vorbereitet habt, wird es Zeit sich Gedanken zur Umsetzung zu machen. Dabei ist die erste große Frage natürlich, worauf man es umsetzen will, denn jede Engine/jeder Maker hat andere Voraussetzungen, die man beachten muss. So gelten z.B. beim Rpg Maker 2000 andere Farbbeschränkungen, als für den XP und 3D ist wieder etwas anders.
In diesem Kurs widmen wir uns dem Rm XP und seinen Charakteren. Dieser bietet dabei eine ganze Reihe an Stilen, da man in der Charaktererstellung recht viel Freiheit genießt. Einige bekanntere Beispiele:
K-Sama-Charakter by LuX
Bei der Wahl des passenden Stils sollte man seine eigenen Fähigkeiten, den verbundenen Zeitaufwand und die Auswahl von anderen Ressourcen im gleichen Stil berücksichtigen. Denn wenn man sich für etwas außergewöhnliches entscheidet, zu dem es sonst keine Ressourcen gibt, muss man alles selber erstellen, was lange dauern kann und einem unter Umständen die Lust nimmt. Außerdem kann es immer vorkommen, dass man selbst als geübter Pixler nicht alles gleich gut kann und die eigenen Ressourcen durch die von anderen erweitern und/oder aufstocken muss.
Ebenso lohnt sich ein Blick in die Ressourcen-Center und Foren auf der Suche nach passenden und abwechslungsreichen Templates.
Templates
Vorlagen für Sprites, egal ob Schachbrettmuster in der passenden Größe, oder nackte Körper für Charaktere – man nennt sie Templates. Ein gutes Template kann einem die halbe Arbeit abnehmen, gute Proportionen, flüssige und ansehnliche Animationen, gelungene Posen, passende Schattierung.
gutes Template | schlechtes Template
Weitere Templates der unterschiedlichsten Stile kann man in den Foren und Ressourcen-Datenbanken finden.
Pixeln - die Grundlagen
Dieser zweite Teil des Kurses beschäftigt sich vorwiegend mit den Grundlagen des Pixelns, wobei besonders Tiefe, Lichteinwirkung und Colorierung ins Visier genommen werden.
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: