Nicht eingeloggt
Registrieren

Kachelbare Texturen Teil 2



1.Perspective Correction


Im folgenden Tutorial werden wir betrachten, wie man
aus einem Bild im .jpg Format eine kachelbare Textur macht.

Am Ende soll dabei eine Textur entstehen, die eine Grösse von 512x512 Pixeln hat
und im .bmp Format vorliegt, damit wir sie in den UnrealEditor 3.0 importieren können.

Dieses Bild eines etwas...naja sagen wir mal runtergekommenen Hauses,
habe ich bei environment-textures.com als "Free Texture" gefunden.
Copyright by Richard Polak.

Bei genauerem Hinschauen sieht man , dass das Haus ein bissel schief ist.
Ob das Haus selbst schief ist, oder eine perspektivische Verzerrung der Grund ist,
ist eigentlich egal - denn wir besitzen ja Tools die das korrigieren können.

(Anm.: Bist du in der glücklichen Situation ein Bild zu besitzen, dass nicht schief ist
und auch sonst keine Verzerrungen aufweist, kannst du diesen Punkt überspringen.)

woolfxxximage255.jpg

Um hieraus eine vernünftige Textur zu erstellen, die man auch einfach bearbeiten kann,
sollte man daher zunächst das Perspective Correction Tool auswählen.
Dieses Tool dient dazu um perspektivische Verzerrungen, bedingt durch
Fluchtpunkt,Blickwinkel etc. im Bild zu korrigieren.
Zu finden in der Toolbar.



Nach dem Klick darauf zeigt sich ein Auswahlrahmen, mit dem man den Bereich
auswählen kann, den man "entzerrt" haben möchte.
An den 4 Ecken befinden sich die "Handles" (engl. anfassen), mit denen du den Auswahlrahmen
hin und her ziehen kannst. (Linke Maustaste gedrückt halten)

woolfxxximage257.jpg

Im folgenden Bild habe ich mal markiert, auf welcher Linie die Wand und das Dach
verlaufen würden, wenn sie gerade wären. (Gelbe Linie)
Mit den "Handles" verschieben wir die Eckpunkte nun parallel zur "schiefen Wand". (Rote Linie)
Als Anvisierpunkt dienen mir dabei die oberen Fensterrahmen.

Haben wir alles ausgerichtet, wie wir es haben wollen, können wir die Auswahl bestätigen
indem wir den blauen Haken klicken.
Jetzt sollte die Wand ausgerichtet sein.

woolfxxximage258.jpg



2.Crop

Den 2.ten Schritt, das Zurechtschneiden (engl. crop), hätten wir auch gleich mit dem
Perspective Correction Tool bewältigen können, indem man bei "Crop Image" einen
Haken setzt.

Der Vollständigkeit halber und um unseren "Newbies" die Sache etwas zu erleichtern,
möchten wir aber alles ganz einfach Schritt für Schritt tun.
Ausserdem wird man in der Texturbearbeitung das Crop Tool noch sehr häufig
gebrauchen und daher lohnt es sich mal kurz darauf einzugehen.

Das Crop Tool befindet sich ebenso in der Toolbar.



Nach dem Klick erscheint im Gegensatz zum Perspective Correction Tool nicht sofort
ein Auswahlrahmen.
Diesen musst du erst ziehen, in dem du die linke Maustaste gedrückt hältst.
Nun siehst du einen Rahmen mit 6 "Handles".
Diese "Handles" kannst du ebenfalls verschieben und ziehen - jedoch bleibt
dabei der Auswahlrahmen immer rechteckig.
Auf der Abbildung kannst du sehen welchen Bereich des Bildes ich als mein "Nutzteil" ausgewählt habe.
Ist die Auswahl O.K. klickst du auf den blauen Haken.

woolfxxximage260.jpg

Hier siehst du nun wie das Crop Tool den ganzen unnützen Rest weggeschnitten
hat und nur noch das Nutzteil zu sehen ist, welches wir nun weiter bearbeiten wollen.

Wie bei jedem anderen Programm kannst du natürlich deine Arbeitsschritte wieder rückgängig
machen indem du die STRG-Taste gedrückt hältst und gleichzeitig Z drückst, falls mal
etwas schief gegangen ist.

