Home  >  Tutorials  >  Beginners Class Tutorials  >
Nahtlose Hintergrundbilder
E-mail this tutorial to a friend Email to a Friend

Nahtlose Hintergrundbilder

Created by: Charith
(Bearbeitet vom PSPUG Learning Center
und von Prof)

 

In diesem Tutorial lernen wir, wie man aus einem Bild einen nahtlosen Hintergrund macht. Das ist nicht immer einfach! Manchmal braucht man eine Menge Zeit und Geduld, um einen wirklich nahtlosen Hintergrund zu machen.

Nahtlose Bilder werden oft als Hintergrund für Webseiten und HTML-Emails eingesetzt. Ein gutes nahtloses Hintergrundbild kann ohne Übergänge gekachelt werden, d.h. es wird über den gesamten Bildschirm bzw. das gesamte Fenster wiederholt und scheint dann aus einem einzigen Bild zu bestehen.

Ein gutes nahtloses Hintergrundbild kann also sowohl vertikal als auch horizontal aneinandergesetzt werden, ohne daß man an den Rändern einen Übergang sieht. In diesem Tutorial werden wir einige PSP-Funktionen kennenlernen, mit denen wir nahtlose Bilder machen können, und auch eine Technik, mit der wir Bilder in nahtlose Hintergrundbilder umwandeln können.



Von den Bildern links ist das obere ein gutes, das untere ein schlechtes nahtloses Hintergrundbild.

Das obere ergibt einen sehr schönen, hellbraunen Sandsteineffekt als Hintergrund für eine Webseite. Das untere ergibt einen Hintergrund, bei dem die Nahtlinien deutlich zu sehen sind.

Tip: Wenn ihr wißt, wie man HTML-Email oder Webseiten-Hintergründe macht, könnt ihr jedes Bild als Hintergrundbild ausprobieren.

Anmerkung: Diese Bilder links sind Bilder von 100x100 Pixeln. Ihr könnt sie kopieren und in ein Bild von 200x200 oder 300x300 Pixeln einfügen, um zu sehen, wie sie als Hintergrund aussehen würden.

 
Download the attachments for this tutorial  Download-Datei
In der Download-Datei links findet ihr Beispiele sowie Bilder, mit denen wir in diesem Tutorial arbeiten werden.
 

Hintergrundbilder mit PSP-Effekten

Es gibt viele PSP-Effekte, mit denen man einfache, schnelle und effektvolle nahtlose Bilder erstellen kann, die dann als Hintergrundbilder genutzt werden können. (In der Regel sind Hintergrundbilder für eine Webseite oder für HTML-Email nicht unruhig und eher hell, so daß man den Text darauf gut lesen kann.)

 
Neues Bild erstellen

Ein Sandstein-Effekt mit "Bildrauschen"

Erstellt ein neues Bild:
– 100 x 100 Pixel
– Weißer Hintergrund
– 16.7 Millionen Farben

 


Fügt ein Rauschen hinzu:
In PSP 5: Geht zu Bild || Rauschen || Hinzufügen
In PSP 6: Geht zu Bild || Bildrauschen || Hinzufügen
In PSP 7: Geht zu Effekte || Bildrauschen || Hinzufügen:
– Rauschen = 100%
– Ungleichmäßig = aktiviert
Klickt auf OK.

Wandelt das Bild in ein Graustufenbild um: Geht zu Farben || Graustufenbild. Diese Funktion hat die Farben des Bildes auf 256 reduziert. Um wieder ein Bild mit 16 Millionen Farben zu bekommen, geht jetzt zu Farben || Farbtiefe erhöhen || 16 Millionen Farben (24 Bit).

Koloriert das Bild: Geht zu Farben || Kolorieren:
– Farbton = 16
– Sättigung = 128
Klickt auf OK.

Anmerkung: Dieses Bild ist dasselbe, das auch in der Download-Datei für dieses Tutorial ist. Ihr habt jetzt ein Basis-Hintergrundbild, das ihr mit Farbe || Kolorieren mit jeder beliebigen Farbe versehen könnt. Probiert einfach ein bißchen mit den Werten für Farbton und Sättigung herum! (Wenn ihr den Farbton um jeweils 16 erhöht, geht ihr Schritt für Schritt durch die Grundfarben des Farbrades.)

