In diesem Tutorial erläutern wir eine Methode wie man Schritt für Schritt auf möglichst einfache und schnelle Weise effektiv und qualitativ ausreichende Gebäudetexturen erstellen kann. Ich habe mich bemüht stets ein paar Erläuterungen mitzuliefern und das ganze ggf. etwas ausführlicher zu machen, damit es auch für Photoshop-Anfänger geeignet ist. Der geneigte Profi kann sich ggf. auch nur anhand der Grafiken und zugehöriger Bildunterschrift etwas schneller durchhangeln. Viel Spaß dabei!

Texturen für Architekturvisualisierung und Game-Design

Bei der Texturierung von Architekturszenen kommt es häufig nicht nur auf ein Hauptgebäude an, welches es in Szene zu setzen gilt. Vielmehr werden für sekundäre Nachbargebäude oder sogar ganze Straßenzüge ebenfalls realistische Texturen benötigt. Diese Anforderungen finden sich häufig auch im Game-Design bzw. Level-Design wieder, bei dem ebenfalls Stadtszenen oder Straßenfronten Texturen benötigt werden, denen aber eher eine sekundäre Bedeutung zukommt.

In der Architekturvisualisierung kann die sekundären Bebauung auch gerne etwas zurückgenommen werden. Dies lässt sich z.B. gut durch die Material- und Textureinstellungen (Transparenz, Helligkeit oder Sättigung) realisieren.

Alles in allem bedeutet dies aber für die Gebäudetexturen, dass man diese gerne mit geringem zeitlichem Aufwand erstellen möchte, da man zum einen unter Umständen eine Vielzahl benötigt – zum anderen sich die Verwendung ggf. auf die sekundäre Bebauung beschränkt.

Anforderungen an Texturen für Gebäudefassaden

Als Basis soll für die Erstellung der Fassadentexturen dient uns z.B. ein Foto einer Bürofassade. Es ist immer besser, wenn die Fotos mehr oder weniger orthogonal, also frontal zum Gebäude, fotografiert wurden. Ansonsten hat man bei plastischen Fassaden gerne das Problem, dass z.B. die Fensterlaibungen nur auf einer Seite sichtbar sind und die Textur daher in der späteren Verwendung nicht stimmig wirkt.

Grundsätzlich sollte eine Textur folgende Eigenschaften haben, die man bei der Erstellung in Photoshop berücksichtigen muss:

• Die Textur sollte nahtlos kachelbar sein

• Es sollten keine Auffälligkeiten in der Textur stecken, die bei einer Wiederholung negativ auffallen (Kacheleffekt). Dies ist z.b. eine auffällige Wolkenspiegelung in einem Fenster die sich dann bei der Kachelung in jedem Fenster wiederholt.

Fassadentextur in Photoshop erstellen

Die Software unserer Wahl ist hier Photoshop (Version CS4) – die Schritte können aber analog ggf. mit leichten Anpassungen in früheren Versionen oder auch vergleichbaren Grafikprogrammen (z.B. The Gimp als kostenlose Alternative) nachvollzogen werden.

Schritt 1: Ausschnitt aus Foto auswählen und entzerrt freistellen

Zunächst müssen wir uns für einen Bereich entscheiden, den wir als Textur verwenden wollen. Wie bereits erwähnt sollte dieser Bereich möglichst orthogonal fotografiert sein und geringe Linsenverzerrungen aufweisen. Um diese Objektivverzerrungen, die automatisch bei kleinen Brennweiten entstehen, schnell und effektiv zu reduzieren kann ich „PT-Lense“ empfehlen, welches sich entweder in Photoshop als Plug-In unter Filter installiert oder als Stand-Alone tool daherkommt. Für dieses Tutorial ist das Plug-In aber nicht nötig.
Wir wählen zuerst einmal das Freistellungswerkzeug (Shortcut: C) aus und markieren grob den Bereich, den wir als Kachel für die Textur für geeignet halten. Anschließend werden die Griffe so verschoben, dass die Kachel auch möglichst exakt das sich wiederholende Muster der Fassade umgrenzt.

Wichtig ist, dass in den Werkzeugeinstellungen ein Haken bei „Persp. Bearbeiten“ gesetzt ist. Somit ist es dann auch möglich die Eckgriffe perspektivisch an das Foto anzupassen ohne in einem Rechteck freistellen zu müssen. Wenn die Auswahl ein möglichst einer Wiederholungskachel der Fassade entspricht muss lediglich mit der Eingabetaste bestätigt werden und Photoshop verzerrt die vorher noch perspektivische Auswahl automatisch auf eine rechteckige Fläche.

