Home  >  Tutorials  >  Photographic Enhancements  >
Photo-Negative mit Mouseover-Effekt
E-mail this tutorial to a friend Email to a Friend

Photo-Negative mit Mouseover-Effekt
Von: Doro Sensen

 

Negative mit Mouseover-Effekt sind eine schöne Möglichkeit, einen Photo-Index auf einer Webseite zu präsentieren. Hier steht wie's geht!

 
Download-Datei für dieses Tutorial  Download-Datei

Wenn ihr gerade kein Photo zur Hand habt, dann könnt ihr die Photos herunterladen, die ich in diesem Tutorial verwendet habe.

 

Bitte beachten!

Anmerkung: Ich habe mit den Maßen von Photo-Negativen in Deutschland gearbeitet und diese in Pixel umgewandelt [ein universales Maß! :-)]; ich weiß jedoch nicht, ob diese Maße in der ganzen Welt stimmen. Wir werden zunächst mit einem Bild arbeiten, das doppelt so groß wie ein "richtiges" Negativ ist, und dieses zum Schluß verkleinern.

 

Neues Bild erstellen

Beginnt mit einem neuen Bild:
– Breite = 220 Pixel
– Höhe = 192 Pixel
– Auflösung = 72 Pixel/inch
– Hintergrund = transparent
– Bildtyp = 16.7 Millionen Farben

 

Werkzeug "Auswahl"

Wir wollen die Kanten unseres Negativs schwarz haben. Macht einen Doppelklick auf das Auswahl-Werkzeug in eurer Werkzeugleiste:
– Links = 10
– Rechts = 210
– Oben = 28
– Unten = 164
– Benutzerdefinierte Größe und Position = aktiviert

Klickt auf OK, dann geht zu Auswahl || Umkehren, so daß der äußere Rand eures Bildes ausgewählt ist.

 
Stiltafeln

Setzt sowohl Vorder- als auch Hintergrundstil auf "Vollfarbe" (klickt auf den kleinen Pfeil in euren Stiltafeln und wählt das Pinselsymbol links), dann klickt direkt in die Stiltafeln und setzt eure Vordergrundfarbe auf Schwarz und eure Hintergrundfarbe auf Weiß. Die Texturen sollten beide auf "Keine" gesetzt sein.

 
Option "Standard"

Aktiviert die Option "Standard" unter den Texturtafeln.

 
Werkzeug "Farbfüllung"

Klickt auf das Füll-Werkzeug in eurer Werkzeugleiste:
– Anpassungsmodus = Normal
– Auswahlmodus = Kein
– Toleranz = abgeblendet
– Deckfähigkeit = 100
– Auswahl/Verbinden = nicht aktiviert

Jetzt klickt in eure Auswahl am äußeren Bildrand, um sie mit Schwarz zu füllen. Hebt die Auswahl auf mit Auswahl || Keine Auswahl (Strg+D).

 
Stiltafeln

Setzt euren Vordergrundstil auf "Kein" (klickt auf den kleinen Pfeil in eurer Vordergrund-Stiltafel und wählt das Symbol ganz rechts). Laßt Hintergrundstil und -farbe, wie sie sind.

 
Werkzeug "Lupe" (Zoom)

Wir werden jetzt ein kleines weißes Rechteck auf den oberen Rand des Bildes zeichnen. Wir zeichnen es als Vektorform, so daß wir es kopieren und ein paar Mal einfügen können. Da dieses Rechteck nur 10x16 Pixel groß wird, zoomt ihr besser ein- oder zweimal in das Bild hinein.

 

Werkzeug "Formen"

Klickt auf das Formen-Werkzeug in eurer Werkzeugleiste:
– Form = Gerundetes Rechteck
– Stil beibehalten = nicht aktiviert
– Antialiasing = nicht aktiviert
– Erstellen als Vektor = aktiviert
– Linienbreite = 1
– Linien-Stil = Standard-Vollinie

 




Geht mit der Maus auf die obere Kante des schwarzen Rahmens und zeichnet ein Rechteck von 10x16 Pixeln Größe. Die genaue Position des Rechtecks ist im Moment egal, aber beobachtet die Zahlen im dritten Klammernpaar in eurer Statusleiste für die Abmessungen eures Rechtecks.

Wahrscheinlich hat euer Rechteck jetzt keine gerundeten Ecken, das liegt an seiner Größe. Wenn wir Antialiasing aktiviert hätten, dann wären die Ecken zwar gerundet, aber dann hättet ihr nicht die Möglichkeit gehabt, eure fertige Arbeit als transparentes GIF zu speichern (wenn ihr das wollt), da dann halb-transparente Pixel in den Ecken entstanden wären.

 
Werkzeug "Vektor-Objekt-Auswahl"