Das größere Bild unten zeigt, wie das kleinere oben als nahtloses Hintergrundbild aussieht. Dafür wurde ein neues Bild von 200x200 Pixeln angelegt, das kleinere Bild kopiert und viermal als neue Ebene eingefügt. Diese Ebenen wurden dann so verschoben, daß sie genau aneinanderstoßen und der Hintergrund nicht durchscheint.

 
Neues Bild erstellen




Ein Modellier-Effekt: Vereistes Glas

In PSP 6 und 7 gibt es eine Reihe von Effekten (Modellieren und Textur), mit denen man nahtlose Bilder erstellen kann. (In PSP 5 gibt es diese Effekte noch nicht.) Wir probieren jetzt ein paar davon aus, damit ihr die Effekte sehen könnt. Nehmt euch aber später Zeit, alle einmal auszuprobieren, damit ihr die findet, die euch für eure Hintergrundbilder am besten gefallen.

Beginnt wieder mit einem neuen Bild: 100x100, weißer Hintergrund, 16.7 Millionen Farben.

In PSP 6: Geht zu Bild || Effekte || Modellieren
In PSP 7: Geht zu Effekte || Textur-Effekte || Modellieren

– Muster (PSP 6): das pinkfarbene Muster Nr. 14 (vgl. links)
– Muster (PSP 7): das pinkfarbene Muster (Vereistes Glas.bmp)
– Maßstab = 100
– Schliff = 0
– Tiefe = 1
– Umgebung = 0
– Glanz = 0
– Farbe = weiß
– Grad = 315
– Intensität = 50
– Höhe = 30
Klickt auf OK.

 


Neues Bild erstellen



Ein Modellier-Effekt: Beton

Laßt uns noch ein Beispiel mit dem Effekt Modellieren machen. Probiert später noch andere Modellier-Effekte aus!

Beginnt wieder mit einem neuen Bild: 100x100, weißer Hintergrund, 16.7 Millionen Farben.

In PSP 6: Geht zu Bild || Effekte || Modellieren
In PSP 7: Geht zu Effekte || Textur-Effekte || Modellieren

– Muster (PSP 6): das Muster Nr. 6 (vgl. links)
– Muster (PSP 7): das Muster Nr. 6 (Beton.bmp)
– Maßstab = 100
– Schliff = 0
– Tiefe = 1
– Umgebung = 0
– Glanz = 70
– Farbe = weiß
– Grad = 315
– Intensität = 50
– Höhe = 30
Klickt auf OK.

 


Neues Bild erstellen



Ein Textur-Effekt: Buchstaben

Auch mit dem Textur-Effekt in PSP kann man ein paar schöne und einfache Hintergrundbilder machen. Nehmt euch auch hier die Zeit, alle Effekte auszuprobieren!

Beginnt wieder mit einem neuen Bild: 100x100, weißer Hintergrund, 16.7 Millionen Farben.

In PSP 6: Geht zu Bild || Effekte || Textur
In PSP 7: Geht zu Effekte || Textur-Effekte || Textur

– Textur (PSP 6): Nr. 7 (Helle Buchstaben)
– Textur (PSP 7): Nr. 9 (Buchstaben2.bmp)
– Maßstab = 100
– Schliff = 0
– Tiefe = 1
– Umgebung = 0
– Glanz = 0
– Farbe = weiß
– Grad = 315
– Intensität = 50
– Höhe = 30
Klickt auf OK.

 
Aktive Farben (PSP 5 & 6) Aktive Farben (PSP 7) Neues Bild erstellen
PSP 6 PSP 7  




Ein Textur-Effekt: Moos

In diesem Beispiel werden wir mit einem pastellgrünen Hintergrund einen Textur-Effekt erstellen.

Wählt als Vordergrundfarbe ein helles Grün: Rot = 208, Grün = 228, Blau = 208

Erstellt ein neues Bild: 100x100 Pixel, Hintergrundfarbe = Vordergrundfarbe (PSP 6) bzw. Vordergrund-/Konturfarbe (PSP 7), 16.7 Millionen Farben.

In PSP 6: Geht zu Bild || Effekte || Textur
In PSP 7: Geht zu Effekte || Textur-Effekte || Textur

