Home  >  Tutorials  >  Effects V7  >
Hintergrund mit Filmstreifen-Rand
E-mail this tutorial to a friend Email to a Friend

Hintergrund mit Filmstreifen-Rand

Created by: Ped
(Bearbeitet für PSP 7 von: Prof)

 
  (Anmerkung von Prof: Dieser von Ped kreierte Filmstreifen ordnet Bilder wie auf einem Kamerafilm an. Hierfür kann jedes Bild verwendet werden, von Photographien bis PSP-Bildern, die mit den verschiedensten Techniken oder auch mit Bildstempeln gemacht wurden. Mit diesem Filmstreifen-Hintergrund hat man eine großartige Möglichkeit, seine Arbeiten auf einer Webseite vorzustellen. Der linke Rand hier neben der Einführung ist der Rand, den Ped gemacht hat. – Wir hoffen, das Tutorial gefällt euch, und vielen Dank an Ped, daß sie uns an dieser Idee teilhaben läßt!)

Dies ist mein erster Versuch, ein Tutorial zu schreiben, und ich hoffe, es gefällt euch. Wie bei jedem anderen Tutorial sind die hier genannten Einstellungen nicht die allein richtigen, sie sind einfach die, mit denen ich diesen Rand hier links gemacht habe.

Alle hier verwendeten Bilder wurden in PSP mit Bildstempeln gemacht ... die meisten sind freie Bildstempel von Jasc oder sind mit Paint Shop Pro 5.01 gekommen.

Ich hoffe, ihr findet dieses Tutorial nützlich für euch, und vielleicht schickt ihr mir ja eine Email nach theped@hotmail.com mit einem Kommentar.

Ich habe dieses Tutorial geschrieben, weil viele Leute mich gefragt haben, wie ich den Hintergrund für meine Ares-Webseite gemacht habe. Die hier gezeigte Technik ist dieselbe, nur die Bilder sind natürlich andere.

 
Download the attachments for this tutorial  Download-Datei
In der Download-Datei findet ihr den fertigen Filmstreifen-Hintergrund sowie die fünf einzelnen Bilder, die ich dafür verwendet habe.
 
Bild öffnen

Die Bilder

Öffnet die Bilder, die ihr für den Hintergrundrand verwenden möchtet (ihr könnt alle Bilder nehmen, z.B. welche, die ihr mit Bildstempeln gemacht habt) oder die JPEG-Dateien aus dem Download. Meine Bilder sind 320 Pixel breit und 240 Pixel hoch.
 
Wenn ihr meine Dateien benutzt (wie auch bei anderen Bildern), werdet ihr sie etwas verkleinern wollen. Bilder für einen Seitenrand sollten ca. 100-150 Pixel breit sein. In meinem Seitenrand sind die Bilder 112 Pixel breit.

Macht von jedem Bild eine Kopie mit Fenster || Duplizieren und schließt das Originalbild. Dann geht (für jedes Bild) zu Bild || Bildgröße:
– Pixelgröße = aktiviert
– Breite = 112 (die Höhe wird automatisch auf 84 gesetzt)
– Änderungsmethode = Smart
– Alle Ebenen verändern = aktiviert
– Seitenverhältnis ... behalten = aktiviert
Klickt auf OK.

 


Neues Bild erstellen


Werkzeug "Lupe" (Zoom)


Kopieren




Werkzeug "Verschieben"

















Werkzeug "Zauberstab"

Werkzeug "Farbfüllung"







Ebenen-Palette: Ein-/Ausblenden der Ebene (hier: unsichtbar)







Ebenen-Palette: Ein-/Ausblenden der Ebene (hier: sichtbar)

Den seitlichen Rand einrichten

Erstellt ein neues Bild, 300x600 Pixel, weißer Hintergrund, 16.7 Millionen Farben.

Gleich, beim Positionieren der einzelnen Bilder in eurem neuen Bild, werdet ihr in das Bild hineinzoomen wollen.

Kopiert jedes Bild, das ihr verwenden möchtet, mit Bearbeiten || Kopieren (Strg+C) und fügt es dann als neue Ebene mit Bearbeiten || Einfügen || Als neue Ebene (Strg+L) in euer neues Bild ein.

Klickt auf das Werkzeug "Verschieben" und schiebt dann die Bilder an ihren richtigen Platz, das erste ganz nach oben links und die anderen dann darunter aufgereiht. Vergewissert euch, daß die rechten Bildränder einen senkrechten Rand ergeben und daß kein Weiß vom Hintergrund mehr zwischen den Bildern zu sehen ist.

