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

Hintergrundbilder mit seitlichem Rand

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

 

Seitliche Ränder bei Webseiten werden immer beliebter, weil sie zum einen den Stil einer Webseite ausdrücken können und der Autor zum anderen auch Platz genug hat für seinen Text. Wir werden hier zwei Hintergrundbilder mit seitlichen Rändern machen. Einer dieser Ränder wird von Anfang an selbstgemacht, der andere aus einem Bild (das ihr in der Download-Datei findet), auf das die Funktion "Umwandeln in ein nahtloses Muster" von der letzten Stunde angewandt wurde.

Hintergründe mit seitlichem Rand haben normalerweise einen Rand zwischen 80 und 150 Pixel Breite. Einige Hintergründe haben sowohl links als auch rechts einen Rand (diese werden Rahmenhintergrundbilder genannt). Diese Art von Hintergründen ist für Websurfer gedacht, die mit einer Auflösung von 800x600 arbeiten.

Die Surfer, die die Seiten mit einer Auflösung von 640x480 betrachten, sehen den linken Rand und rechts nur einen Schatten, was der Seite etwas "Tiefe" verleiht. Leute, die die Seiten mit einer Auflösung mit 1024 Breite anschauen, sehen rechts vom rechten Seitenrand gar nichts (wenn das Hintergrundbild 1024 Pixel breit oder breiter ist), aber diese Leute sollten daran auch gewöhnt sein. Der Einsatz von Rahmenhintergrundbildern kann den Autor auf zweierlei Weise einschränken: Es ist weniger Platz für den Text, und nur die Besucher, die ihren Bildschirm auf 800x600 eingestellt haben, können die Seite wirklich so sehen, wie sie gedacht ist.

Ein Tip zur Webseiten-Gestaltung: Wenn man Hintergründe mit seitlichem Rand benutzt, nimmt man am besten ein transparentes GIF (mit einer Breite von etwas mehr als der Breite des Randes) als Abstandhalter. Dieses transparente GIF sollte (in einer Tabelle) so in den HTML-Code eingebaut werden, daß der Text weit genug nach rechts gerückt wird und nicht nach links über den seitlichen Rand verlaufen kann. Tabellen werden oft bei Webseiten mit seitlichem Rand eingesetzt. Die erste Spalte enthält das transparente GIF, so daß eine Art "Tabulator" entsteht, der Text und andere Bilder auf die rechte Seite neben den seitlichen Rand rückt.

Wenn ihr euch einmal die Seiten zur Illustration von Hintergründen mit seitlichen Rändern von Prof anseht (URL am Ende des Tutorials), dann seht ihr, wie für die Gestaltung der Seiten Tabellen benutzt werden. Normalerweise haben diese Tabellen einen Rand von 0 (border="0"), so daß die Tabelle nicht zu sehen ist. Diese Tabellen sind jedoch deshalb sichtbar gemacht, um euch zu zeigen, wie man eine Tabelle dazu einsetzt, den nötigen Rand freizulassen. Durch den Einsatz von Tabellen können die Besucher eurer Webseiten eure Seiten so sehen, wie ihr sie gestaltet habt, egal welchen Browser sie verwenden.

 
Download the attachments for this tutorial  Download-Datei
Die Download-Datei links enthält das Bild, das wir für die Gestaltung unseres zweiten seitlichen Randes brauchen.
 

Ein seitlicher Rand mit Textur

In diesem ersten Beispiel machen wir für den seitlichen Rand ein Bild mit einer Textur "Jeans".

 
Aktive Farben (PSP 5 & 6) Aktive Farben (PSP 7)
PSP 5+6 PSP 7

Stellt Farben und Stil ein:
– Vordergrundfarbe = Weiß
– Hintergrundfarbe = Hellblau (Rot = 192, Grün = 208, Blau = 240)

In PSP 7: Stellt Vorder- und Hintergrundstil auf Vollfarbe (auf den Pfeil in den Stiltafeln klicken und das Symbol ganz links wählen) und die Texturen auf "Keine Textur" (auf den Pfeil in den Texturtafeln klicken und das Symbol rechts wählen).

 

Neues Bild erstellen
Erstellt ein neues Bild:
– Breite x Höhe = 100 x 100 Pixel
– Hintergrundfarbe = Hintergrundfarbe (Hintergrund-/Füllfarbe)
– Bildtyp = 16.7 Millionen Farben
 

