Home > Tutorials > Effects V7 > 
Presidents Day Image Map
E-mail this tutorial to a friend Email to a Friend

Presidents Day Image Map

Von: Leftie
 
Der Presidents Day in den USA ist am 18. Februar. In diesem Tutorial werden wir eine Graphik zusammenstellen, die die ersten 6 Präsidenten der Vereinigten Staaten zeigt, und dann diese Bilder zu anderen Webseiten verlinken, die Informationen über diese Präsidenten enthalten. Dafür werden wir den Image Mapper von PSP verwenden. Wir werden außerdem mit ziemlich vielen Ebenen arbeiten, es ist also nötig, diese zu benennen, damit man sich nicht verläuft ;-)).
 
Download für das TutorialDownload-Datei
Die Download-Datei enthält die Bilder der Präsidenten und eine große Flagge der USA.
 

Bild öffnen
Öffnet alle 7 Bilder aus der Download-Datei. Als erstes werden wir mit der Flagge arbeiten. Dieses Bild ist sehr groß, deshalb wollen wir es zunächst verkleinern:
 
Geht zu Fenster || Duplizieren, um das Original zu behalten, dann schließt die Original-Datei. Das duplizierte Bild ist jetzt wieder das aktive Bild. Jetzt geht zu Bild || Bildgröße und stellt folgendes ein:
Pixelgröße: Breite = 600
Änderungsmethode = Smart
Alle Ebenen verändern = aktiviert
Seitenverhältnis behalten = aktiviert
Klickt auf OK.

Das Bild der Flagge war im BMP-Format gespeichert, wir müssen also die Farbtiefe erhöhen, damit wir alle Funktionen von PSP nutzen können. Das Bild sollte immer noch das aktive Bild sein. Geht zu: Farben || Farbtiefe erhöhen || 16 Millionen Farben.

Wenn ihr so weit seid, vergewissert euch, daß die gesamte Flagge im PSP-Arbeitsbereich sichtbar ist; falls nicht, könnt ihr ein wenig herauszoomen. Das Bild sollte etwa 1/4 der Arbeitsfläche einnehmen.

Klickt jetzt auf die Titelleiste des Bildes von George Washington, um es zum aktiven Bild zu machen (oder geht zu Fenster || wash.png), dann seht nach, ob die Ebenen-Palette geöffnet ist (falls nicht, drückt die Taste "L").

In der Version PSP 7.04 bleiben bei Bildern im PNG-Format die transparenten Bereiche erhalten; in der Version 7.02 sind diese Bereiche jetzt schwarz und müssen erst wieder transparent gemacht werden. Dafür macht ihr zunächst einen Doppelklick auf die Hintergrund-Ebene in der Ebenen-Palette und bestätigt mit OK, um diese Ebene in eine normale Ebene umzuwandeln. Dann klickt ihr auf den Zauberstab in der Werkzeugleiste und in den schwarzen Bildhintergrund. Wenn ihr genau sein wollt, zoomt in das Bild hinein, drückt die Umschalt-Taste und klickt dann in die schwarzen Bereiche in den Buchstaben des Namens. Jetzt drückt die Entf-Taste, und ihr habt einen transparenten Hintergrund. Hebt dann die Auswahl auf mit einem Rechtsklick auf das Bild. Das müßt ihr mit allen Präsidenten-Bildern machen, bevor ihr damit weiterarbeitet.

Geht jetzt mit der Maus auf die Ebene in der Ebenen-Palette und zieht diese Ebene in das Flaggenbild hinein.

 
Wenn ihr jetzt wieder mit einem Klick auf die Titelleiste das Flaggenbild zum aktiven Bild macht, seht ihr, daß wir jetzt zwei Ebenen in der Ebenen-Palette haben. Macht einen Rechtsklick auf "Ebene1" und wählt "Umbenennen" aus dem Kontextmenü, dann gebt "Washington" ein.
 