woolfxxximage261.jpg



3.Clone

Als nächstes gehts ans "Clonen".
Im Gegensatz zur realen Welt, ist hier das "Clonen" überaus erwünscht und
sogar dringend notwendig.
Mit dem Clone Tool kopierst du im Grunde nur einen Bereich einer Textur
oder eines Bildes in einen anderen Bereich, ohne dass man dabei die Übergänge sieht.
Du könntest z.B. auf einem Foto den Kopf deiner nervigen Schwester/Freundin auf den einer
übergewichtigen Dame kopieren und ihr damit die nicht all zu ferne Zukunft zeigen >:o)
Aber da wir ja alles liebe Menschen sind, tun wir so etwas nicht....

Wie du im obigen Bild gesehen hast, befindet sich rechts neben den Fenstern eine
Kante an der Mauer, die für die weitere Bearbeitung stört.

(Anm.: Würdest du die Wand so lassen wie sie ist, wäre später in der gekachelten Wand
jedesmal diese Kante zu sehen - was wiederum in unserem Fall nicht gewünscht ist.
In manchen Fällen sind Kanten in der Wand erwünscht z.B. wenn du eine Fensterreihe
für ein New Yorker Hochhaus oder sonst eine urbane Gegend erstellen willst.)

Also wählen wir das Clone Tool aus.
Wiederum zu finden in der Toolbar.



Ich habe als Pinsel einen etwas unregelmässigen gewählt, da dieser später in der Textur
besser "untergeht".
Standardmässig wirst du wohl einen runden Pinsel haben - das kannst du jedoch ändern,
indem du oben links in der Menüleiste neben "Presets" auf die Pinsel klickst.
Dann noch schnell eine angenehme Grösse einstellen (variiert je nach der Grösse des Bildes)
und es kann losgehen.





Im folgenden Bild habe ich wieder einige Bereiche markiert, die ich mittels des Clone Tools
in den Bereich der Kante kopiert habe.
Dazu wählst du zuerst einen Bereich aus, den du kopieren möchtest.
Nennen wir diesen Bereich einfach mal "Quell-Gebiet" (engl. source).
Im Quell-Gebiet machst du zunächst einen "Rechtsklick" - bei PaintShop Pro
hörst du dann einen Signalton.
Dann zielst du mit deinem Mauszeiger in das "Ziel-Gebiet" (engl. destination)
- in unserem Fall die Kante - lässt die linke Maustaste gedrückt, und übermalst einfach alles.
Dann wählst du wieder ein anderes "Quell-Gebiet" aus, "Rechtsklick", über dem Ziel-Gebiet linke
Maustaste gedrückt halten und wieder übermalen.

Lass dir ruhig Zeit dabei und achte darauf, das alles auch farblich übereinstimmt und
realistisch aussieht.

woolfxxximage264.jpg



4.Resize

Wenn du der Meinung bist, dass alles realistisch genug aussieht, dann ist die
Zeit gekommen alles ein wenig zurechtzuschneiden und auf die richtige Grösse zu bringen.
Du erinnerst dich, dass wir zu Anfang gesagt haben, dass wir als Resultat ein
Bild haben möchten, welches eine Auflösung von 512x512 Pixeln hat.

Da unser Bild aber in unserem Fall etwas breiter als hoch ist, können wir es jetzt
aber nicht einfach "resizen". Würden wir das Bild auf diese Grösse bringen, dann würde es irgendwie
"gestaucht" aussehen - und das wollen wir ja vermeiden.
Also benutzen wir erneut das Crop Tool und schneiden das Bild auf
etwa die doppelte Grösse unserer "Endgrösse" zurecht.

(Anm.: Wenn du erst einmal vertraut mit den Tools bist, wirst du zusehen, dass
du schon beim ersten Mal das Bild auf eine geeignete Grösse zurechtschneidest.)

woolfxxximage265.jpg

Nach dem zurechtschneiden sollte das Ergebnis in etwa so aussehen wie auf dem Bild.
Wenn wir uns jetzt die Grösse anschauen, liegen wir in etwa bei der doppelten Grösse.
Im Grunde zählt nur, dass in unserem Fall die Höhe und Breite in etwa übereinstimmen.