Werkzeug "Sprühdose"
Erstellt eine Textur:
In PSP 5: Hier gibt es den Textur-Effekt noch nicht, der für den seitlichen Rand in diesem Tutorial verwendet wird. Ihr könnt aber eine ganz schöne Textur mit der Sprühdose und einer Papiertextur herstellen; die Papiertextur "Asphalt" z.B. ergibt einen schönen Textureffekt.
 

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

Wählt unter den Voreinstellungen "Jeans" aus und klickt auf OK.

 

Werkzeug "Auswahl"
Dieses Bild würde beim Untereinandersetzen Kanten zeigen, deshalb werden wir es etwas verkleinern. Macht einen Doppelklick auf das Auswahl-Werkzeug:
– Links = 0
– Rechts = 100
– Oben = 1
– Unten = 99
Klickt auf OK und geht zu Bild || Bildgröße auf Auswahlgröße beschneiden.
 

Das Hintergrundbild mit dem Seitenrand:

Um auch die Benutzer mit größeren Monitoren zu berücksichtigen, werden wir unser Hintergrundbild 1280 Pixel breit machen. (Vielleicht wollt ihr es auch nur 1024 oder 800 Pixel breit machen.)

 

Dupliziert zunächst euer Seitenrand-Bild: Geht zu Fenster || Duplizieren.

Dann geht zu Bild || Leinwandgröße:
– Neue Breite = 1280 (oder eine Breite eurer Wahl)
– Neue Höhe = 98
– Horizontal zentrieren = nicht aktiviert
– Vertikal zentrieren = aktiviert
– Links = 0
– Rechts = erscheint automatisch (eure neue Breite minus 100)
Klickt auf OK.

 

Ihr habt gerade ein Hintergrundbild mit seitlichem Rand gemacht! Speichert es als GIF- oder JPEG-Datei. Denkt auch daran, ein transparentes GIF von mindestens 100 Pixeln Breite als Abstandhalter für eure Webseite zu erstellen.

In der nächsten Übung werden wir diesem seitlichen Rand durch einen Schatten ein wenig Tiefe verleihen.

Es gibt eine Reihe schöner Effekte, mit denen man einem seitlichen Rand Tiefe verleihen kann. Es ist zwar möglich, diese Effekte mit einer einzigen Ebene zu erstellen, aber ich finde es meistens hilfreich, mit mehreren Ebenen zu arbeiten, weil man dann mehr Kontrolle über die verschiedenen Effekte hat. Wenn man mit dem Bild fertig ist, kann man die Ebenen einfach verbinden.

Wandelt also zunächst eure Hintergrund-Ebene in eine normale Ebene um: Macht einen Rechtsklick auf die Hintergrund-Ebene in der Ebenen-Palette und wählt "Umwandeln in eine Ebene" aus dem Kontextmenü.

Da ein Schatten beim Untereinandersetzen wieder Linien zeigen würde, werden wir eine Technik anwenden, bei der das Bild zunächst vergrößert und nach dem Anwenden des Schatten-Effektes wieder verkleinert wird.

 





Werkzeug "Lupe" (Zoom)

Geht jetzt zu Bild || Leinwandgröße:
– Neue Breite = aktuelle Bildbreite ohne Änderung
– Neue Höhe = akt. Höhe plus mind. 4 (immer eine gerade Zahl)
– Horizontal und Vertikal zentrieren = beide aktiviert

Klickt auf OK. Wenn ihr jetzt in das Bild hineinzoomt, dann seht ihr, daß oben und unten transparente Ränder sind.

 
Werkzeug "Auswahl"

Setzt die Auswahl für den Schatten: Macht einen Doppelklick auf das Auswahl-Werkzeug:

– Links = 0
– Rechts = 100 (bzw. die Breite eures seitlichen Randes)
– Oben = 0
– Unten = 102 (bzw. die neue Gesamthöhe eures Bildes)

Klickt auf OK.

 

Gebt dem Rand einen Schatten:

In PSP 5 und 6: Geht zu Bild || Effekte || Schatten
In PSP 7: Geht zu Effekte || 3D Effekte || Schatten:
– Farbe = Schwarz
– Deckfähigkeit = 100
– Farbverlauf = 12
– Vertikale Ausrichtung = 0
– Horizontale Ausrichtung = 4

Klickt auf OK und hebt die Auswahl mit einem Rechtsklick auf (Strg+D).

 

Stellt die ursprüngliche Größe wieder her: Geht zu Bild || Leinwandgröße:
– Neue Höhe = 98 (oder eure ursprüngliche Bildhöhe)

Alle anderen Einstellungen bleiben, wie sie sind. Klickt auf OK und speichert euer Bild als GIF- oder JPEG-Datei. Ihr könnt es jetzt als Hintergrundbild mit seitlichem Rand für eure Webseite verwenden.

 

