Texturen Teil 1 - Ein kleiner Einstieg am Beispiel Landschaften

Relativ einfach zu erstellen: Sand, Gras, Wasser, Erde, Fels

Im allgemeinen lässt man Photoshop eine Struktur wie z.B. "Störungen" oder "Wolken" erzeugen und verfremdet diese durch Filter und Einfärben solange, bis man das gewünschte Ergebnis hat. Welche Filter und Einstellungen dazu führen ist größtenteils Erfahrungssache. Dieses Tutorial soll den Start in die richtige Richtung zeigen, um weitere Erfahrungen zu sammeln.

Die einfachste und somit unsere erste Textur ist wohl Sand. Aber keine Sorge - es wird Stück für Stück komplexer!

Simpel: Sand

Durch Klick auf die Vordergrundfarbe wird ein Graubeige gemischt. Für Farb-Neulinge hier ein kleiner Exkurs über das Farbenmischen:

Mein favorisiertes Farbsystem für RGB-Bilder ist das HSB-System (Hue=Farbwert, Saturation=Sättigung, Brightness=Helligkeit). Im Regenbogenbalken wählt man den Grundfarbton. Im großen Feld links ist dieser Farbton in allen Möglichkeiten mit Schwarz und Weiß vermischt. Brauntöne findet man zwischen Rot und Gelb, so auch unser Sandbeige.

 

Mit Bearbeiten - Fläche füllen, Vordergrundfarbe, 100%, wird unsere gesamte Bildfläche eingefärbt.

Anschließend wird mit Filter - Störungsfilter - Störungen hinzufügen eine körnige Struktur erzeugt. Hierzu sollte je nach Geschmack ein Wert zwischen 10 und 20 sowie Gaußsche Normalverteilung und Monochrom eingestellt sein. Monochrom bedeutet hier nicht schwarzweiß, sondern dass jedes Pixel nur innerhalb seines eigenen Farbwertes verrauscht wird. Somit gelangen keine Fremdfarben in das Bild.

Für das obige Beispiel wurde zusätzlich mit dem Gaußschen Weichzeichner und einem Radius von 0.5 weichgezeichnet, danach erneut Störungen mit der Stärke 10 hinzugefügt.

Damit ist unser Sand schon fertig. Dafür hätte sich nun wirklich kein Tutorial gelohnt, jedoch steht dieser oder ein ähnlicher Vorgang am Anfang vieler künstlicher Texturen. Wie z.B. bei der folgenden.

 

 

 

Licht- und Schattenspiel: Gras

Angefangen wird mit einem Schwarzgrün als Hintergrundfarbe. Mit einem Störungswert von ca. 50 werden viele kräftiggrüne Pixel hinzugefügt, das kann man schon fast als Rasen, direkt von oben gesehen, durchgehen lassen:

An dieser Stelle sollte man sich eine Überlegung gönnen, wie die Optik einer solchen Struktur überhaupt zustandekommt. Immerhin gibt es ja keine schwarzen Grashalme. Das Geheimnis liegt wie bei den meisten Texturen im richtigen Zusammenspiel von Licht und Schatten:

Dort wo die dünnen Grasspitzen vom Licht getroffen werden, scheinen sie fast von selbst zu leuchten, während in bodennahen Bereichen, in denen sie sich selbst abschatten, viel Schwarz zu sehen ist.

Von schräg oben gesehen müsste Gras also fast wie viele feine Linien aussehen, die mit Mittel- bis Hellgrün anfangen und nach unten in Schwarz verlaufen. Dabei sollten die hellsten Spitzen zu den längsten Grashalmen gehören, da diese ja am weitesten ins Licht ragen. Tatsächlich gibt es in Photoshop einen Filter namens "Windeffekt" (unter "Stilisierungsfilter"), der einzelne Bildpixel in eine Richtung mit dem Hintergrund "verschmiert". Ausgehend vom obigen Bild muss man mit der Einstellung "Wind" das Bild anschließend nur noch um 90 Grad drehen, um eine Grasstruktur zu erhalten. Je nach Geschmack kann noch mit 0.5 Pixel weichgezeichnet werden (Gaußscher Weichzeichner).

Für isometrische Darstellung sicher eine gute Lösung. Bei kompletter 3D-Freiheit sollte man jedoch immer bedenken, dass man die Textur auch auf dem Kopf oder von der Seite sehen kann! Siehe auch Abschnitt "Kritisches Testen" im Teil 2.

 

 

 

Statisches Wasser

In Zeiten von Pixelshadern und Environment Mapped Bump Mapping eigentlich überholt, aber für die ersten Demoshots der eigenen Engine ganz brauchbar: eine simple Wassertextur.

Diesmal wird mit einem beliebten Startmuster für Texturen namens "Wolken" angefangen (Filter - Renderingfilter - Wolken). Hierbei werden automatisch die Vorder- und die Hintergrundfarbe benutzt, also müssen wir diese zuerst einstellen. Die Wahl für Wasser fällt hierbei auf ein dunkles Blau und ein helleres Türkis.