woolfxxximage267.jpg

Jetzt können wir das Bild resizen.
Dazu gehst du auf -->Image --> Resize



Im folgenden Fenster gibst du die Width und Height mit 512 Pixels an.
Sollten sich die Werte per Hand nicht verändern lassen, dann nimm den Haken bei
Lock Aspect Ratio raus.
Anschliessend Ok drücken.





5.Tiling

Jetzt hast du dein Bild in der Grösse von 512x512 Pixeln.
Aber es ist noch nicht kachelbar(engl. tileable).
Würdest du die Textur so importieren wie sie ist, würdest du zunächst
keinen Unterschied bemerken.
Aber spätestens wenn du sie einem Brush oder einem StaticMesh zuweist,
wäre ganz genau die Naht (engl. seam) zu sehen , an dem sich die Textur
wiederholt.
Deshalb möchten wir sie kachelbar oder nahtlos (engl. seamless) machen.

Dazu machts du zunächst einen "Rechtsklick" auf deine Textur.
Es erscheint ein Kontextmenü in dem du auf Copy klickst.



Nun erstellst du ein neues Bild in dem du oben links auf den weissen Knopf
drückst oder über File-->New.



Im folgenden Dialog wählst du für das neue Bild eine Grösse von:

Width 1024 und Height 512 Pixels und bestätigst
mit OK.



Im neuen Bild machst du irgendwo in der weissen Fläche wieder einen
Rechtsklick und gehst diesmal auf Paste-->Paste As New Layer.
Diesen Schritt wiederholst du noch ein zweites Mal.



Du wirst jetzt festgestellt haben, dass du deine Textur 2 Mal in
dein neues Bild reinkopiert hast.
Du hast 2 neue Layer (engl. Schicht) erstellt, die übereinanderliegen.



Um deine 2 neuen Layer zu bewegen musst du in der Tool-Leiste auf das
Move-Tool klicken.



Ordne deine beiden Raster-Layer so an , dass sie genau nebeneinander liegen.
Du kannst auch die Zoom-Funktion dazu benutzen.
Am Ende sollte es so aussehen wie auf dem folgenden Bild.



Jetzt möchten wir natürlich aus den zwei Bilder eines machen, damit wir es
weiter bearbeiten können.
Dazu müssen wir die Beiden verschmelzen (engl. merge).

Du gehst auf Layers-->Merge-->Merge All.



Du hast jetzt aus 2 Bildern 1 gemacht.
Dir wird wahrscheinlich auffallen, dass in der Mitte des Bildes, da wo
sich die beiden Texturen treffen, einen Naht zu sehen ist.
Diese muss natürlich verschwinden.
Dazu benutzen wir wieder das Clone-Tool.
Ich habe hier im Bild wieder farblich gekennzeichnet, welche Bereiche
ich zum Clonen verwendet habe.

(Anm.: Falls du wieder vergessen hast, wie das funktioniert, klicke
einfach HIER um in das Clone Kapitel zurückzuspringen.)



Hast du alles schön übergepinselt kommen wir zum eigentlichen Sinn der ganzen Aktion.
Wir haben hier jetzt eine Textur von einer Breite von 1024 und einer Höhe von 512 Pixeln.
Aus dieser werden wir mittig eine 512x512 Textur ausschneiden.
Logischerweise werden sich rechts und links an der Kante die Texturen wiederholen,
so dass wir am Ende eine Textur haben die sich ohne Naht wiederholt.
Das funktioniert aber nur dadurch, dass wir die Texturen vorher pixelgenau ausgerichtet,
miteinander verschmolzen und die Naht verdeckt haben.
Von der Mitte der Textur aus gesehen bräuchten wir nur von 256 Pixel nach rechts bis
256 Pixel nach links einen Rahmen ziehen und unsere Textur würde sich immer wiederholen.

Dummerweise funktioniert das Koordinatensystem von Paint Shop Pro so nicht...

Ich habe unten mal abgebildet wie wir den Bereich Pixelgenau beschreiben können.
Eigenartigerweise liegt der Nullpunkt oben links statt - wie ich es gewohnt bin - unten links.
Von da aus definieren wir, dass der Bereich in der vertikalen von 256 pix bis 768 pix reicht.
(Blaue Linie - von 256 bis 768 ist = 512 )