Klickt auf das Vektor-Objekt-Auswahlwerkzeug in eurer Werkzeugleiste. Euer weißes Rechteck ist noch ausgewählt (andernfalls klickt einmal darauf, um es auszuwählen); jetzt macht einen Rechtklick in euer Bild und wählt "Kopieren" aus dem Kontextmenü. Macht noch einen Rechtsklick, wählt diesmal "Neue Vektor-Auswahl einfügen" und plaziert das zweite Rechteck irgendwo in der Nähe des ersten.

Wiederholt das Einfügen, bis ihr insgesamt 9 Rechtecke auf der schwarzen oberen Kante des Rahmens habt. Die genaue Position der Rechtecke spielt noch immer keine Rolle.

 
   

Euer Vektor-Objekt-Auswahlwerkzeug ist noch aktiviert. Klickt jetzt auf das Rechteck ganz links in der Reihe und zieht es zum linken Bildrand. Schaut auf das Zahlenpaar in der Statusleiste: laßt die Maustaste los, wenn die erste Zahl "5" ist (die Hälfte der Breite eures Rechtecks).

Als nächstes nehmt ihr das Rechteck ganz rechts in der Reihe und zieht es zum rechten Bildrand. Schaut wieder auf die Zahlen in der Statusleiste und laßt die Maustaste los, wenn die erste Zahl "215" ist (die Bildbreite minus der Hälfte der Breite eures Rechtecks).

 

Dann macht einen Rechtsklick in euer Bild und wählt "Alle auswählen" aus dem Kontextmenü, um alle Vektor-Rechtecke gleichzeitig auszuwählen.

Jetzt geht zuerst zu Objekte || Ausrichtung || Unten, dann zu Objekte || Verteilung || Horizontal auf der Leinwand. Eure weißen Rechtecke bilden jetzt eine schöne Reihe vom linken zum rechten Bildrand.

 

Haltet eure Umschalt-Taste gedrückt und drückt dann die Pfeiltaste nach oben oder unten, um die Reihe von Rechtecken an ihren Platz zu schieben; es sollte über den Rechtecken etwa doppelt so viel Schwarz sein wie darunter.

Danach macht wieder einen Rechtsklick in euer Bild, wählt "Kopieren" aus dem Kontextmenü, macht noch einen Rechtsklick und wählt "Neue Vektor-Auswahl einfügen". Plaziert die neu eingefügten Rechtecke auf der unteren schwarzen Kante des Rahmens und macht die Feinjustierung wieder mit gedrückter Umschalt-Taste und den Pfeiltasten (auf diese Weise kann man ein ausgewähltes Objekt pixelweise nach links/rechts oder oben/unten bewegen).

 

Jetzt haben wir jeweils 9 schöne kleine weiße Rechtecke am oberen und unteren Rand unseres Bildes. Tatsächlich wollen wir gar nicht diese Rechtecke, sondern rechteckige Löcher an deren Position. Macht also, mit immer noch aktiviertem Vektor-Objekt-Auswahlwerkzeug, wieder einen Rechtsklick in euer Bild und wählt "Alle auswählen" aus dem Kontextmenü.

Dann geht zu Auswahl || Aus Vektor-Objekt. Ihr solltet jetzt um jedes der kleinen Rechtecke einen Laufrahmen sehen.

 

Klickt in der Ebenen-Palette auf die unterste Ebene ("Ebene1") und drückt dann die Entf-Taste, um die ausgewählten Rechtecke aus der oberen und unteren schwarzen Kante zu löschen. Klickt jetzt wieder auf "Ebene2" (die Vektor-Ebene) und dann auf das Abfalleimer-Symbol, um diese Ebene zu löschen. Hebt die Auswahl auf mit Auswahl || Keine Auswahl (Strg+D).

Unser Rahmen für die Photo-Negative ist fast fertig. Wir müssen ihn nur noch ein wenig an den Seiten beschneiden, so daß oben und unten schöne rechteckige Löcher an der Naht entstehen, wenn wir zwei davon auf unserer Webseite nebeneinanderstellen (im Moment würden dort doppelte Löcher erscheinen).

 

Geht also zu Bild || Leinwandgröße:
– Neue Breite = 210
– Neue Höhe = 192
– Horizontal/Vertikal zentrieren = beide aktiviert

Jetzt haben wir einen Rahmen, von dem wir mehrere ohne sichtbare Nähte in eine waagerechte Reihe aneinandersetzen können.

 

Bild öffnen

Jetzt ist es Zeit, ein Photo in den Rahmen zu setzen. Öffnet "/tutorial/html/tutphoto/Flower1.jpg" aus eurer Download-Datei, dupliziert es mit Fenster || Duplizieren (Umschalt+D) und schließt das Originalbild.

