So erstellen Sie eine Imagemap mit Photoshop

Starten Sie Photoshop und öffnen Sie ein Bild, das Sie in eine Imagemap konvertieren möchten. Klicken und halten Sie das Werkzeug "Zuschneiden", um ein Menü mit anderen Werkzeugen anzuzeigen. Klicken Sie auf das "Slice"-Tool, um es auszuwählen.

Klicken Sie auf einen Punkt im Bild und ziehen Sie das Slice-Werkzeug, um einen Begrenzungsrahmen um den Teil des Bildes zu zeichnen, den Sie anklickbar machen möchten. Photoshop zeichnet zusätzliche "Auto-Slices" um andere Teile des Bildes. Diese Auto-Slices stellen sicher, dass alle Teile eines Bildes in einem Slice enthalten sind.

Klicken Sie mit der rechten Maustaste in das von Ihnen erstellte Slice und wählen Sie „Slice-Optionen bearbeiten“, um das Fenster „Slice-Optionen“ zu öffnen. Geben Sie die URL ein, die Sie dem Slice zuordnen möchten. Sie können den Standardnamen, den Photoshop dem Slice gegeben hat, auch ersetzen, indem Sie einen neuen in das Textfeld "Name" eingeben.

Klicken Sie auf "OK", um das Fenster mit den Slice-Optionen zu schließen und zum Bild zurückzukehren. Klicken Sie auf einen anderen Punkt im Bild und ziehen Sie das Slice-Werkzeug, um bei Bedarf zusätzliche Slices zu erstellen.

Wählen Sie das "Slice Select Tool" aus der Symbolleiste aus und klicken Sie in ein Slice, das Sie verschieben möchten.

Halten Sie die linke Maustaste gedrückt und ziehen Sie das Slice an eine neue Position.

Halten Sie den Mauszeiger über eine der Kanten der Scheibe und eine Linie mit Pfeilen an jedem Ende wird angezeigt. Klicken Sie auf diese Linie, halten Sie die linke Maustaste gedrückt und ziehen Sie die Maus, wenn Sie das Slice vergrößern oder verkleinern möchten.

Klicken Sie auf „Datei“ gefolgt von „Für Web speichern“, um das Fenster „Für Web speichern“ zu öffnen.

Klicken Sie auf "Voreinstellung" und wählen Sie eine der angezeigten Dateitypoptionen aus. Zur Auswahl stehen GIF 128 Dithered, JPEG High und PNG-24.

Klicken Sie auf "Speichern", um ein Fenster zu öffnen, das die Dateien und Ordner Ihrer Festplatte anzeigt. Navigieren Sie zu dem Ordner, in dem Sie die Imagemap-Dateien speichern möchten, und geben Sie einen Namen für die Imagemap in das Textfeld Dateiname ein.

Klicken Sie auf das Dropdown-Menü "Format" und wählen Sie "HTML und Bilder". Klicken Sie auf "Speichern", um alle Dateien in dem von Ihnen angegebenen Ordner zu speichern.

Photoshop speichert jedes Slice als separates Bild in einem Bilderordner. Das Programm speichert auch ein HTML-Dokument, das denselben Namen hat wie der Name, den Sie in das Textfeld „Dateiname“ eingegeben haben. Wenn Sie diese HTML-Datei im Datei-Explorer finden und auf die Datei doppelklicken, wird Ihr Browser geöffnet und zeigt Ihre Imagemap an. Klicken Sie auf verschiedene Teile der Imagemap, um zu den URLs zu navigieren, die Sie den Slices zugewiesen haben. Wenn Sie beispielsweise eine US-Karte in Bundesstaaten unterteilt haben, indem Sie für jeden Bundesstaat ein Slice erstellt haben, können Sie auf einen Bundesstaat klicken, um zu der URL zu gelangen, die diesem Slice zugewiesen ist.

Geben Sie Slices aussagekräftige Namen, und Sie werden es leichter finden, sie zu identifizieren, wenn Sie den von Photoshop generierten HTML-Code optimieren möchten. Wenn Sie beispielsweise ein Slice erstellt haben, das den Bundesstaat Iowa umgibt, können Sie das Slice Iowa benennen.

Sie möchten Ihre Imagemap-Bilder wahrscheinlich im gleichen Format wie das Originalbild speichern. Wenn es sich beispielsweise um ein JPEG handelt, wählen Sie eine der JPEG-Optionen aus dem Dropdown-Menü „Vorgabe“ im Fenster „Für Web speichern“. Wählen Sie beispielsweise „JPEG Low“, und Photoshop erzeugt JPEG-Bilder von geringer Qualität. Je niedriger die Qualität eines Bildes ist, desto schneller wird es in einem Webbrowser geladen.

Dieser Artikel gilt für Adobe Photoshop CC, Version 2014. Einige Informationen können in anderen Versionen der Software abweichen.