Wie unsere Grafiken entstehen
Dienstag, 12 Januar 2010 abstauberDas neue Jahr hat begonnen, die Arbeiten an der Schattenreise gehen weiter, warum nicht also auch mal was Neues aus dem Nähkästchen holen.
Unteres Fach, hinter der Zierbordüre links, unter den Knöpfen: Pixel Art!
Ich habe diesen Hintergrund als Lehrobjekt gewählt, weil er komplett mit der Maus entstanden ist. Keine Vorzeichnung, kein Tabelett, nichts gescannt. Mit anderen Worten: kein Talent notwendig, sondern nur Ausdauer.
Als Programm taugt eigentlich alles, was Ebenen unterstützt und Pixel kennt. Ich habe Photoshop 7 benutzt (Bleistift/Pencil 1px), aber Paint .net, Gimp, GraphicsGale etc. können das ebenso gut.
Der Beginn
Fangen wir also an. Zuerst sollte man sich über die Abmessungen Gedanken machen. Unter diesem Bild muss noch Platz für eine LucasArts Verben-GUI bleiben, diese benötigt genau 58 Pixel in der Höhe. Also darf das tatsächliche Bild nicht größer als 320×142 px werden. Ist das geklärt, fangen wir wirklich an.
Ich habe mich für einen schwarzen Hintergrund entschieden, weil das fertige Werk überwiegend dunkel ist, bzw. es sich um einen geschlossenen Raum handelt. Für Landschaften würde ich wahrscheinlich mit hellblau anfangen, im Wald mit dunkelgrün.
Auf die Leinwand platziere ich als nächstes die Spielfigur, um ein Gefühl für die Größenverhältnisse zu bekommen.
Nun kommt vielleicht der wichtigeste Teil: das Grundgerüst. Wenn das nicht stimmt, ärgert man sich den Rest des Bildes. Eine kleine Bleistift/Kugelschreiber Skizze kann helfen, um diesen Teil zu beschleunigen.
Ha! Jetzt hab‘ ich natürlich geschrieben: „Zettel und Stift? Braucht kein Mensch“. Aber es geht wirklich schneller, wenn man sich vorher aufkritzelt, wie das Bild aussehen soll. Das kann ja auch gerne ein Lageplan oder so sein – es ist nur wichtig, dass man in etwa weiß, was man will.
Hier also das Ergebnis meiner Bemühungen:
Man sollte sich in dieser frühen Phase auch Gedanken über die Lichquellen machen.
Die Perspektive ist nicht sonderlich aufregend oder kompliziert. Als Hilfestellung habe ich auf einem seperaten Layer (Ebene) Hilfslinien gezeichnet. Das sieht dann so aus:
Die Horizontlinie sollte man dabei auf keinen Fall vergessen.
Am unteren Rand sieht man auch schon, dass ich die Palette vorbereitet habe.
Die Palette
Beim Pixeln nutze ich eigentlich nie die Palettenverwaltung der einzelnen Malprogramme, ich finde es wesentlich übersichtlicher, die Palette direkt in das Bild zu malen. Idealerweise nimmt man hier auch einen eigenen Layer.
Für eine bessere Übersicht erstelle ich für jeden Bereich des Bildes eine eigene Palette, die Farben mische ich nicht mit RGB sondern mit HSB (Farbton/Hue, Sättigung/Satuation und Helligkeit/Brightness). Hier ein Beispiel:
Ich beginne mit der dunkelsten Farbe, dann erhöhe ich die Helligkeit und verringere die Sättigung. Das ganze wird wiederholt, bis man ausreichend mit Farben versorgt ist.
Grundierung
Sind jetzt alle Zweifel beseitigt beginnt die grobflächige Grundierung. Hier sei zur Farbwahl noch erwähnt, dass sich die Farben möglichst nicht beißen sollten. Macht euch einfach frei von: Stuhl = Holz = Braun, Hose = Jeans = Blau oder Wand… äh… ich hab nur weiße Raufaser zu hause.
Bei http://kuler.adobe.com/ gibt es unzählige Palettenmöglichkeiten und einen Farbenmischer (links auf ‚Create‘ klicken), mit dem man zusammenpassende Farben ermitteln kann. Ich habe mich bei der Wand für ein mattes Grün entschieden.
Auch habe ich die beiden Lichtquellen hinzugefügt. Die Lampe auf der rechten Seite hatte ich in der Planungsphase gar nicht auf der Rechnung. Beim Kolorieren ist mir dann aber aufgefallen, dass der rechte Bereich sonst einfach schwarz bleiben müsste – also *zack*, Lampe. Auf dem Boden sieht man auch schon eine Textur, die habe ich in Wirklichkeit aber viel später hinzugefügt (mit „Rauschen hinzufügen).
Ich versuche immer zu vermeiden, dass große, freie Flächen entstehen. Die Wand in diesem Bild ist so ein Vertreter. Ursprünglich war sie komplett in oliv-braun gehalten und sah unglaublich langweilig aus, also sind für’s erste grünen Ränder hinzugekommen. Bei Ratlosigkeit kann man gerne Photos zum gleichen Thema zu suchen. Zum Beispiel hier in den Kategorien Marine, Bundeswehr, Krankenhaus etc. Flickr ist voll mit guten Ideen.
Mit den grünen Streifen ist diese Riesenfläche schon mal etwas bezwungen. Im nächsten Schritt habe ich noch Türen eingebaut und die Wand in Platten segmentiert.
Für die Platten musste ich im unteren Bereicht erstmal üben, hier ist es wieder von Vorteil zu wissen, woher das Licht kommt.
Die Balance
Jetzt ist zwar die Wand entschärft, dafür wirkt nun der obere Teil sehr leer. Das Problem hat sich also verlagert und es muss wieder Abhilfe geschaffen werden.
Was hängt nun an Decken? Hmm… vielleicht ein Kompressor?
Ich habe zuerst mit einer grünen Kiste angefangen und dann versucht, ein paar Details herauszuarbeiten. Jetzt klebt immerhin ein Kompressor unter der Decke. Der muss ja an irgendwas angeschlossen sein… Rohre! Die erwartet man sowieso in einem Keller/Verließ. Also zimmere ich von hinten nach vorn ein paar Rohre an die Decke:
Das „faule“ Rohr, ein Balken im Hintergrund.
Das räumliche Rohr, dass auch die linke Wand miteinbezieht.
Die letzten Rohre, die am nähesten am Betrachter liegen. Außerdem kann ich nun den Schattenwurf der Rohre andeuten.
Jetzt kippt das Bild nicht mehr und wir können uns um die Details kümmern.
Flächen füllen
Die rechte Wand ist noch sehr kahl und auch in der Mitte gibt es Platz zu füllen. Da der rechte Teil ohnehin eine Zelle werden soll, habe ich mich für eine Pritsche und ein Pfütze entschieden. Die Wand selbst hat ein „komisches Muster“ bekommen. Ich weiß selbst nicht so genau, was das sein soll, aber in StarWars ist auch immer komisches Zeug an den Wänden 🙂
Für den Maßstab der Pritsche habe ich den Häftling als zusätzliche Ebene eingefügt, so kann man auch gut den Abstand zum Boden abschätzen.
Betrachten wir das Bild wieder als Ganzes, so fällt jetzt die kahle Fläche in der Mitte auf – Zeit für einen Schreibtisch. Je nach Muße könnte man auch eine Nische einbauen oder anderes Mobiliar.
Der Schreibtisch bietet noch den Vorteil, dass ich eine Weltkarte drüber hängen kann. Mit einem großen Schrank wäre wahrscheinlich nichts gewonnen, weil das wieder eine kahle Fläche wäre.
Wie dem auch sei, eine weitere freie Fläche gibt es noch. Diesmal ist es die Trennwand in der Mitte. Hier habe ich Regal eingeplant und weil die Zelle auf der rechten Seite wahrscheinlich ein Frischluftproblem bekommen würde, setze ich noch ein Lüftungsgitter darüber.
Die Jagd nach freien Flächen ist beinahe vorrüber. Im oberen Teil des Bildes kann man noch sehen, dass ich ich ein Lüftungsgitter eingebaut habe, sowas ist immer schnell zu pixeln und passt gut zu den Rohren. Von der Komposition her würde ich sagen, das wir gut davor sind.
Man soll so einen Hintergrund ja auch nicht überfrachten – Hauptsache, dass alles einigermaßen balanciert ist. Für das Spiel, für das das Bild entstanden ist, fehlt nun noch ein Kummerkasten und Telefon. Auch hier ist der Schreibtisch eine gute Wahl, weil wieder beide Gegenstände zu ihm passen. Eine Turbiene oder ein Fahrradständer wäre hier wieder Käse.
Was noch an diesem Bild auffällt, ist die Sterilität. Abgesehen von der Pfütze ist der Raum quasi unbenutzt. Um hier der Glaubwürdigkeit nachzuhelfen, habe ich ihn rosten lassen. Das geht am besten, wenn man wieder einen Layer nimmt und dort mit Rostfarbe (hier die Farbe von der Pritsche) und geringer Deckkraft loslegt. Fast jedes Malprogramm bietet die Möglichkeit, die Deckkraft eines Pinsels einzustellen, ich habe hier 30% Deckkraft genommen.
Um den Rost überzeugend anzubringen muss man sich auch überlegen, wo Rost entsteht. Er breitet sich z.B. gerne von Ecken oder Kanten aus. Auch Rohrmündungen bieten eine gute Angriffsfläche.
Hier das vorläufige Ergebnis:
Das sieht doch schon wesentlich überzeugender aus. Diese atmosphärischen Kniffe sollte man möglichst spät einbauen. Falls man doch noch was ändern muss, stören Rost und Schatten ungemein. Gerade bei nachträglichem Schattenwurf muss man vieles von vorne zeichnen.
Objekte
Bei Adventures kommt es durchaus mal vor, dass man den Hintergrund „manipulieren“ kann: also Gegenstände mitnehmen oder Türen öffnen, so auch hier. Damit es hier keine Probleme gibt, sollten diese Objekte dringend auf eigene Ebenen gepixelt werden. Ich erstelle die Türen immer so, dass die offene Tür durch ein Objekt dargestellt wird. Außerdem soll es in dem Spiel ein paar Clipboards geben, die mitgenommen werden können.
Hier das Bild mit den Objekten:
Und zur Verdeutlichung mit einer farbigen Ebene dahinter:
Diese Ansicht nutze ich auch immer, um die Objekte dann zu importieren.
Der letzte Schliff
Jetzt sollte soweit alles fertig sein. Der Nachteil an meiner Farbenmischerei ist allerdings, dass die Bilder nicht unbedingt vor Kontrast sprühen. Deshalb experimentiere ich am Ende gerne mit Bildeffekten (Sättigung, Kontrast etc).
Zum Schluss noch die Paletten entfernt (und ich habe die linke Treppe auch noch etwas verdünnt) und das Werk ist bereit, ins Spiel eingebaut zu werden.
Bei dem Spiel handelt es sich übrigens um AeroNuts. Falls Ihr mal einen Versuch wagen wollt, nur zu 🙂
Eine kleine Checkliste
Zum Abschluss möchte ich euch noch eine kleine Checkliste mit auf den Weg geben, die die Planung von solchen Hintergründen erleichten soll.
- Spielt die Szene draußen oder drinnen
- Wo spielt die Szene (Fotos besorgen, Flickr oder Google)
- Von wo kommt das Licht
- Ist die Szene glaubwürdig
- Welche Leute/Charaktere spielen eine Rolle und wo stehen sie
- Welche Objekte werden benötigt, was gehört in den Hintergrund
- Passen die Farben zusammen
Und für die ganz kritischen Zeichner: Ist das Bild spannend, hat es Tiefe, stimmt die Komposition?
Ende
Also, vielen Dank für’s Lesen. Falls Ihr Fragen habt, immer gerne.
Filed under: Neues | Comments (11)
Comment — Mittwoch, 13 Januar 2010 @ 19:01
Super Einblick, danke dafür. Ist sehr spannend zu sehen, wie du so an die Sache herangehst.
Pingback — Dienstag, 8 Juni 2010 @ 15:57
[…] How pixel art for games is made In this tutorial game developer share steps to create pixel art background and character. […]
Comment — Dienstag, 10 August 2010 @ 08:46
Sehr inspirierender und lehrreicher Post! Vielen Dank dafür. Habe gerade erst AGS entdeckt und dies war sehr interessant für mich.
Comment — Mittwoch, 18 August 2010 @ 10:15
Schön, dass es dir gefallen hat und Danke für’s Feedback 🙂
Comment — Mittwoch, 24 November 2010 @ 15:37
WOW! Das ist ein Super Thread! VIELEN DANK!
Comment — Mittwoch, 16 Februar 2011 @ 12:16
Super Artikel und tolle Arbeit!
Was mich noch interessieren würde, wie wurden damals bei Spielen wie Simon the Sorcerer o.ä. die
Hintergründe erstellt bzw. animiert?
Wie würde man z.B. einen Wasserfall in den Hintergrund integrieren oder Wellen? Sind das extra Objekte oder Teile des Hintergrundes?
Gruß und vielen Dank!
Comment — Sonntag, 19 Februar 2012 @ 18:26
Thanks for sharing! Great guide
Comment — Samstag, 31 März 2012 @ 20:18
thank you, greatly apreciated guide. can’t wait for the game to be finished
Comment — Mittwoch, 27 Juni 2012 @ 09:56
This is really awesome tutorial.. I’m just a beginner to pixel art.
Thanks for sharing with us…
Pingback — Sonntag, 2 Februar 2014 @ 21:19
[…] How pixel art for games is made […]
Comment — Dienstag, 1 August 2017 @ 23:47
Hey wie sieht es hier aus? Gibts ne Demo?
Kann man helfen?
Mfg