– Textur (PSP 6): Nr. 30 (ein dunkles Bild)
– Textur (PSP 7): Nr. 31 (Moos.bmp)
– Maßstab = 100
– Schliff = 0
– Tiefe = 1
– Umbegung = 0
– Glanz = 0
– Farbe = weiß
– Grad = 315
– Intensität = 50
– Höhe = 30
Klickt auf OK.

 

Die Zahl der möglichen nathlosen Hintergrundbilder, die man mit den Modellier- und Textur-Effekten erstellen kann, ist schier endlos. Nach dem Textur-Effekt kann man außerdem die Funktion Kolorieren verwenden, um die Bilder einzufärben. Probiert sie alle einmal aus, und ihr werdet sehen, daß es viele verschiedene Wege gibt, interessante und einzigartige Hintergrundbilder zu machen.

Als nächstes werden wir zwei weitere Funktionen von PSP 6 und 7 kennenlernen, mit denen man interessante Hintergrundbilder machen kann. Dafür kann man jedes beliebige Bild nehmen und dann den Kaleidoskop- oder den Muster-Effekt anwenden.

 







Nahtlose Hintergrundbilder mit dem Muster-Effekt

Verwendet für diese und die nächste Übung "/tutorial/html/beginclass/11seamlss_02.gif" aus eurer Download-Datei oder ein anderes Bild eurer Wahl. Dupliziert es aber erst mit Fenster || Duplizieren, damit das Original unverändert bleibt. Dann vergewissert euch, daß das Bild eine Farbtiefe von 16 Millionen Farben hat; wenn das nicht der Fall ist, geht zu Farben || Farbtiefe erhöhen || 16 Millionen Farben.

Links seht ihr, daß dieses Bild, so wie es jetzt ist, einen sehr schlechten Hintergrund abgibt.

Durch die Verwendung des PSP-Effektes "Muster" können wir dieses Bild aber in ein tapetenähnliches Muster verwandeln, das einen sehr schönen Hintergrund bildet:

In PSP 6: Geht zu Bild || Effekte || Muster
In PSP 7: Geht zu Effekte || Reflexions-Effekte || Muster

– Horizontal- und Vertikalverschiebung = 0
– Rotationswinkel = 90
– Vergrößerungsfaktor = 0
– Anzahl der Spalten und Zeilen = 3
– Horizontal- und Vertikalverschiebung = 0
Klickt auf OK.

Experimentiert jetzt einfach mit den verschiedenen Einstellungen beim Muster-Effekt und seht, wie viele unterschiedliche, interesseante und effektvolle Hintergrundbilder ihr von nur einem einzigen Ausgangsbild machen könnt!

Beispiel: Ändert in den Einstellungen oben einmal die Horizontal- und Vertikalverschiebung (unter "Bildbereich") auf -100 (minus 100) für ein helleres Bild mit Gittermuster. Dann probiert mal eine Horizontal- und Vertikalverschiebung von 100 (plus 100) aus!

Je mehr ihr experimentiert, umso mehr Wege werdet ihr finden, mit diesem Effekt schöne Muster zu erstellen.

 


Nahtlose Hintergrundbilder mit dem Kaleidoskop-Effekt

Auch der PSP-Effekt "Kaleidoskop" verwandelt dieses Bild in ein tapetenähnliches Muster, das einen sehr schönen Hintergrund abgibt:

In PSP 6: Geht zu Bild || Effekte || Kaleidoskop
In PSP 7: Geht zu Effekte || Reflexions-Effekte || Kaleidoskop

– Horizontal- und Vertikalverschiebung = 0
– Rotationswinkel = 90
– Vergrößerungsfaktor = 0
– Facetten = 10
– Kreisbahnen = 0
– Radialabstand = 0
Klickt auf OK.

Jetzt experimentiert auch hier wieder mit den verschiedenen Einstellungen für den Kaleidoskop-Effekt herum und seht, wie viele interessante und effektvolle Hintergrundmuster ihr aus diesem einen Hintergrundbild machen könnt!

Beispiel: Ändert mal in den Einstellungen oben die Anzahl der Facetten auf 2 für ein ganz anderes Muster. Dann probiert mal diese Einstellungen aus: Horizontal- und Vertikalverschiebung = 0, Rotationswinkel = 0, Vergrößerungsfaktor = 20, Facetten und Kreisbahnen = 4 und Radialabstand = 50.

