Anzeige
Tutorialbeschreibung

Eigenschaften: Muster kachelfrei für Webpage-Hintergründe

Eigenschaften: Muster kachelfrei für Webpage-Hintergründe

Hier zeige ich, wie man eine kachelbare Textur aus einer Struktur erstellen kann. Man kann dieses Bild also beliebig oft aneinanderkleben, ohne dass man die Nahtstelle sieht. Das ist zum Beispiel für 3D-Anwendungen oder Webpage-Hintergründe nützlich.


So, als Erstes erstelle ich den generellen Hintergrund. Dieser ist zunächst nicht kachelbar, das wird im zweiten Teil des Tutorials erklärt.

Zunächst erstellt ihr ein neues Dokument; meins ist 512*512. das ist für eine Web-Textur groß genug, sollte sie für Graphikanwendungen benutzt werden muss eben eine passendere Dimension gewählt werden.
Den Hintergrund habe ich mit einem homogenen Blau gefüllt.

Bilder


Jetzt erstellt ihr eine neue Ebene und nehmt einen schönen Pinsel und tupft (also nicht herumziehen sondern jeweils nur einmal klicken) damit ein wenig auf der Ebene herum. Wenn sie einigermaßen gefüllt ist, erstellt ihr eine neue ebene, betupft diese (möglichst mit einem anderen Pinsel) wieder und macht so 3-10 Ebenen. ich habe 6. Die Ebenen müssen nicht schön aussehen, nur einigermaßen gleichmäßig ausgefüllt sein.
Hier im Screenshot seht ihr 2 davon:

Bilder


Das Ganze sieht jetzt ziemlich schwarz, hässlich und regelmäßig aus. das wird jetzt geändert.
Klickt dafür erst auf die Ebene (1), dann auf Ebenenmaske erstellen (2) und dann auf die Ebenenmaske selbst. Drückt jetzt "d", um Schwarz als Vorder- und Weiß als Hintergrundfarbe zu wählen. Mit angewählter Ebenenmaske klickt ihr jetzt auf Filter | Rendering-Filter | Wolken (4). Das macht ihr jetzt mit jeder (Pinsel-) Ebenenmaske (Hotkey für "letzten Filter anwenden" ist Strg+F). Das sieht immer noch ziemlich grob aus; Differenz-Wolken (auch unter Rendering-Filter), nach Geschmack auf verschiedene Ebenenmasken angewendet, schaffen da Abhilfe. Spielt einfach ein bisschen damit herum, bis das Ergebnis annehmbar ist.

Bilder


Um die Graphik für den 2. Teil des Tutorials vorzubereiten, wählt ihr alle Ebenen an, und fügt sie zu einer zusammen (alle Ebenen wählen => Strg+E).

Bilder


Um zu zeigen, warum nicht-kachelbare Texturen nicht gekachelt werden sollten, hab ich mein aktuelles Ergebnis 2*2 aneinandergefügt.
Man sieht recht deutlich, dass jeweils in der Mitte der x- bzw. y-Achse sich ziemlich hässliche Teilungslinien nach unten ziehen. besonders bei höher aufgelösten Kachelungen ist das ein ziemlich nerviger Aspekt einer solchen Textur.

Bilder



Das Grundgerüst ist jetzt erstellt; nun machen wir die Textur kachelbar.


Ruft den Filter "Filter | Sonstige Filter | Verschiebungseffekt" auf und stellt die Regler jeweils auf eure halbe Bildbreite; mein Bild ist 512*512, also sind meine Einstellungen 256; 256. ("durch verschobenen Teil ersetzen" aktivieren!)
Das Bild wurde jetzt um 256px nach rechts verschoben, und die "verschwundenen" Teile wurden links angeklebt. Analog verhält sich die y-Richtung. Somit sind nun die Nahtstellen in der Mitte des Bildes, während die Außenseite keine Naht verursachen würde, würde man die Textur jetzt kacheln.
Jetzt ist es sehr einfach die Nahtstellen zu entfernen, zum Beispiel mit dem Bereichs-Reparatur-Pinsel, dem Kopierstempel oder anderen Ausbesserungswerkzeugen. Bearbeitet die Nähte so lange, bis man sie nicht mehr sieht. Passt aber auf, dass ihr den Rand des Bildes nicht berührt; das verfälscht die werte und es entsteht eine neue Nahtstelle. Bearbeitet also zuerst die inneren teile des bildes; dann wendet noch mal den Verschieben-Filter an, um auch die letzten Stellen zu erreichen. Wenn das Ergebnis keine Naht mehr aufweist, ist es so gut wie getan. Ihr könnt noch einmal den Verschieben-Filter anwenden, um das bild in eine bestimmte Position zu bewegen. Das ist beispielsweise nützlich, wenn ihr einen dunklen Fleck auf der Page-Hintergrund nicht gleich oben links, sondern eher mittig haben wollt. (Anmerkung, Jahre nachdem ich das Tutorial geschrieben habe: das Verschieben ginge natürlich auch per CSS.)


Bilder



 
So, das hier ist mein Ergebnis, kachelbar.

Bilder



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von annahofer
  • 01.10.2013 - 18:14

sehr fein............ :)

DANKE

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.06.2013 - 15:21

Super Tutorial :D
Ist sehr Hilfreich und leicht zu verstehen

Portrait von phili007tru
  • 03.05.2013 - 15:26

Top Tutorial habs auf anhieb hinbekommen was für die gute Ausarbeitung spricht :D

Portrait von BarbaraW
  • 04.01.2013 - 14:42

Das Tutorial hat mir sehr geholfen, es hat mir den entscheidenden Anstoß zur Lösung meines Problems gegeben.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.02.2012 - 19:29

Vllt bin ich einfach nur zu dumm, aber welchen Pinsel nimmt er denn? Bei mir sieht das nicht annähernd so aus :D

Portrait von semTi35
  • 13.02.2012 - 13:01

das wüsste ich auch gerne !

Portrait von SYR
SYR
  • 15.11.2010 - 19:11

ja gefällt mir sehr gut.

Portrait von gboss91
  • 12.05.2010 - 14:23

Sehr gut Simpel und sieht trotzdem hammer geil :D vieln dank 5*

Portrait von Jamaja
  • 14.04.2010 - 00:10

sehr simpel und gut verständlich gestaltetes tut, vielen dank!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.02.2010 - 21:10

Sehr hilfreiches Tutorial. Danke

Portrait von Lowy
  • 27.01.2010 - 20:52

Sehr schön einfaches und wirkungsvolles Tutorial. Genau sowas brauch ich gerade. Vielen Dank

Portrait von _corze_
  • 11.01.2010 - 18:46

Ah! Jetzt krieg ich auch endlich diese Linien weg... und das ganz einfach. Danke!

Portrait von freaky_diver
  • 08.01.2010 - 14:26

Hab ich gesucht. Naja und nun endlich gefunden.

Danke

Portrait von JBJ
JBJ
  • 29.12.2009 - 16:12

Sehr gut gelungen von mir 5*

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.12.2009 - 20:21

Super tut genau mei DING

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.12.2009 - 14:40

Richtig gutes Tut!!!

Portrait von unico
  • 18.12.2009 - 08:05

besonders für anfänger wie mich geeignet,super

Portrait von Fendo
  • 02.12.2009 - 12:05

genial echt cooles tut

Portrait von deichk1nd
  • 02.12.2009 - 10:26

cool danke, echt gut zu verstehen

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.09.2009 - 12:01

danke, genau sowas habe ich noch gesucht!

x
×
×