Herzlich willkommen zu meinem ersten Pixeltutorial!
Das hier ist das Pixeltutorial aus der Maker's Mag Ausgabe #2. Damit sich nicht jeder gleich das ganze Magazin herunterladen muss stelle ich es hier nochmal bereit. Es ist sicher am praktischsten, wenn ihr euch die einzelnen Bilder in Paint oder einem anderen Grafikprogramm anguckt und sie gegebenenfalls vergrößert, um alle Details zu erkennen.
Ich werde mit euch dieses Vertical Scrolling Shooter - Raumschiff pixeln:
1.) Dazu benötigen wir nur das Programm "Paint", das bei Windows schon dabei liegt, und ein wenig Geduld.
Dieses Tutorial soll die Arbeitsweise beim Pixeln verdeutlichen sowie einige Tipps und Tricks zum weiteren Arbeiten bieten. Ich fange für das Raumschiff mit einer Technik an, die ich jetzt einfach mal "Shape-Technik" nenne. bevor man sich eine solche Silhouette bastelt, müssen aber natürlich erstmal die Farben her. in diesem Schritt beschränken wir uns allerdings erstmal nur auf eine Grundfarbe der einzelnen Töne. Diese sollte, da es sich um ein Raumschiff handelt nicht allzu knallig und von der Helligkeit eher im mittleren Tonwertbereich sein. Dann gehts auch schon los, der Kreativität sind dabei nur insofern Grenzen gesetzt, als dass der Spieler unseres Scrolling Shooters das Raumschiff auch als solches erkennen kann. Das klingt zwar banal, es steckt aber mehr dahinter als man denkt, da bestimmte Farben und Formen falsche Assoziationen hervorrufen können. Und keiner will mit einem Staubsauger im Weltall umhergurken, nur weil der Grafiker Lust auf ein Rohr am Cockpit hatte.
Meine Shape sieht also wie folgt aus:
1.)
Ein einfaches Raumschiff im typischen Düsenjet-Look war mir zu langweilig, daher habe ich mich für diese Helikopter-artige Variante entschieden.
2.) Der nächste Schritt lässt sich schnell beschreiben. Ich teile die Shape im Inneren in mehrere Grundflächen auf und füge noch kleine Details hinzu die mir gerade so einfallen.
2.)
3.) Nächster Schritt, selbes Spiel. Mehr Grundflächen, zusätzliche Details. Zudem definiere ich jetzt eine vollständigere Farbpalette für das spätere Shading. Ausgehend vom Grundton in der Mitte gehe ich einfach mal 2 Schritte nach oben und 3 Schritte nach unten. Später kann ich, wenn es eine konkrete Situation verlangt, natürlich auch noch spezifischere Farben mixen. Meine Pixeltechnik hat sich so entwickelt, dass ich so viele Farben benutze wie ich es für nötig halte. Ich bleibe nicht bei zum Beispiel 16 Farben, einfach aus dem Grund dass es heutzutage eh keinen wirklichen Unterschied mehr macht und ich mit mehr Farben einfach mehr Kontrolle hab. Für das Abstufen der Farben gehe ich aber nicht einfach hoch und runter in der Helligkeit. Um lebendigere Farben zu schaffen nehme ich bei dunkleren Farben mehr die Sättigung hinaus und gehe leicht in einen bläulichen Bereich, damit diese in dunklen Bereichen kälter wirken. Der helle Bereich richtet sich ganz nach Lichtumgebung, da man bei Videospiel-Sprites eine konkrete Lichtumgebung nur in den seltensten Fällen definieren kann (das wäre möglich wenn ich zum Beispiel eine Straßenlaterne habe, die gelbes Licht auf den Boden und sich selbst wirft), gehe ich meistens einfach nur in der Hellligkeit rauf.
3.)
4.) Soviel zu den Farben. Kommen wir zum Shading. Hier im ersten Shading-Schritt interessiert mich erst mal nur die gelbe Lackierung des Raumschiffs. Ausserdem definiere ich fürs erste nur die dunklen Teile, also die Schatten. Was ich unbedingt vermeiden möchte ist das sogenannte Pillow-Shading, d.h. einfach zu den Rändern der Fläche hin dunkler werden. Daher setze ich meine Lichtquelle nach oben, leicht von vorne. Jetzt, da Tonwerte ins Spiel kommen muss man auf genauere Hell-Dunkel-Verteilung achten. Nicht nur, dass konkrete Teile des raumschiffs Volumen durch Lichteinfall benötigen, die Allgemeinform muss auch durch helle und dunkle Teile kontrastreich dargestellt werden. Bei meinem Raumschiff brauche ich darauf nicht stark zu achten, da ich quantitativ schon einen Kontrast zwischen vorderem und hinterem Teil habe. Ich setze also einfach mal ein paar grundlegende Schatten, im hinteren Teil war mir langweilig und ich hab dem Heckflügel schon etwas Struktur gegeben.
4.)
5.) Schritt 5 macht da weiter wo Schritt 4 aufgehört hat. Nun betrachte ich auch die grauen Teile des Raumschiffs und gebe denen etwas Schatten. Der Schlagschatten, den der gelbe Hauptteil auf die beiden grauen Flügel links und rechts wirft ist ein sehr scharfer Schatten, da die Distanz zwischen beiden Elementen nicht sehr groß ist. Das heisst, wir nehmen einen hohen Kontrast und wenige Shading-Farben. Wir stehen nun kurz vor der Ausarbeitung der Details.
5.)
6.) In Schritt 6 kümmere ich mich um genaue Details. Auch hier betrachten wir wieder das Gesamtbild, denn zu viele Details lassen das Raumschiff überladen wirken. In dieser Phase sollte man auch definitiv nochmal an die story-telling Elemente denken, das heisst, was das überhaupt für ein Raumschiff ist. Dazu deute ich noch ein wenig Technik auf dem "Dach" an, Rohre und Lämpchen sind da immer gut.
Ab diesem Schritt ändert sich die Arbeitsweise bei mir ein wenig. Ich gehe nun weniger systematisch vor und schaue einfach wo ich durch mehr Shading-Farben noch Kontraste verstärken muss, oder wo sich Detailausarbeitungen anbieten. Auch ändere ich so manches noch einmal ab, weil es mir doch nicht mehr so gefällt, zum Beispiel die Verbindung des vorderen Raumschiffteils mit dem Heck. Und nicht vergessen, das Licht kommt leicht von vorne.
Eine spezielle Frickelarbeit ist in diesem Fall das Innere des Cockpits, da es durch die bläuliche Glasscheibe stark farbverfälscht wird. Ich habe hier ein wenig getrickst und die Eigenfarbe der Anzeigen, Sessel und Amaturenbretter im Inneren nicht wirklich beachtet. Die Tonwerte reichen da eigentlich schon aus. Der Boden sollte am dunkelsten sein, da er am tiefsten im Inneren ist.
6.)
7.) Beim näheren Betrachten ist mir aufgefallen, dass das Raumschiff allgemein etwas schwach wirkt, und von gegnerischen Attacken wohl leicht zerrissen werde würde. Um die Form etwas zu stärken baue ich also noch Turbinen an die Seiten. Das ist insofern nur ein Trick, dass sie die Statik des Raumschiffes nicht wirklich stärken, aber es optisch dominanter wirken lassen. Desweiteren habe ich noch ein wenig am Shading rumgefeilt und noch einen sehr dunklen Ton eingebaut, den ich an manchen Stellen als Outline benutzt habe. Damit ist aber eher sparsam umzugehen, da der Hintergrund im Weltall sowieso schwarz ist und ein Shading ins zu dunkle das Raumschiff nur verschlucken würde. Das ist ungünstig, da der Spieler sein Raumschiff als Einzelobjekt erkennen muss.
7.)
8.) Schritt 8 ist eigentlich nur ein Experiment um zu gucken ob sich die Form noch extremer abändern und verstärken lässt. Leider ist dadurch die schöne Helikopter-Form verloren gegangen und das Raumschiff weiss nicht so recht was es sein will.
Andererseits wirkt es jetzt durchschlagskräftiger und bulliger.
Ob einem nun das Raumschiff vom Schritt zuvor oder dieses hier besser gefällt ist wohl jedem selbst überlassen. Man sieht also, dass man immer mal rumprobieren muss. Ganz fleißige Kameraden können ja auch mal in der Hue-Leiste rumdrehen um zu gucken ob eine andere Farbe dem Raumschiff nicht besser stehen würde. Rot oder grün könnte ich mir gut vorstellen.
8.)
Allgemein ist die Zusammenarbeit von spieltechnischem Element und grafischer Schönheit also entscheidend. Viele Regeln aus allen Teilgebieten der Kunst und des Grafischen im Gesamten lassen sich übertragen. Zu beachten sind neben Farben und Form also auch Tonwerte, Schattenwurf, Lichtakzente, Material eines Objekts, Funktion des Dargestellten, Stil, Transparenz und andere Farbverfälschungen, auch ducrh Licht und vieles, vieles andere.
Nun ist es an der Zeit sich zurückzulehnen, dem Programmierer die Grafik zu schicken und ihn weiter werkeln zu lassen. ;P
Ich hoffe dieses Tutorial war hilfreich und hat euch wieder auf die Lust zum Pixeln gebracht. Das war's von meiner Seite.
Viel Spaß noch beim Pixeln,
ElementZero
Das hier ist das Pixeltutorial aus der Maker's Mag Ausgabe #2. Damit sich nicht jeder gleich das ganze Magazin herunterladen muss stelle ich es hier nochmal bereit. Es ist sicher am praktischsten, wenn ihr euch die einzelnen Bilder in Paint oder einem anderen Grafikprogramm anguckt und sie gegebenenfalls vergrößert, um alle Details zu erkennen.
Ich werde mit euch dieses Vertical Scrolling Shooter - Raumschiff pixeln:
1.) Dazu benötigen wir nur das Programm "Paint", das bei Windows schon dabei liegt, und ein wenig Geduld.
Dieses Tutorial soll die Arbeitsweise beim Pixeln verdeutlichen sowie einige Tipps und Tricks zum weiteren Arbeiten bieten. Ich fange für das Raumschiff mit einer Technik an, die ich jetzt einfach mal "Shape-Technik" nenne. bevor man sich eine solche Silhouette bastelt, müssen aber natürlich erstmal die Farben her. in diesem Schritt beschränken wir uns allerdings erstmal nur auf eine Grundfarbe der einzelnen Töne. Diese sollte, da es sich um ein Raumschiff handelt nicht allzu knallig und von der Helligkeit eher im mittleren Tonwertbereich sein. Dann gehts auch schon los, der Kreativität sind dabei nur insofern Grenzen gesetzt, als dass der Spieler unseres Scrolling Shooters das Raumschiff auch als solches erkennen kann. Das klingt zwar banal, es steckt aber mehr dahinter als man denkt, da bestimmte Farben und Formen falsche Assoziationen hervorrufen können. Und keiner will mit einem Staubsauger im Weltall umhergurken, nur weil der Grafiker Lust auf ein Rohr am Cockpit hatte.
Meine Shape sieht also wie folgt aus:
1.)
Ein einfaches Raumschiff im typischen Düsenjet-Look war mir zu langweilig, daher habe ich mich für diese Helikopter-artige Variante entschieden.
2.) Der nächste Schritt lässt sich schnell beschreiben. Ich teile die Shape im Inneren in mehrere Grundflächen auf und füge noch kleine Details hinzu die mir gerade so einfallen.
2.)
3.) Nächster Schritt, selbes Spiel. Mehr Grundflächen, zusätzliche Details. Zudem definiere ich jetzt eine vollständigere Farbpalette für das spätere Shading. Ausgehend vom Grundton in der Mitte gehe ich einfach mal 2 Schritte nach oben und 3 Schritte nach unten. Später kann ich, wenn es eine konkrete Situation verlangt, natürlich auch noch spezifischere Farben mixen. Meine Pixeltechnik hat sich so entwickelt, dass ich so viele Farben benutze wie ich es für nötig halte. Ich bleibe nicht bei zum Beispiel 16 Farben, einfach aus dem Grund dass es heutzutage eh keinen wirklichen Unterschied mehr macht und ich mit mehr Farben einfach mehr Kontrolle hab. Für das Abstufen der Farben gehe ich aber nicht einfach hoch und runter in der Helligkeit. Um lebendigere Farben zu schaffen nehme ich bei dunkleren Farben mehr die Sättigung hinaus und gehe leicht in einen bläulichen Bereich, damit diese in dunklen Bereichen kälter wirken. Der helle Bereich richtet sich ganz nach Lichtumgebung, da man bei Videospiel-Sprites eine konkrete Lichtumgebung nur in den seltensten Fällen definieren kann (das wäre möglich wenn ich zum Beispiel eine Straßenlaterne habe, die gelbes Licht auf den Boden und sich selbst wirft), gehe ich meistens einfach nur in der Hellligkeit rauf.
3.)
EXKURS: Schatten
Grundlegend gibt es 2 Arten von Schatten:
Körper- oder Eigenschatten:
Das was man im Grunde Shading nennt. Leuchtet man mit einer Lampe frontal auf einen Baumstamm wird dieser zu den Seiten hin, bedingt durch seine runde Form, dunkler.
Schlagschatten:
Schatten, die Gegenstände auf andere Gegenstände werfen.
Scheint die Sonne von oben auf einen Baum wirft dieser Schatten auf den Boden. Ein Gegenstand kann durchaus auch einen Schlagschatten auf sich selbst werfen.
4.) Soviel zu den Farben. Kommen wir zum Shading. Hier im ersten Shading-Schritt interessiert mich erst mal nur die gelbe Lackierung des Raumschiffs. Ausserdem definiere ich fürs erste nur die dunklen Teile, also die Schatten. Was ich unbedingt vermeiden möchte ist das sogenannte Pillow-Shading, d.h. einfach zu den Rändern der Fläche hin dunkler werden. Daher setze ich meine Lichtquelle nach oben, leicht von vorne. Jetzt, da Tonwerte ins Spiel kommen muss man auf genauere Hell-Dunkel-Verteilung achten. Nicht nur, dass konkrete Teile des raumschiffs Volumen durch Lichteinfall benötigen, die Allgemeinform muss auch durch helle und dunkle Teile kontrastreich dargestellt werden. Bei meinem Raumschiff brauche ich darauf nicht stark zu achten, da ich quantitativ schon einen Kontrast zwischen vorderem und hinterem Teil habe. Ich setze also einfach mal ein paar grundlegende Schatten, im hinteren Teil war mir langweilig und ich hab dem Heckflügel schon etwas Struktur gegeben.
4.)
Ein Tonwert ist der Grau-Wert einer Farbe (nicht zu verwechseln mit dem Grau-Anteil!). Würde man ein normales Bild in Graustufen umwandeln hätten bestimmt irgendwelche Gegenstände den selben Grauton, was den Betrachter irritieren würde. Wenn man ein Bild malt oder etwas pixelt sollte man also darauf achten, dass die Tonwerte verschiedener Farben sauber getrennt sind, da es sonst unschön wirken würde. Was dabei sehr nützlich sein kann, ist, Bilder erstmal nur in Grautönen anzufertigen um dort schöne Kontraste zu erreichen.
5.) Schritt 5 macht da weiter wo Schritt 4 aufgehört hat. Nun betrachte ich auch die grauen Teile des Raumschiffs und gebe denen etwas Schatten. Der Schlagschatten, den der gelbe Hauptteil auf die beiden grauen Flügel links und rechts wirft ist ein sehr scharfer Schatten, da die Distanz zwischen beiden Elementen nicht sehr groß ist. Das heisst, wir nehmen einen hohen Kontrast und wenige Shading-Farben. Wir stehen nun kurz vor der Ausarbeitung der Details.
5.)
6.) In Schritt 6 kümmere ich mich um genaue Details. Auch hier betrachten wir wieder das Gesamtbild, denn zu viele Details lassen das Raumschiff überladen wirken. In dieser Phase sollte man auch definitiv nochmal an die story-telling Elemente denken, das heisst, was das überhaupt für ein Raumschiff ist. Dazu deute ich noch ein wenig Technik auf dem "Dach" an, Rohre und Lämpchen sind da immer gut.
Ab diesem Schritt ändert sich die Arbeitsweise bei mir ein wenig. Ich gehe nun weniger systematisch vor und schaue einfach wo ich durch mehr Shading-Farben noch Kontraste verstärken muss, oder wo sich Detailausarbeitungen anbieten. Auch ändere ich so manches noch einmal ab, weil es mir doch nicht mehr so gefällt, zum Beispiel die Verbindung des vorderen Raumschiffteils mit dem Heck. Und nicht vergessen, das Licht kommt leicht von vorne.
Eine spezielle Frickelarbeit ist in diesem Fall das Innere des Cockpits, da es durch die bläuliche Glasscheibe stark farbverfälscht wird. Ich habe hier ein wenig getrickst und die Eigenfarbe der Anzeigen, Sessel und Amaturenbretter im Inneren nicht wirklich beachtet. Die Tonwerte reichen da eigentlich schon aus. Der Boden sollte am dunkelsten sein, da er am tiefsten im Inneren ist.
6.)
7.) Beim näheren Betrachten ist mir aufgefallen, dass das Raumschiff allgemein etwas schwach wirkt, und von gegnerischen Attacken wohl leicht zerrissen werde würde. Um die Form etwas zu stärken baue ich also noch Turbinen an die Seiten. Das ist insofern nur ein Trick, dass sie die Statik des Raumschiffes nicht wirklich stärken, aber es optisch dominanter wirken lassen. Desweiteren habe ich noch ein wenig am Shading rumgefeilt und noch einen sehr dunklen Ton eingebaut, den ich an manchen Stellen als Outline benutzt habe. Damit ist aber eher sparsam umzugehen, da der Hintergrund im Weltall sowieso schwarz ist und ein Shading ins zu dunkle das Raumschiff nur verschlucken würde. Das ist ungünstig, da der Spieler sein Raumschiff als Einzelobjekt erkennen muss.
7.)
8.) Schritt 8 ist eigentlich nur ein Experiment um zu gucken ob sich die Form noch extremer abändern und verstärken lässt. Leider ist dadurch die schöne Helikopter-Form verloren gegangen und das Raumschiff weiss nicht so recht was es sein will.
Andererseits wirkt es jetzt durchschlagskräftiger und bulliger.Ob einem nun das Raumschiff vom Schritt zuvor oder dieses hier besser gefällt ist wohl jedem selbst überlassen. Man sieht also, dass man immer mal rumprobieren muss. Ganz fleißige Kameraden können ja auch mal in der Hue-Leiste rumdrehen um zu gucken ob eine andere Farbe dem Raumschiff nicht besser stehen würde. Rot oder grün könnte ich mir gut vorstellen.
8.)
Allgemein ist die Zusammenarbeit von spieltechnischem Element und grafischer Schönheit also entscheidend. Viele Regeln aus allen Teilgebieten der Kunst und des Grafischen im Gesamten lassen sich übertragen. Zu beachten sind neben Farben und Form also auch Tonwerte, Schattenwurf, Lichtakzente, Material eines Objekts, Funktion des Dargestellten, Stil, Transparenz und andere Farbverfälschungen, auch ducrh Licht und vieles, vieles andere.
Nun ist es an der Zeit sich zurückzulehnen, dem Programmierer die Grafik zu schicken und ihn weiter werkeln zu lassen. ;P
Ich hoffe dieses Tutorial war hilfreich und hat euch wieder auf die Lust zum Pixeln gebracht. Das war's von meiner Seite.
Viel Spaß noch beim Pixeln,
ElementZero
"Leben. Erzähl' mir bloß nichts vom Leben."