Die hier verwendete Reihenfolge der Bilder ist: "/tutorial/html/tut7eff/candy.jpg", "/tutorial/html/tut7eff/leaves.jpg", "/tutorial/html/tut7eff/fire.jpg", "/tutorial/html/tut7eff/Coins.jpg" und "/tutorial/html/tut7eff/roses.jpg".

Wenn euer Bild nicht hoch genug ist für alle Bilder, geht zu Bild || Leinwandgröße:
– Neue Breite = 600
– Neue Höhe = wie ihr sie braucht
– Horizontal zentrieren = egal, da sich die Breite nicht ändert
– Vertikal zentrieren = nicht aktiviert
– Oben = 0 (die anderen Werte werden dann automatisch gesetzt)

Wenn der untere Bildrand jetzt nicht weiß ist, klickt mit dem Zauberstab darauf (dafür die Ebene "Hintergrund" in der Ebenen-Palette aktivieren) und füllt die Auswahl dann mit Weiß.

Wenn ihr mit den Bildern aus der Download-Datei arbeitet, habt ihr jetzt 6 Ebenen: die 5 Bilder und den Hintergrund. Vielleicht ist unter den fünf Bildern am unteren Bildrand noch Weiß; das macht nichts, wir entfernen das später.

Wenn ihr alle Bilder in euer neues Bild eingefügt habt, schaltet die Ebene "Hintergrund" unsichtbar, klickt auf eine der anderen Ebenen in der Ebenen-Palette und geht zu Ebenen || Verbinden || Sichtbare verbinden.

Macht einen Rechtsklick auf die verbundene Ebene, wählt "Umbenennen" aus dem Kontextmenü und nennt diese Ebene "Bilder".

Schaltet jetzt die Hintergrund-Ebene wieder sichtbar.

 


Neues Bild erstellen

Der Text

Erstellt ein neues Bild, 200x50 Pixel, weißer Hintergrund, 16.7 Millionen Farben.
 
