Anzeige
Tutorialbeschreibung

Nahtlos kachelnde Texturen mit Adobe Photoshop erstellen

Nahtlos kachelnde Texturen mit Adobe Photoshop erstellen

Damit sich Texturen nahtlos kacheln, müssen sie oft erst entsprechend aufbereitet werden. Wie das mühelos und nahezu perfekt gemacht wird, erkläre ich euch hier in wenigen Schritten. Diese Technik ist vor allem für Gamedesigner wichtig, die z.B nahtlose Texturen für Häuserwände, Gegenstände etc. benötigen. Vorkenntnisse sind nur wenige erforderlich, lediglich das Arbeiten mit Ebenen und einigen Grundwerkzeugen sollte einigermassen geläufig sein. Hinweis: hier geht es nicht um die Erstellung einer nahtlosen Textur "from the scratch", sondern um das Bearbeiten vorhandener, möglicherweise heruntergeladener Texturen, um diese nahtlos kachelbar zu machen.

 


Schritt 1:
Wir suchen uns zunächst eine beliebige Textur aus, die wir zum Beispiel von hier heruntergeladen haben: http://www.psd-tutorials.de/downloads-cats-28-texturen.html (gleichgültig ob ihr nun eine Stein,- Metall,- oder Tapetentextur erstellen wollt). Für unser Beispiel habe ich eine rostige Metalltextur gewählt, weil man hier besonders schön erkennt, wie man auch unregelmässig verlaufende Maserungen perfekt "kachelt".


Bild1: Die Ausgangstextur

AusgangstexturBilder


Schritt 2:
Wir sehen: diese Textur wird sich niemals kacheln. Rechts haben wir ganz andere Strukturen, als links, desgleichen oben und unten. Hier muss also nachgearbeitet werden, damit sich das Bild bei mehrfacher Wiederholung (z.b. auf einer Tür) nahtlos aneinander fügt, und zwar in alle Richtungen.
Der erste Schritt besteht darin, sich eine Auswahl eines schmalen Streifens einer der vier Richtungen zu wählen, wir beginnen einfach mal mit dem oberen Rand. Dazu wählen wir das Rahmenwerkzeug, viereckiger Rahmen und ziehen einen ca. 1 cm breiten Rahmen über die gesamte Breite des Bildes.


Bild2: Rahmen ziehen

Bilder


Jetzt kommt der erste entscheidende Schritt. Wir drücken Strg+C für kopieren des Ausschnitts, anschliessend gleich Strg+V für das Einfügen des kopierten Bereichs. Dadurch entsteht automatisch eine neue Ebene. Jetzt wird die neue Ebene mit "Bearbeiten --> transformieren --> vertikal spiegeln" nach unten geklappt. Diesen gespiegelten Ausschnitt fassen wir nun mit dem Auswahlwerkzeug an und schieben ihn ganz an den unteren Bildrand.

Bilder



Hier im Bild zeigt der Pfeil auf "horizontal spiegeln", darunter befindet sich "vertikal spiegeln". Im vorliegenden Schritt muss vertikal gespiegelt werden - aber in welcher Reihenfolge ihr vorgeht, ist gesprungen wie gehüpft.
Wenn sich der Ausschnitt am unteren Bildrand befindet, wird sich der untere Rand bereits mit dem oberen Rand anschliessend kacheln, aber natürlich sehen wir noch einen scharfen Übergang vom grossen Bild zum nach unten verschobenen Ausschnitt. Um diesen anzugleichen, wählen wir nun den Radierpinsel, stellen die Stärke auf maximal 8 und wischen geduldig so lange über den oberen Rand des Ausschnitts, bis sich die die neue Ebene an die untere Ebene optisch soweit angeglichen hat, dass wir keinen Übergang mehr erkennen können. Anschliessend reduzieren wir die Ebenen wieder auf die Hintergrundebene zurück (Ebenen --> auf Hintergrundebene reduzieren)

Bilder



Diesen Vorgang wiederholen wir 2 mal:

1) Ausschnitt wählen (ca. 1 cm) erst vom oberen Rand, anschliessend kopieren, einfügen, vertikal spiegeln, nach unten schieben, Radierpinsel Deckkraft 8, Rand verwischen bzw. anpassen, auf Hintergrundebene reduzieren
2. Ausschnitt wählen (ca. 1 cm) erst vom rechten Rand, anschliessend kopieren, einfügen, horizontal spiegeln, nach links schieben, Radierpinsel Deckkraft 8, Rand verwischen bzw. anpassen, auf Hintergrundebene reduzieren

Bilder



Wenn wir die Übergänge schön verwischt und die Ebenen reduziert haben, bleibt ein kachelbares Bild übrig. Voilá. Hier unten seht ihr noch das Ergebnis (diese Version ergab sogar ein lustiges "Gesicht" in der Mitte), und diese Datei könnt ihr auch als PSD mit den 4 Kacheln als Ebenen runterladen. Dann mal fröhliches Kacheln!

Bilder


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Steve007
  • 22.09.2014 - 17:31

Vielen Dank für Dein interessantes Tutorial.

Portrait von Fabse404
  • 14.09.2014 - 01:31

Das Grundprinzip is schön einfach :) gibt es noch weitere Möglichkeiten das Problem zu lösen?
Aber danke für dieses gut erklärte Tutorial

Portrait von RK18
  • 22.01.2013 - 14:11

Einfach und gut erklärtes Tutorial!!

Portrait von RK18
  • 22.01.2013 - 14:11

Einfach und gut erklärtes Tutorial!!

Portrait von RK18
  • 22.01.2013 - 14:11

Einfach und gut erklärtes Tutorial!!

Portrait von RK18
  • 22.01.2013 - 14:11

Einfach und gut erklärtes Tutorial!!

Portrait von RK18
  • 22.01.2013 - 14:11

Einfach und gut erklärtes Tutorial!!

Portrait von RK18
  • 22.01.2013 - 14:11

Einfach und gut erklärtes Tutorial!!

Portrait von RK18
  • 22.01.2013 - 14:11

Einfach und gut erklärtes Tutorial!!

Portrait von RK18
  • 22.01.2013 - 14:11

Einfach und gut erklärtes Tutorial!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.08.2012 - 15:47

cooles tutorial :D hat mir echt sehr geholfen danke dafür (:

Portrait von clak
  • 23.10.2010 - 20:31

Je nach Struktur und Lichtverteilung nicht immer von Erfolg gekrönt, aber die Methode ist hilfreich und gut erklärt. Danke für die Mühe.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.08.2010 - 00:17

sehr hilfreich - danke

Portrait von anaho
  • 13.08.2010 - 04:21

Kurz und knackig so solls sein.

Portrait von Ladyan
  • 06.08.2010 - 09:30

Ach genial. Bin gerade gestern an einer Textur verzweifelt, dabei ist die Lösung so simpel.
Danke für den Gedankenanstoß!

Portrait von gothic860
  • 16.07.2010 - 17:18

TOP, danke dir ! Habs für CAD-Zeichnung gebraucht nun siehts wirklich viel besser aus!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.07.2010 - 17:02

Danke für das toturial.

Portrait von altaxx
  • 01.06.2010 - 12:33

Danke. Sehr gut und einfach!

Portrait von 00jules00
  • 17.05.2010 - 11:58

Gutes Tutorial. Ich stimme allerdings jwfoto zu, das verwischen von Spiegelungen wäre eine feine Sache, aber für den Anfang wirklich sehr gut.

Portrait von muffinman
  • 08.05.2010 - 00:42

ist nicht nur für gameentwickler interessant, danke

x
×
×