Werkzeug "Verschieben" Wenn man eine Ebene in ein anderes Bild gezogen hat, ist das Werkzeug "Verschieben" automatisch aktiviert. Geht also mit der Maus über das Bild von G. Washington im Flaggenbild und zieht es an seinen Platz:
 
Ihr müßt dieses Bild rechts von den Sternen plazieren, den Vornamen in dem roten Streifen auf der Flagge. Wenn erst einmal alle Bilder der Präsidenten im Flaggenbild sind, können wir sie noch besser ausrichten. Jetzt schließt das Originalbild von Washington, um Speicherplatz zu sparen und den Arbeitsbereich aufgeräumt zu halten.
 
Als nächstes wird mit derselben Technik das Bild von John Adams (jadams.png) neben Washington in das Bild positioniert. Denkt daran, die Ebene in "J Adams" umzubenennen. Richtet die Bilder so aus, daß sie gleichmäßig verteilt zwischen den Sternen und dem rechten Flaggenrand sind.
 
Als nächstes muß Präsident Thomas Jefferson (jeff.png) hinzugefügt werden. Schiebt ihn in die untere linke Ecke.

Dann fügt hinzu, in dieser Reihenfolge:
– James Madison (mad.png)
– James Monroe (monroe.png)
– John Quincy Adams (jqadams.png)

Denkt an das Umbenennen der Ebenen!

 
Zu diesem Zeitpunkt sollte eure Ebenen-Palette aussehen wie links dargestellt.
 
Werkzeug "Verschieben" Jetzt könnt ihr die Bilder hin- und herschieben, um sie richtig auszurichten. Interessant ist es daß, sobald ihr mit dem Werkzeug "Verschieben" auf eines der Präsidentenbilder klickt, die entsprechende Ebene zur aktiven Ebene in der Ebenen-Palette wird. Man braucht also nicht extra vorher die Ebene in der Ebenen-Palette anzuklicken, um sie zu verschieben.
 
  Wenn ihr fertig seid, geht zu Ebenen || Verbinden || Alle verbinden (glätten).
 
Jetzt haben wir unser fertiges Bild und können es zum Image Mapper exportieren. Wenn eure Web-Symbolleiste eingeblendet ist, könnt ihr auf dieses Symbol klicken, ansonsten geht zu Datei || Export || Image Map.
 
Unser Bild ist zu groß für das Vorschau-Fenster im Image Mapper, deshalb klickt einmal auf das Symbol "Zoomstufe verringern", so daß wir die gesamte Flagge sehen können.
 
Mit dem Image Mapper können wir sog. "Hotspots" in unseren Bildern definieren; wenn die Bilder im Browser aufgerufen werden und man mit der Maus über diese Hotspots fährt, verwandelt sich der Mauszeiger in eine Hand, und man kann klicken und zu einer anderen Seite gelangen.
 
Oben links im Dialogfenster "Image Map" sind die Werkzeuge zum Auswählen des Hotspot-Bereiches auf dem Bild. Zur Zeit gibt es kein Werkzeug für eine Ellipse, deshalb werden wir das Kreis-Werkzeug verwenden und damit so viel wie möglich aus den Bildern auswählen.
 
Zoomt in das Bild hinein, so daß ihr den Teil mit George Washington gut sehen könnt, und zieht einen Kreis auf wie links gezeigt. Der Markierungsrahmen kann mit den grünen Punkten links oben und rechts unten ausgerichtet werden. Bei aktiven Markierungen ist der Markierungsrahmen grün, nicht-aktive Markierungen werden rot dargestellt.
 
Wenn ihr euch einmal vertan habt, könnt ihr auf das Werkzeug "Löschen" klicken und dann auf den Markierungsrahmen, um ihn komplett zu entfernen.
 
Jetzt können wir die Objekt-Eigenschaften für diese Markierung festlegen.

Gebt folgendes in das Feld "URL" ein:
– http://members.aol.com/Icecold966/wash.html
Das ist die Adresse der Seite, zu der wir gelangen, wenn wir später auf diesen Hotspot klicken.