Schritt 2: Abstraktion der Textur in Photoshop

Eigentlich könnte man nach Bearbeitung der Übergänge diese Kachel bereits als Textur einsetzen. Jedoch erkennt man in dem Bild doch eine deutliche Spiegelung die bei häufiger Aneinanderreihung der Kachelung negativ auffallen würde. Da wir hier eine möglichst schnelle und doch qualitativ ausreichend Methode für die Texturierung von sekundären Gebäudefassaden vorstellen wollen nutzen wir das freigestellte Foto weiter zur Abstraktion. Hierzu wählen wir einen ca. 1px breiten Ausschnitt der über die ganze Höhe des Bildes geht und kopieren den Bereich mit rechter Maustaste in eine neue Ebene.

Anschließend transformieren wir den Bereich (STRG+T) in Längsrichtung über die komplette Bildbreite. Auf der einen Seite haben wir durch die Verwendung von einem Pixel eine gewisse Abstraktion erreicht. Auf der anderen Seite ist diese Textur direkt in X-Richtung kachelbar. Das Ergebnis sieht dann ungefähr so aus:

Schritt 3: Wiederholung der Schritte für die vertikale Y-Ausrichtung der Textur

Den letzten Schritt wiederholen wir jetzt noch einmal für die vertikale Richtung. Wir wählen also einen 1 Pixel hohe Auswahl des ursprünglichen Bildes aus, kopieren ebenfalls in neue Ebene und transformieren diese in Y-Richtung.

Schritt 4: Kombination der vertikalen und horizontalen Struktur

Als nächstes müssen wir diese beiden Ebenen aus horizontaler und vertikaler Struktur kombinieren. Hierzu wählen wir die Bereiche aus der horizontal skalierten Grafik aus, welche für die Textur relevant sind. Dies sind hier z.B. der obere und untere horizontale graue Betonstreifen und das Geländerelement.

Wir wählen wir mit dem Auswahlrechteck-Werkzeug (M) zunächst den oberen Bereich, anschließend könne wir mit gedrückter ALT Taste ebenfalls den unteren Bereich zur Auswahl hinzufügen. Um die Übergänge etwas fließender zu gestalten wollen wir die Auswahl mit „Weiche Kante“ etwas auflösen. Hierzu klicken wir mit Rechter Maustaste ins Bild und wählen „Weiche Kante“. In unserem Beispiel habe ich in der folgenden Abfrage als Radius 1-3px angegeben. Je höher der Wert desto weicher wird die Auswahl. Um den richtigen Wert zu finden ist es nützlich sich die Auswahl kurz mit dem Shortcut Q („Im Maskierungsmodus bearbeiten“ – Icon befindet sich unterhalb des Auswahlfeldes für Vorder- und Hintergrundfarbe) z.B. in rot darstellen zu lassen.

Nun wählen wir die Ebene mit der vertikalen Struktur aus und löschen den ausgewählten Bereich. Alternativ könnte man auch mit einer Ebenenmaske den Bereich ausblenden, um ggf. später Nachbesserungen an der sichtbaren Auswahl treffen zu können (nicht destruktive Arbeitsweise). Das Zwischenergebnis sieht ungefähr wie folgt aus und gibt eigentlich schon ganz gut den Charakter der ursprünglichen Fassade her.

Eigentlich könnten wir mit der Textur schon arbeiten – wir müssen lediglich noch einen nahtlosen Übergang in vertikaler Richtung sicherstellen. Durch das horizontale Transformieren eines schmalen Bildbereiches haben wir für die horizontale Richtung bereits automatisch einen nahtlosen Übergang.

Schritt 5: Nahtloser Übergang der Textur in vertikaler Richtung

Um auch für die vertikaler Richtung die Textur eine nahtlose Kachelung sicherzustellen markieren werden wir einfach eine schmale Auswahl im oberen Bereich wählen, diese nach unten gespiegelt kopieren und etwas mit dem Hintergrund verschmelzen lassen. Wir wählen also vom oberen Rand über die volle Breite einen ca. 10 px hohen Streifen aus und wählen wieder wie zuvor eine weiche Auswahl mit einem Radius von ca. 3 px. Nun müssen wir sicherstellen, dass die Ebene mit der horizontalen Struktur ausgewählt ist und kopieren die Auswahl wieder in eine neue Ebene. Die neue Ebene spiegeln wir dann vertikal (STRG+T dann rechte Maustaste) und verschieben sie nun ganz an den unteren Rand und können diese optional mit der horizontalen Ebene verbinden (STRG+E – wichtig: neue Ebene muss über der Ebene mit horizontaler Struktur liegen und aktiv sein). Das Ergebnis sieht nicht wirklich anders aus als der letzte Schritt jedoch haben wir nun eine Textur die in X als auch Y-Richtung nahtlose Übergänge besitzt und daher kachelbar ist.