Stiltafeln Setzt euren Hintergrundstil auf "Vollfarbe" (klickt auf den Pfeil in der Hintergrund-Stiltafel und wählt das Pinsel-Symbol ganz links) und wählt dann eine Hintergrundfarbe die einen schönen Kontrast zu euren Bildern ergibt. Wenn ihr die Bilder aus dem Download verwendet, nehmt ein dunkles Blau (Rot = 9, Grün = 102, Blau = 172; Hex #0966AC).
 
Werkzeug "Farbfüllung" Klickt auf das Werkzeug "Farbfüllung" in der Werkzeugleiste und macht dann einen Rechtsklick in euer neues Bild, um es mit dem Blau zu füllen.
 
Ebenen-Palette: Neue Ebene erstellen Erstellt eine neue Ebene mit Namen "Text".
 

Werkzeug "Text"
Klickt auf das Text-Werkzeug in der Werkzeugleiste und dann in das neue Bild:
– Schriftart = eure Wahl (ich hatte Arial Narrow, Fett)
– Schriftgrad = ca. 10-12
– Stil: Umriß = Kein, Füllung = Vollfarbe: weiß
– Textur: Umriß und Füllung = Kein
– Eingabe: Fett und zentriert
– Text = eure Wahl (ich hatte 'Tutorial Background')
– Freie Auswahl = aktiviert
– Antialiasing = aktiviert
Klickt auf OK.
 
Wenn der Text nicht in der Mitte ist, nehmt ihn mit der Maus und zieht ihn in die Mitte des Bildes, dann macht einen Rechtsklick in das Bild, um die Auswahl aufzuheben.
 



Werkzeug

Den Text beschneiden

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

Zieht eine Auswahl um den Text auf, mit nur ein klein wenig Blau darum. Dann geht zu Bild || Bildgröße auf Auswahlgröße beschneiden.

 
  Geht zu Bild || Bildgröße:
– Pixelgröße = aktiviert
– Höhe = 20 (die Breite wird dann automatisch angepaßt)
– Änderungsmethode = Smart
– Alle Ebenen verändern = aktiviert
– Seitenverhältnis ... behalten = aktiviert

Geht einmal zu Effekte || Bildschärfe || Scharfzeichnen, um den Text nach dem Verkleinern etwas schärfer zu bekommen.

 
Fügt zehn Pixel rechts und links hinzu: Vergewissert euch zunächst, daß eure Hintergrundfarbe noch das Dunkelblau von eben ist (Rot = 9, Grün = 102, Blau = 172; Hex #0966AC), dann geht zu Bild || Leinwandgröße:
– Neue Breite = eure aktuelle Breite plus 20 (z.B. 103+20=123)
– Neue Höhe = 20 (hier ändert sich nichts)
– Horizontal und Vertikal zentrieren = aktiviert
Klickt auf OK.
 
Ebenen-Palette: Ein-/Ausblenden der Ebene (hier: unsichtbar)


Werkzeug "Farbfüllung"


Ebenen-Palette: Ein-/Ausblenden der Ebene (hier: sichtbar)
Schaltet die Ebene "Text" in der Ebenen-Palette unsichtbar und klickt auf die Hintergrund-Ebene.

Klickt auf das Werkzeug "Farbfüllung" in der Werkzeugleiste und füllt dann mit einem Rechtsklick die Ebene noch einmal mit Dunkelblau, um eventuelle (transparente) Streifen zu entfernen.

Schaltet die Ebene "Text" wieder sichtbar.

 
Geht zu Ebenen || Verbinden || Alle verbinden (glätten).

Speichert euer Bild als GIF-Datei (Name z.B. "/tutorial/html/tut7eff/Filmstreifen_Text.gif").

Dreht das Bild: Geht zu Bild || Drehen:
– Richtung = Links
– Grad = 90

Der Text sollte jetzt von unten nach oben verlaufen.

 

Den Text zum Bilderrand hinzufügen

Wenn wir jetzt den Text zum Bilderrand hinzufügen, könnt ihr vielleicht beim ersten Mal den Text nicht gleichmäßig verteilen; das liegt an der Größe (Höhe) des Bildes mit dem Text. Wahrscheinlich müßt ihr erst die Texthöhe anpassen und es dann noch einmal versuchen. Mein ursprüngliches Bild mit Text war 20x124 Pixel groß, und ich mußte es zum Schluß (mit Bild || Leinwandgröße) auf 20x104 Pixel verkleinern; dann mußte ich noch ein Bild mehr hinzufügen und unter die anderen schieben, damit zwischen dem Text kein weißer Hintergrund mehr zu sehen war.

 
Kopieren     Werkzeug "Verschieben"



Um das Bild mit dem Text zu verkleinern, geht zu Bild || Leinwandgröße. Dann setzt sowohl Horizontal als auch Vertikal zentrieren = aktiviert und eure Höhe = mindestens 4 Pixel weniger als die aktuelle Höhe.

Um das Bild mit dem Text zum großen Bild mit dem Bilderrand hinzuzufügen:

  • Kopiert das Bild mit dem Text mit Bearbeiten || Kopieren (Strg+C)
  • Klickt auf das große Bild, um es zum aktiven Bild zu machen
  • Fügt das kopierte Bild als neue Ebene ein mit Bearbeiten || Einfügen || Als neue Ebene (Strg+L)
  • Klickt auf das Werkzeug "Verschieben" in der Werkzeugleiste und schiebt die neue Ebene an ihren Platz

Schiebt das erste Bild nach unten an den Bilderrand und richtet die unteren Ränder richtig aus (dafür müßt ihr vielleicht ein bißchen in das Bild hineinzoomen).

Fügt das Bild mit dem Text noch einmal mit Strg+L in das große Bild ein und schiebt es nach oben an den Bilderrand.

Wiederholt dies (Strg+L) und schiebt dieses Bild jetzt unter das obere Bild mit dem Text. Macht so lange weiter, bis ihr den Streifen mit Text gefüllt habt.

Ich hatte zuerst vier Bilder mit Text, hatte dann aber noch ein bißchen Weiß zwischen den unteren Worten und den nächsthöheren. Ich habe dann noch einmal das Text-Bild eingefügt und es so plaziert, daß das Weiß verdeckt war.

 
Anmerkung: Mir wurde der Vorschlag gemacht, stattdessen eine Auswahl in der Größe des Textrandes zu machen und diese dann mit dem Füllwerkzeug, mit Vordergrundstil = Muster, zu füllen. Diese Methode würde jedoch manchmal mehr Arbeit erfordern, damit man das ganze Bild hinterher als Hintergrundbild nahtlos aneinanderfügen kann.
 










Werkzeug "Auswahl"




Stiltafeln

Werkzeug "Farbfüllung"
Anmerkung von Prof: Wenn ihr diese Methode einmal ausprobieren möchtet, versucht folgendes:
  • Notiert zunächst die Breite eures Bilderrandes (bei mir 112)
  • Notiert dann die Breite eures Text-Randes (bei mir 20)
  • Notiert auch die Höhe eures gesamten Bilderrandes (bei mir 418)
  • Macht einen Doppelklick auf das Auswahl-Werkzeug in der Werkzeugleiste:
    • Links = die Breite eures Bilderrandes (112)
    • Rechts = die Breite eures Bilderrandes plus die Breite des Textrandes (112+20=132)
    • Oben = 0
    • Unten = die Höhe eures Bilderrandes (418)
  • Klickt jetzt in der Vordergrund-Stiltafel auf den kleinen Pfeil und wählt das dritte Symbol von rechts für "Muster"
  • Klickt in die Vordergrund-Stiltafel und dann in das Feld mit dem Muster, rollt ganz nach oben und wählt das Bild mit dem Text
  • Zum Schluß klickt ihr auf das Werkzeug Farbfüllung und dann in die Auswahl, um sie mit dem Text-Bild (dem ausgewählten Muster) zu füllen.
 



Bild speichern

Speichert eure Bilder

Speichert jetzt beide Bilder, das große mit dem Bilderrand mit allen Ebenen sowie das Bild mit dem Text, als PSP-Dateien.

Geht zu Datei || Speichern unter und wählt das PSP-Format, dann wählt einen Dateinamen, an den ihr euch erinnern könnt (z.B. Filmstreifen-Rand.psp und Filmstreifen-Text.psp).

Jetzt braucht ihr das Bild mit dem Text nicht mehr, ihr könnt es schließen.

 








Werkzeug "Lupe2 (Zoom)

Der Filmstreifen-Rand als Hintergrundbild

Ihr habt jetzt nur noch das Bild mit dem Bilder- und Textrand geöffnet; falls nicht, klickt darauf, um es zum aktiven Bild zu machen.

Geht zu Fenster || Duplizieren, um eine Kopie dieses Bildes zu machen, dann schließt das Originalbild. Geht jetzt zu Ebenen || Verbinden || Alle verbinden (glätten). Am besten zoomt ihr jetzt etwas in das Bild hinein, so daß ihr den unteren Rand des Bilderstreifens gut sehen könnt.

 

Werkzeug "Beschneiden"
Klickt auf das Werkzeug "Beschneiden" in der Werkzeugleiste. Geht mit der Maus an den unteren Bilderrand und zieht von dort ein Rechteck auf bis zur Bildecke rechts oben.

Geht jetzt mit der Maus auf die linke Seite des Auswahlrahmens. Wenn der Cursor sich in einen Doppelpfeil verwandelt, zieht die linke Rahmenseite mit der Maus ganz an den linken Bildrand.

Jetzt kontrolliert die untere Rahmenseite, ob sie genau mit dem unteren Rand des Filmstreifens übereinstimmt. Wenn nicht, geht wieder mit der Maus an die untere Rahmenseite, und wenn sich der Cursor in einen Doppelpfeil verwandelt, zieht die Rahmenseite mit der Maus so, daß sie genau mit dem untersten Bildrand eures Filmstreifens abschließt.

Wenn alles richtig ist, klickt auf den Button "Beschneiden" in der Stil-Palette.

 

Aktive Farben (PSP 7)
Um die richtige Breite für das Hintergrundbild zu haben, setzt zunächst die Hintergrundfarbe auf Weiß. Dann geht zu Bild || Leinwandgröße:
– Neue Breite = 1200
– Neue Höhe = eure Bildhöhe (bei mir 418)
– Horizontal zentrieren = nicht aktiviert
– Vertikal zentrieren = egal (da sich die Höhe nicht ändert)
– Links = 0 (Rechts wird dann automatisch eingesetzt)
Klickt auf OK.
 
  Jetzt speichert euer Bild als GIF- oder JPEG-Datei, um es als Hintergrundbild für eure Webseite verwenden zu können.

Geht zu Datei || Export || JPEG-Optimierung oder GIF-Optimierung (je nachdem, welches die kleinere Dateigröße ergibt). Wenn ihr es als GIF-Datei speichern wollt, dann stellt 256 Farben ein und wählt "Octree, optimiert".

Jetzt ist euer Hintergrundbild mit dem Filmstreifen-Rand fertig. Ich hoffe, das Tutorial hat euch gefallen!

 
(Übersetzung aus dem Englischen von Doro Sensen)