Im Horizontalen wählen wir 0 pix bis 512 pix.
(Rote Line - von 0 bis 512 ist = 512)

Blau x Rot = 512 x 512 Pixel - Der Bereich, den wir haben wollen!

woolfxxximage279.jpg

Um jetzt diesen definierten Bereich auszuwählen, müssen wir eine Auswahl (engl. selection)
treffen.
Du klickst dazu auf das Selection-Tool in deiner Tool-Leiste.



Dann gehst du oben auf die Custom Selection



Dann gibst du die Werte ein die wir für unsere Auswahl getroffen haben:

Top = 0 Bottom = 512
Left = 256 Right = 768



Nachdem du auf Ok geklickt hast erscheint nun ein Auswahlrahmen, der unser
Nutzteil markiert.
Um diesen Bereich auszuschneiden machst du wieder einen Rechtsklick auf
die Textur im Rahmen und wählst Copy.



Jetzt kannst du das Bild verkleinern und irgendwo auf deiner Arbeitsfläche
in Paint Shop einen Rechtsklick machen und wählst Paste As New Image.



Unglaublich aber wahr: Jetzt bist du eigentlich fertig!
Das Bild ist jetzt kachelbar.
Du könntest es jetzt als .bmp abspeichern und in den Unreal Editor 3.0 importieren.
D.h. falls du zufrieden mit dem Ergebnis bist.
Falls nicht, kannst du dir ja noch den Rest des Tutorials anschauen.
Ob du das was du dort lernst brauchst - bleibt dir selbst überlassen.
Wir werden nur ein paar Änderungen in der Farbe,dem Kontrast
und in der Sättigung vornehmen.





6.Final Touch

Die folgenden Veränderungen an der Textur sind reine Ansichtssache.
Es ist alles ein kann und nichts ein muss.
Jeder hat da so seine eigenen Ideen und Ansichten, wie das Endprodukt
auszusehen hat.

Als erstes wollen wir der Textur einen wärmeren Charakter verleihen.
Sämtliche Tools dafür finden sich unter Adjust.

Daher gehen wir auf Adjust-->Color Balance-->Automatic Color Balance.



Im folgenden Fenster ziehen wir den Regler in Richtung "Wärme".
Wie weit bleibt natürlich dir überlassen.
Stelle auf jeden Fall die Vorschau an (Show/Hide Preview).
Ich habe hier einen "Temperature" Wert von 5260 gewählt.
Spiel einfach mal ein bissel rum ...

woolfxxximage287.jpg

Danach möchten wir dem Kontrast ein wenig nachhelfen.
Dazu gehst du auf Adjust-->Brightness and Contrast-->Automatic Contrast Enhancemenet.



Hier können wir den Kontrast Einfluss (engl. bias), die Stärke (engl. strength)
und das Aussehen (engl. appearance) verändern.
Setze die Werte wie sie dir gefallen oder wie im Bild.
Dieses Tool eignet sich auch hervorragend um deine Texturen "dreckiger" erscheinen
zu lassen.




Nach dem Ok wollen wir unserer Textur noch den letzten Schliff geben,
und verpassen ihr eine ordentliche Sättigung.

Dazu gehst du auf Adjust-->Hue and Saturation-->Automatic Saturation Enhancement.



Hier kannst du wieder den Einfluss und die Stärke bestimmen.
Manchmal kann es passieren, dass deine Textur durch den Kontrast an
Farbe verloren hat.
Dann kannst du sie ihr mit More colorful zurückgeben.
Aber nicht übertreiben!
Es soll am Ende noch realistisch aussehen.




Bist du zufrieden mit deinem Kunstwerk, dann kannst du jetzt über
File-->Save As deine Textur abschpeichern.



Im Save-Dialog einfach einen passenden Namen wählen (am Besten ohne Leerzeichen -
verträgt der Unreal Editor nicht!) und als .bpm speichern.



Endlich geschafft!

woolfxxximage294.jpg

...:::This Tutorial was brought you by -=TheAbyss=-:::...