Schritt 6: Der Textur zusätzliche Elemente hinzufügen

Jetzt kann wer mag sich noch um ein paar Feinheiten kümmern. Zum Beispiel habe ich noch den horizontalen Steg im mittleren Fenster hinzugefügt, indem ich mir ebenso einen 1 px breiten Bereich des Steges kopiert und transformiert habe. Dieses kleinere Fenster hat jedoch eine eigene etwas dunklere Laibung, die ich mir in gleicher Weise aus dm Originalfoto für die vertikale und horizontale Struktur erzeugt habe. Das Ergebnis könnte anschließend ungefähr so aussehen:

Schritt 7: Streifeneffekt der Textur in Photoshop reduzieren

Bedingt durch die Skalierung von schmalen Bildbereichen erhält man unweigerlich den Effekt, dass einige Bereiche mehr oder weniger starke Streifeneffekte aufweisen, da die Pixel der Auswahl bedingt durch Spiegelung und andere Störungen eben nicht gleich waren. Auf der einen Seite wirkt der Effekt gar nicht schlecht und bringt doch eine gewisse Unregelmäßigkeit hinein, die oft in Computermodellen vermisst wird. Auf der anderen Seite sollte der Effekt sicher nicht zu dominant erscheinen. Ein Stück weit ist es Geschmacksache und sollte von Fall zu Fall entschieden werden. Die Erfahrung zeigt jedoch, dass gerade bei Nebengebäuden der Effekt im Rendering schlicht nicht auffällt.

Für mein Beispiel habe ich mich entschieden die streifigen Bereiche in den Fenstern zunächst aus horizontalen und vertikalen zu vermischen. Des weiteren soll das Betonfertigteils im rechten Teil des Bildes noch gleichmäßiger gestaltet werden.

Als erstes wählen wir dazu die Bereiche der Glasflächen aus und wählen wieder eine „Weiche Kante“ (ALT+STRG+D) von ca. 3 px.

Wir wählen die Ebene mit der vertikalen Struktur aus. Hier können jetzt wir mit dem Radiergummi-Werkzeug (Shortcut: E) einer Pinselgröße von ca. 65 px und einer Deckkraft von ca. 15% (einzustellen oben in der Werkzeugleiste) die vertikale Struktur schrittweise ausradieren und so eine Mischung aus vertikaler und horizontaler Struktur erzeugen. Wenn bei der Arbeit in Auswahlen die Anzeige der Umrandung (sich bewegende gestrichelte Umrandungslinien) irritiert kann diese mit STRG+H unsichtbar schalten – wobei die Auswahl erhalten bleibt. Nach erfolgter Retusche kann man die Auswahlumrandung mit STRG+H auch wieder sichtbar machen.

Als nächstes folgt das Betonelement am rechten Rand, welches mir mit den Streifen noch nicht wirklich gefällt. Wir wählen den Bereich aus und erzeugen uns wieder eine „Weiche Kante“ (ALT+STRG+D) mit z.B. 1 px Radius. Als nächstes erzeugen wir eine neue Ebene (Umschalt+STRG+N) und füllen diese mit einem Grauwert, welcher zum Gesamtbild gut passt. Anschließend reduzieren wir die Deckkraft der neuen Ebene leicht im Ebenenfenster z.B. auf 50% damit noch etwas Struktur hervorscheint.

Das Ganze sieht dann mittlerweile so aus und ist damit für meine Belange völlig ausreichend:

Ich denke das Verfahren eignet sich sehr gut, um auf die Schnelle ein paar passende Texturen zu erzeugen, z.B. auch wenn der Look der Gebäude von denen man Fotos hat grundsätzlich erhalten bleiben soll.

So könnte dann übrigens die Textur in einer schnellen Beispielszene aussehen:

Hier könnt Ihr euch die Photoshop Datei des Tutorials herunterladen, um die Schritte besser nachvollziehen zu können. Die Textur könnt Ihr für Eure privaten und kommerziellen Projekte verwenden – eine Weitergabe ist aber nicht erlaubt.

Was haltet Ihr von der Methode? Habt Ihr Anregungen oder hat es für euer Projekt etwas gebracht? Hinterlasst einfach eine Nachricht im Kommentarbereich…