Je mehr ihr experimentiert, umso mehr Wege werdet ihr finden, mit diesem Effekt schöne Muster zu erstellen.

 

Nahtlose Hintergrundbilder durch Spiegeln und Umdrehen

Es gibt auch eine Technik, mit der man aus jedem beliebigen Bild ein nahtloses Hintergrundbild machen kann. Durch den Einsatz der Funktionen "Spiegeln" und "Umdrehen" kann man aus jedem Bild ein interessantes nahtloses Muster herstellen. Durch Umdrehen und Spiegeln eines Bildes und dem Aneinandersetzen in einem neuen, größeren Bild kann man die Kanten so aneinandersetzen, daß sie sich dann nahtlos wiederholen lassen.

 

Die Grundtechnik (vgl. das Schema links):

  • Man erstellt ein neues Bild mit doppelter Breite und Höhe des Originalbildes
  • Man kopiert das Originalbild und fügt es als neue Ebene oben links in das neue Bild ein (1)
  • Man fügt das Originalbild ein zweites Mal oben rechts in das neue Bild ein und geht dann zu Bild || Spiegeln (2)
  • Man fügt das Originalbild ein drittes Mal unten links in das neue Bild ein und geht dann zu Bild || Umdrehen (3)
  • Man fügt das Originalbild ein viertes Mal unten rechts in das neue Bild ein und geht jetzt zuerst zu Bild || Umdrehen und dann zu Bild || Spiegeln (4)
  • Dann geht man zu Ebenen || Verbinden || Alle verbinden (glätten), speichert das Bild und kann es als Hintergrundbild verwenden
 









Neues Bild erstellen



Kopieren

Okay, laßt uns diese Technik jetzt mit dem Bild "/tutorial/html/beginclass/11seamlss_02.gif" aus der Download-Datei versuchen:

Zuerst vergewissert euch, daß das Bild eine Farbtiefe von 16 Millionen Farben hat, sonst geht zu Farben || Farbtiefe erhöhen || 16 Millionen Farben.

Dieses Bild hat eine Breite und Höhe von jeweils 100 Pixeln. Erstellt jetzt ein neues Bild:
– Breite und Höhe = 200 Pixel (das Doppelte des Originalbildes)
– Hintergrundfarbe = Rot (damit man evtl. Spalten sehen kann)
– Bildtyp = 16.7 Millionen Farben

Klickt auf das Oríginalbild und geht zu Bearbeiten || Kopieren (Strg+C), dann klickt auf das neue Bild.

 
(Im Schema oben Nr. 1:) Fügt es als neue Ebene ein: geht zu Bearbeiten || Einfügen || Als neue Ebene (Strg+L). Dann schiebt das Bild mit der Maus in die obere linke Ecke des neuen Bildes. Vergewissert euch, daß oben und links kein Rot mehr zu sehen ist.
 
(Im Schema oben Nr. 2:) Fügt es als neue Ebene ein (Strg+L). Jetzt geht zu Bild || Spiegeln. Dann schiebt das Bild mit der Maus in die obere rechte Ecke des neuen Bildes. Vergewissert euch, daß oben, links und rechts kein Rot mehr zu sehen ist; wenn nötig, justiert die erste Ebene etwas nach.
 
(Im Schema oben Nr. 3:) Fügt es als neue Ebene ein (Strg+L). Jetzt geht zu Bild || Umdrehen. Dann schiebt das Bild mit der Maus in die untere linke Ecke des neuen Bildes. Vergewissert euch, daß oben, links und unten kein Rot mehr zu sehen ist; nötigenfalls justiert die erste Ebene etwas nach.
 
(Im Schema oben Nr. 4:) Fügt es als neue Ebene ein (Strg+L). Jetzt geht erst zu Bild || Umdrehen, dann zu Bild || Spiegeln. Dann schiebt das Bild mit der Maus in die rechte untere Ecke des neuen Bildes. Justiert alle Ebenen so neben- und untereinander, daß nirgendwo mehr Rot zu sehen ist.
 

Wenn ihr nirgendwo mehr den roten Hintergrund sehen könnt, geht zu Ebenen || Verbinden || Alle verbinden (glätten) und speichert euer neues Hintergrundbild.