Nach dem Wolken-Filter sollte man noch ein paar Störungen hinzufügen. Für das Beispiel wurde ein Störungswert um 100 gewählt, je höher der Wert, desto spiegelnder wirkt das Wasser. Die Störungen werden noch mit dem Gaußschen Weichzeichner mit einem Wert von 2 gedämpft, anschließend Filter - Verzerrungsfilter - Kräuseln, volle Größe (999), Frequenz Mittel, schon steht uns das Wasser bis zum Hals:

Für einen Übergang vom Strand zum Wasser in schimmerndem Türkis kopiert man die Wassertextur und setzt sie in die Sand-Datei vom Anfang ein. Für das Wasser wurde nun automatisch eine eigene Ebene angelegt. Im Popupfenster "Ebenen" für das Wasser die Option "Hartes Licht" wählen - fertig. Auf diese Art kann man auch andere Texturen unter Wasser tauchen und somit seichtes Wasser erzeugen. Für Seegras eignet sich z.B. obige Grastextur. Unter Umständen kann man die untenliegende Textur noch leicht weichzeichnen oder Sättigung verringern. Stimmen alle Einstellungen, reduziert man wieder auf eine einzelne Ebene (Ebene - auf Hintergrundebene reduzieren).

Für das folgende Testbild wurden diese drei Texturen Sand, seichtes Wasser und Wasser überblendet und anschließend für die Mapping-Simulation in Photoshop perspektivisch verzerrt (Alpha-Blending und Preflight-Tests wie Mapping siehe auch Teil 2):

 

 

Erdboden

Naturböden gehören von Ihrer Farbe, Körnigkeit, gröberen Details usw. zu den vielfältigsten Texturen. Oft werden mehrere Ebenen mit verschiedenen Details und Farben übereinandergeblendet. Ich gehe an dieser Stelle nur auf eine einfache, einfarbige Textur ein. Im Verlauf des Tutorials wird man jedoch genug Möglichkeiten kennenlernen, mehrschichtige Texturen herzustellen (z.B. Granit, Teil 6, der bei entsprechender Färbung und BumpMapping auch als rauher Boden benutzt werden kann).

Eine der einfachsten Varianten für neutralen Boden ist folgende: In einem neuen Dokument wird der Hintergrund mit 50% Grau gefüllt und darauf Störungen mit der Stärke 50 angewendet. Dann mit dem Gaußschen Weichzeichner und einem Wert von 2 dämpfen. Filter - Stilisierungsfilter - Relief, Winkel 135, Höhe 1, Stärke 200, erzeugt die erste grobe Struktur. Dann nochmal Störungen, diesmal Stärke 10, und erneut Relief, Winkel 135, Höhe 1, Stärke 400.

Als letzter Arbeitsschritt fehlt noch das Einfärben: Bild - Einstellen - Farbton/Sättigung. Zuerst wird das Häkchen "Kolorieren" gesetzt. Die Sättigung sollte etwa bei 15 eingestellt werden. Im Beispiel lag der Farbwert bei 23 und die Helligkeit bei -31. An dieser Stelle sollte man unbedingt mit den Werten herumspielen, bis das gewünschte Ergebnis erscheint. Diese Art des Einfärbens wird an vielen Stellen des Tutorials benutzt werden, also schonmal üben!

 

 

Fels

Hier nimmt uns der Wolkenfilter den größten Teil der Strukturarbeit ab. Diesmal wird mit Schwarz und Weiß begonnen. Ebene - Ebene duplizieren erstellt eine identische zweite Ebene, die wir mit Filter - Stilisierungsfilter - Relief, im Beispiel Winkel 135 Grad, Höhe 1, Stärke 500, plastisch erscheinen lassen. Nach Belieben kann nun mit Bild - Einstellen - Helligkeit/Kontrast die Stärke des Reliefs festgelegt werden. Im Beispiel wurde die Helligkeit belassen, während Kontrast auf 88 erhöht wurde. Spätestens jetzt wird deutlich, warum "Wolken" auch gern als Heightmaps für Landschaften benutzt werden. Für das weitere Bearbeiten wird im Ebenen-Popup die Option "Ineinanderkopieren" für diese obere Ebene gewählt.

Nach dem Wechseln in die untere Ebene, die noch unser Original-Wolkenbild enthält, wird diese per Bild - Einstellen - Gradationskurve folgendermaßen angepasst, damit sie kein reines Schwarz und Weiß mehr enthält:

Wie bei der letzten Textur wird nun eingefärbt: Bild - Einstellen - Farbton/Sättigung, Kolorieren. Die Werte aus dem Beispiel: Farbwert 45, Sättigung 10, Helligkeit -20.

 

 

>> Weiter geht es mit Teil 2 - Kacheln, Alpha-Blending, Preflight-Tests

<< zurück zur Übersicht


(c) 2003 by J. Diehl