Tip
Tip 1: Ihr könnt auch dem blauen Hintergrund (nicht dem seitlichen Rand) eine Textur verleihen. Trefft eine Auswahl, die nur den blauen Bereich umfaßt, und wendet den Textur-Effekt auf die Ebene an. Arbeitet hier mit ganz kleinen Werten, 0 oder dem Minimalwert, damit man noch einen Text lesen kann. Experimentiert einfach – viel Vergnügen!
 

Tip
Tip 2: Ihr könnt auch dem seitlichen Rand mit seiner Textur etwas Tiefe verleihen. Dazu müßt ihr wieder die Leinwandgröße um mindestens 4 in der Höhe erhöhen, dann eine Auswahl um den seitlichen Rand mit der Textur erstellen und den Tasten-Effekt mit einer Höhe von 1 und minimaler Breite anwenden. Wendet diesen Effekt auf einer neuen Ebene an und setzt dann den Anpassungsmodus dieser Ebene auf "Helligkeit". Experimentiert einfach wieder – viel Spaß!
 

Ein seitlicher Rand aus einem Bild

Für diesen seitlichen Rand nehmen wir das Bild "/tutorial/html/beginclass/flowerdnld.gif" aus der Download-Datei. Dieses Bild war ursprünglich eine Rose, bei der dann eine Auswahl gemacht und der Effekt Auswahl || Umwandeln in ein nahtloses Muster angewandt wurde. Mit dieser Übung wollen wir euch einfach noch einen schönen Hintergrund mit seitlichem Rand zeigen.

 
Bild öffnen     Werkzeug "Farbauswahl" Öffnet also das Bild "/tutorial/html/beginclass/flowerdnld.gif" aus eurem Download. Klickt jetzt auf das Werkzeug "Farbauswahl" in der Werkzeugleiste und macht einen Rechtsklick auf eine helle Farbe in dem Bild, um diese als Hintergrundfarbe einzustellen. (Ich hatte ein helles Orange: Rot = 239, Grün = 210, Blau = 179).
 


Dupliziert das Bild mit Fenster || Duplizieren und schließt das Originalbild. Dann vergewissert euch, daß das Bild aus einer einzigen Ebene besteht, ansonsten geht zu Ebenen || Verbinden || Sichtbare verbinden (glätten).

Jetzt geht zu Bild || Leinwandgröße:
– Neue Breite = 1280 (oder eine Breite eurer Wahl)
– Neue Höhe = 142 (die Höhe des Originalbildes)
– Horizontal zentrieren = nicht aktiviert
– Vertikal zentrieren = aktiviert
– Links = 0
– Rechts = erscheint automatisch (1280 minus der Breite des Originalbildes). Klickt auf OK.

 
 

Jetzt geben wir dem Bild noch etwas Tiefe mit einem Schatten um das Blumenbild. Zunächst erhöht die Farbtiefe: Geht zu Farben || Farbtiefe erhöhen || 16 Millionen Farben.

Geht zu Bild || Leinwandgröße:
– Neue Breite = aktuelle Bildbreite ohne Änderung
– Neue Höhe = akt. Höhe plus mind. 4
– Horizontal und Vertikal zentrieren = beide aktiviert
Klickt auf OK.

 

Werkzeug "Auswahl"
Macht einen Doppelklick auf das Auswahl-Werkzeug:
– Links = 0
– Rechts = Breite des Originalbildes der Rose (89)
– Oben = 0
– Unten = Höhe des Originalbildes plus 4 (146)
Klickt auf OK.
 

Wendet den Schatten-Effekt (PSP 5 und 6: Bild || Effekte || Schatten; PSP 7: Effekte || 3D-Effekte || Schatten) mit denselben Einstellungen wie vorher an.

Macht die Leinwand wieder kleiner: geht zu Bild || Leinwandgröße:
– Neue Höhe = Höhe des Originalbildes (142)
Alle anderen Einstellungen bleiben bestehen. Klickt auf OK und hebt die Auswahl auf mit einem Rechtsklick in das Bild (Strg+D).

Jetzt könnt ihr zu dem einfarbigen Hintergrund noch eine Textur hinzufügen, wie z.B. "Moos", mit sehr niedrigen Werten.

 

Bilder für einen solchen seitlichen Rand können aus jedem beliebigen Bild entwickelt werden.

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

– Viel Spaß! – :o)

 
In der nächsten Stunde werden wir mit Ebenen arbeiten – bleibt dran!
 
(Übersetzung aus dem Englischen von Doro Sensen)