Vielleicht wollt ihr es auch etwas verkleinern, damit auch die Dateigröße kleiner wird. Dann könnt ihr es als Hintergrundbild verwenden.

Mit dieser Technik kann man aus jedem beliebigen Bild ein nahtloses Hintergrundbild machen. Probiert es mal mit einem Photo (von einer Person oder Szene), was immer ihr wollt. Das Originalbild sollte allerdings ein ziemlich kleines Bild sein, damit das fertige Bild nicht zu groß wird; schließlich müßt ihr ja Breite und Höhe verdoppeln. Ihr könnt natürlich auch das fertige Bild verkleinern.

 
 


Links seht ihr ein Hintergrundbild, das ich aus einem Photo gemacht habe. Es ist aus einer Strandszene, wo eine Person am Wasser sitzt; das habe ich so geändert, daß nur noch die Arme im Wasser zu sehen waren. Wie ihr links sehen könnt, ist das Endergebnis ziemlich beeindruckend und kann als Hintergrund für eine Webseite verwendet werden.

Hier habe ich einen Hintergrund mit seitlichem Rand (mit einem Schatten auf blauem Hintergrund für den Text) daraus gemacht. Experimentiert einfach mal zum Vergnügen mit dieser Technik herum!
 

 


Nahtlose Hintergrundbilder mit Auswahl || Umwandeln in ein nahtloses Muster

Eine sehr nützliche PSP-Funktion ist die Möglichkeit, mit "Auswahl || Umwandeln in ein nahtloses Muster" aus jedem Bild ein nahtloses Muster zu erstellen. Obwohl die Anwendung dieser Funktion sehr einfach ist, hängt viel davon ab, welches Bild man verwendet und welche Auswahl man für die Umwandlung trifft.

Diese Technik üben wir mit dem Bild "/tutorial/html/beginclass/11seamlss_25.gif" aus eurer Download-Datei. Dieses Bild (oben) ist ein ziemlich helles Bild. Es sieht zwar so aus, als könnte es sich nahtlos für einen Hintergrund auf einer Webseite aneinandersetzen, tatsächlich ist das aber nicht der Fall. Unten seht ihr das Bild, das dadurch entstehen würde: die Nahtstellen sind deutlich zu sehen.

Im Prinzip funktioniert diese Technik so, daß PSP bei einer Auswahl von einem Bild die Umgebung so verändert, daß sie nahtlos erscheinen. Am besten versteht man das, wenn man es einfach einmal ausprobiert, und ihr werdet sehen, wie man ausgezeichnete nahtlose Hintergrundbilder aus jedem Bild machen kann.

 



Bild öffnen     Werkzeug "Auswahl"

Laßt uns also ein nahtloses Muster erstellen:

Öffnet das Bild "/tutorial/html/beginclass/22seamlss_25.gif" aus dem Download und geht zu Farben || Farbtiefe erhöhen || 16 Millionen Farben.

Klickt auf das Auswahl-Werkzeug in der Werkzeugleiste:
– Auswahltyp = Rechteck
– Randschärfe = 0
– Antialiasing = nicht aktiviert

Zieht jetzt eine rechteckige Auswahl in dem Bild auf, etwas vom Bildrand entfernt.

 


Das Ergebnis ist ein nahtloses Bild. Obwohl es dem Originalbild sehr ähnlich ist, fügt es sich sehr schön aneinander und man sieht keine Nathstellen, wenn man es als Hintergrundbild verwendet.

Auf diese Art könnt ihr jedes Bild verwenden. Macht einfach eine Auswahl, die ihr für einen Hintergrund haben möchtet, und geht zu Auswahl || Umwandeln in ein nahtloses Muster. Je mehr ihr mit dieser Funktion experimentiert, umso mehr werdet ihr finden, daß man damit fantastische Hintergrundbilder machen kann.

Um alle Hintergrundbilder dieser Lektion und noch einige mehr zu sehen, könnt ihr bei Prof's Tour on Seamless Patterns (in Englisch) vorbeischauen!

– Viel Spaß! – :o)

 
In der nächsten Stunde machen wir Hintergrundbilder mit einem seitlichen Rand – bis dann!
 
(Übersetzung aus dem Englischen von Doro Sensen)