Die Größe unseres Photos muß zwischen 200x136 Pixeln (das ist der freie Platz in der Rahmenmitte) und ca. 206x142 Pixeln liegen (so daß es nicht durch die rechteckigen Löcher am oberen und unteren Rand durchscheint). Um euch einen unnötig großen Download zu ersparen, habe ich "/tutorial/html/tutphoto/Flower1.jpg" schon auf 207x155 Pixel verkleinert. Das ist immer noch zu groß für unseren Rahmen, wir müssen es also noch ein wenig beschneiden.

 

Werkzeug "Beschneiden"

Macht einen Doppelklick auf das Werkzeug "Beschneiden" in eurer Werkzeugleiste:
– Links = 0
– Rechts = 206
– Oben = 0
– Unten = 142
– Benutzerdefinierte Größe und Position = aktiviert

 

Ihr seht jetzt einen weißen Rahmen auf dem Blumenbild in genau der Größe, die wir für unser Photo brauchen. Geht mit der Maus über den Rahmen und verschiebt ihn so, daß er den Teil des Photos umrahmt, den ihr behalten möchtet; dann klickt in der Stil-Palette auf den Button "Beschneiden".

Euer Photo hat jetzt genau die Größe, die ihr braucht.

 
Kopieren

Jetzt geht zu Bearbeiten || Kopieren (Strg+C), dann klickt auf euer Bild mit dem Photo-Negativ-Rahmen und geht zu Bearbeiten || Einfügen || Als neue Ebene (Strg+L). Das Blumenbild wird jetzt genau in die Mitte eures Bildes eingefügt.

Ihr braucht jetzt nur noch in der Ebenen-Palette die obere Ebene (die Blumen-Ebene) unter die untere Ebene (die Rahmen-Ebene) zu schieben.

Jetzt habt ihr euer Photo als Negativ gerahmt.

 

Für den Mouseover-Effekt brauchen wir aber auch ein richtiges Negativ, also dupliziert euer Bild zunächst mit Fenster || Duplizieren (Umschalt+D). Dann klickt auf die untere Ebene in der Ebenen-Palette, um sicherzustellen, daß die Blumen-Ebene aktiv ist.

Jetzt geht einfach zu Farben || Negativbild. Voilà – euer Photo als Negativ!

 

Um eure Photos mit Mouseover-Effekt auf eure Webseite zu stellen, vielleicht als Photo-Index, werdet ihr die Bilder zunächst auf die Hälfte ihrer Größe verkleinern wollen. Geht dafür zu Bild || Bildgröße:
– Prozentsatz der Originalgröße = aktiviert
– Breite und Höhe = beide 50%
– Änderungsmethode = Bilinear
– Alle Ebenen verändern = aktiviert
– Seitenverhältnis ... behalten = aktiviert

Euer Bild ist dann ungefähr so groß wie das mit Mouseover-Effekt links. Vielleicht möchtet ihr nach dem Verkleinern die Bildschärfe verbessern: versucht Effekte || Bildschärfe || Scharfzeichnen.

 

Der letzte Schritt wäre dann, eine Ebene mit dem Hintergrund eurer Webseite hinter die Photo-Ebene zu setzen und die Bilder als JPEG-Dateien zu speichern. Dann könnt ihr sie in eine Reihe auf eure Webseite stellen, ohne Leerstelle dazwischen. Wie ihr in dem Beispiel links sehen könnt, werden sie ohne sichtbare Nahtstelle aneinandergereiht. (Die Bilder links sind noch einmal um 75% verkleinert, so daß ich euch zwei Photos nebeneinander zeigen konnte. Wie das Bild oben sind auch diese beiden mit Mouseover-Effekt – versucht's mal! :-))

 

Ich hoffe, ich konnte euch eine interessante Möglichkeit zeigen, eure Photos auf einer Webseite zu präsentieren. Natürlich könnt ihr sie auch in einer senkrechten Reihe zeigen – dreht einfach den Rahmen um 90 Grad und verkleinert/beschneidet eure Photos entsprechend, dann setzt lediglich ein <br>-Tag zwischen die Zeilen, so daß kein leerer Raum zwischen den Bildern ist; auf diese Weise könnt ihr rechts von den Negativen eine Erklärung zu jedem Photo schreiben. Ein Mausklick auf ein Negativ würde dann zu einem größeren Photo führen.

Um zu sehen, wie der Mouseover-Effekt gemacht wird, geht hierhin – oder schaut in den Quelltext dieser Seite. ;-))

 
(Übersetzung aus dem Englischen von Doro Sensen)