In das Feld "Alt-Text" gebt ein: George Washington.
Dieser Text wird angezeigt, wenn man mit der Maus über den Hotspot fährt.

Das Feld "Ziel" bleibt leer.

 
Macht so weiter und erstellt die Markierungen für die anderen Bilder. Denkt daran, die Namen der Präsidenten in das Feld "Alt-Text" einzugeben. Hier sind die URLs für die einzelnen Präsidenten:
John Adams – http://members.aol.com/icecold966/Adams.html
Thomas Jefferson – http://members.aol.com/icecold966/jeff.html
James Madison – http://members.aol.com/icecold966/madison.html
James Monroe – http://members.aol.com/icecold966/monroe.html
John Quincy Adams – http://members.aol.com/icecold966/JQA.html
 
Jetzt müssen wir die Speicheroptionen für das Bild einstellen. Vergewissert euch, daß im Abschnitt "Format" GIF ausgewählt ist und klickt dann auf den Button "Bild optimieren". Das Dialogfenster "GIF-Optimierung" wird geöffnet.
 
Auf der Karteikarte Transparenz:
– Keine Transparenz verwenden = aktiviert
Auf der Karteikarte Farben:
– Anzahl der Farben = 150
– Dithering-Effekt = 100
– Octree, optimiert = aktiviert
Auf der Karteikarte Format:
– Non-Interlaced = aktiviert
Klickt auf OK.
 
Jetzt ist es an der Zeit, unsere Einstellungen zu speichern. Klickt auf den Button "Einstellungen speichern" und sucht das Verzeichnis, in das ihr die Download-Dateien entpackt habt.

Gebt einen Namen ein, und der Image Mapper speichert die Daten als ".jmd"-Datei. Ihr könnt diese Einstellungen jederzeit mit dem Button "Einstellungen laden" wieder aufrufen.

 
Nun müssen wir noch unsere Image Map selbst speichern.

Im ersten Schritt speichern wir die HTML-Datei, die der Image Mapper erstellt. Diese enthält alle Informationen über die Koordinaten, mit der die Image Map funktioniert. Keine Panik! Ihr müßt mit dieser Datei nichts anderes tun als sie zu speichern und später in einen Webbrowser zu laden ;-)

Im zweiten Schritt speichern wir die Informationen über die Graphik. Beide Dateien speichern wir in dem Ordner, in den ihr die Dateien aus der Download-Datei entpackt habt.

 



Schritt 1:

Klickt auf den Button "Speichern unter". Sucht den Ordner, in den ihr die Dateien für dieses Tutorial entpackt habt, und gebt "/tutorial/html/tutweb/presidents.html" in das Feld "Dateiname" ein. Klickt auf "Speichern".

Schritt 2:

Jetzt wird das Dialogfenster "Image Map speichern unter" geöffnet. Sucht wieder euren Ordner mit den Tutorial-Dateien und nennt die Datei "presidents". Klickt auf "Speichern".

Jetzt könnt ihr das Dialogfenster "Image Map" schließen und euch eure Arbeit ansehen.

 
Im letzten Teil dieses Tutorials geht es darum, die Datei "/tutorial/html/tutweb/presidents.html" in euren Webbrowser zu laden. (Diese Anweisungen sind für den Internet Explorer 5.5, es sollte aber in anderen Browsern genauso funktionieren.) Öffnet euren Webbrowser und geht zu Datei || Öffnen.

Im Dialogfeld "Öffnen" klickt ihr auf den Button "Durchsuchen", sucht den Ordner, in dem ihr die Datei "/tutorial/html/tutweb/presidents.html" gespeichert habt, und wählt diese aus.

Klickt auf den Button "Öffnen", und wenn alles klappt, dann seht ihr eure Presidents Day Image Map.

Hier könnt ihr sehen, wie es aussehen sollte!

Herzlichen Dank an den Webmaster der Website IcoCold966 für seine Erlaubnis, seine Bilder und Links zu verwenden!

 
(Übersetzung aus dem Englischen von Doro Sensen)