In der heutigen digitalen Welt sind Bilder mehr als nur statische Elemente. Oftmals möchten wir, dass ein Klick auf ein bestimmtes Bild oder einen Bereich innerhalb eines Bildes den Betrachter zu einer anderen Webseite, einem Produkt oder weiteren Informationen führt. Während normale Bildformate wie JPEG von Natur aus keine eingebetteten klickbaren Links unterstützen, bietet Adobe Photoshop eine leistungsstarke Methode, um Bilder für die Webnutzung vorzubereiten, die genau diese Interaktivität ermöglicht.
Die Herausforderung besteht darin, dass eine reine JPEG-Datei, die Sie beispielsweise einfach auf Ihrem Computer speichern, nicht wissen kann, dass ein bestimmter Bereich darauf ein Link sein soll. Hyperlinks sind ein Konzept des Webs, das in HTML-Dokumenten verankert ist. Photoshop löst dies, indem es nicht nur das Bild exportiert, sondern auch die notwendigen Informationen (oft in Form von HTML-Code), die einem Webbrowser mitteilen, welche Bereiche des Bildes klickbar sind und wohin sie verlinken sollen.
Diese Technik ist besonders nützlich für Webdesigner, Online-Marketer oder jeden, der interaktive Grafiken, Banner oder Image Maps für Websites erstellen möchte. Anstatt komplexe HTML-Strukturen von Hand zu codieren, können Sie die klickbaren Bereiche visuell in Photoshop definieren.
Die Methode: Slices und "Speichern für Web"
Der Schlüssel zum Hinzufügen von klickbaren Bereichen und Hyperlinks in Photoshop-Bildern liegt in der Verwendung des Slice-Werkzeugs und der speziellen Exportfunktion "Speichern für Web (Legacy)". Das Slice-Werkzeug ermöglicht es Ihnen, das Bild in mehrere kleinere Bereiche zu "zerschneiden" (Slices), und jedem dieser Bereiche können dann spezifische Eigenschaften wie eine Ziel-URL zugewiesen werden. Beim Export für das Web generiert Photoshop dann eine HTML-Datei, die diese Slices und ihre zugehörigen Links enthält, zusammen mit den tatsächlichen Bilddateien für jeden Slice.
Stellen Sie sich vor, Sie haben ein Bild eines Produkts und möchten, dass ein Klick auf das Produkt selbst zum Shop führt, während ein Klick auf Ihr Logo in der Ecke zu Ihrer Homepage navigiert. Mit dem Slice-Werkzeug können Sie separate Slices für das Produkt und das Logo erstellen und ihnen unterschiedliche Links zuweisen.
Schritt-für-Schritt-Anleitung: Hyperlinks in Photoshop-Bildern hinzufügen
Folgen Sie diesen Schritten, um klickbare Bereiche (mit Links) zu Ihren Bildern in Photoshop hinzuzufügen:
Schritt 1: Ihr Bild in Photoshop öffnen
Beginnen Sie, indem Sie das Bild, das Sie bearbeiten möchten, in Photoshop öffnen. Gehen Sie dazu im Menü zu Datei > Öffnen und wählen Sie die gewünschte Bilddatei aus. Es ist empfehlenswert, mit einer Kopie Ihrer Originaldatei zu arbeiten, um diese nicht versehentlich zu überschreiben. Das Bild wird standardmäßig als Hintergrundebene geöffnet.
Schritt 2: Das zu verlinkende Element hinzufügen (Optional)
Wenn Sie ein bestimmtes Element wie ein Logo, ein Symbol oder einen Button hinzufügen möchten, das klickbar sein soll, fügen Sie dieses nun in Ihr Bild ein. Der einfachste Weg dafür ist über Datei > Platzieren und verknüpfen... oder Datei > Platzieren und einbetten.... Wählen Sie die Datei des Elements aus (z. B. eine PNG-Datei Ihres Logos). Das Element wird als neue Ebene über Ihrem Hintergrundbild platziert. Passen Sie Größe und Position nach Bedarf an.
Wenn der klickbare Bereich bereits Teil des Originalbildes ist (z. B. ein Button, der schon im Design enthalten ist), können Sie diesen Schritt überspringen.
Schritt 3: Das Slice-Werkzeug auswählen und verwenden
Nun kommt das Slice-Werkzeug ins Spiel. Sie finden es in der Werkzeugleiste (normalerweise gruppiert mit dem Freistellungswerkzeug). Wählen Sie das Slice-Werkzeug (Taste C, eventuell mehrfach drücken, um zum Slice-Werkzeug zu wechseln) aus.
Ziehen Sie mit dem Slice-Werkzeug einen Rahmen genau um das Element oder den Bereich im Bild, den Sie klickbar machen möchten. Wenn Sie beispielsweise ein Logo in Schritt 2 hinzugefügt haben, ziehen Sie den Rahmen exakt um dieses Logo. Photoshop erstellt nun einen neuen Slice, der diesen Bereich markiert. Sie sehen oft eine Nummer und Linien, die den Slice umgeben.
Sie können mehrere Slices in einem Bild erstellen, um verschiedene Bereiche mit unterschiedlichen Links zu versehen oder um Bereiche zu definieren, die nicht klickbar sein sollen (diese werden dann ebenfalls als separate Slices exportiert).
Schritt 4: Slice-Optionen bearbeiten
Nachdem Sie den Slice erstellt haben, klicken Sie mit der rechten Maustaste (oder Ctrl+Klick auf Mac) auf den Rahmen des erstellten Slices. Wählen Sie im Kontextmenü die Option Slice-Optionen bearbeiten... aus.
Alternativ können Sie das Slice-Auswahlwerkzeug (findet sich ebenfalls gruppiert mit dem Slice-Werkzeug) auswählen, den Slice anklicken, um ihn zu aktivieren, und dann in der Optionsleiste am oberen Bildschirmrand auf die Schaltfläche "Slice-Optionen..." klicken.
Schritt 5: Den Hyperlink hinzufügen
Im Dialogfeld "Slice-Optionen" sehen Sie verschiedene Felder. Das wichtigste Feld für unser Ziel ist das Feld mit der Bezeichnung URL. Geben Sie hier die vollständige Webadresse ein, zu der der Klick auf diesen Slice führen soll. Achten Sie darauf, dass Sie das Protokoll (z. B. http:// oder https://) mit angeben.
Optional können Sie auch einen Namen für den Slice vergeben (nützlich für die Organisation und im generierten HTML-Code) und im Feld Ziel festlegen, ob sich der Link in einem neuen Tab/Fenster öffnen soll (üblich ist _blank) oder im selben Fenster (_self).
Klicken Sie auf OK, um die eingegebenen Optionen zu speichern und den Hyperlink dem Slice zuzuweisen.
Schritt 6: Das Bild für das Web exportieren
Dies ist der entscheidende Schritt, bei dem Photoshop die Dateien generiert, die Ihre Slices und Links nutzbar machen. Gehen Sie im Menü zu Datei > Exportieren > Speichern für Web (Legacy)....
Im Dialogfeld "Für Web speichern (Legacy)" sehen Sie eine Vorschau Ihres Bildes und viele Optionen zur Optimierung für das Web. Stellen Sie sicher, dass Sie das gewünschte Dateiformat für die Bildteile auswählen (typischerweise JPEG, aber auch GIF oder PNG sind möglich, je nach Bildinhalt und Anforderungen). Wählen Sie die Qualitätseinstellungen für das JPEG-Format. Photoshop optimiert die Slices automatisch basierend auf diesen Einstellungen.
Klicken Sie unten im Dialogfeld auf die Schaltfläche Speichern.... Im folgenden Dialogfeld wählen Sie den Speicherort für die Ausgabedateien. Ganz wichtig ist das Dropdown-Menü Format. Hier müssen Sie HTML und Bilder auswählen. Dadurch stellt Photoshop sicher, dass nicht nur die einzelnen Bilddateien der Slices gespeichert werden, sondern auch eine HTML-Datei, die das Originalbild mit den klickbaren Slices nachbildet.
Klicken Sie auf Speichern. Photoshop erstellt nun einen Ordner (standardmäßig mit dem Namen "images" am gewählten Speicherort) mit den geschnittenen Bildteilen und eine HTML-Datei. Wenn Sie die HTML-Datei in einem Webbrowser öffnen, sehen Sie das zusammengefügte Bild, und die von Ihnen definierten Slices sind klickbar und führen zu den angegebenen URLs.
Wie funktioniert das im Hintergrund?
Wenn Sie die Option "HTML und Bilder" beim Export über "Speichern für Web (Legacy)" wählen, generiert Photoshop eine einfache HTML-Datei. Diese HTML-Datei enthält typischerweise einen <img> Tag, der das Bild darstellt, und verwendet entweder eine Tabelle oder eine Image Map (<map> und <area> Tags), um die von Ihnen definierten Slices und ihre zugehörigen Hyperlinks zu definieren. Der Browser liest diese HTML-Datei, lädt die einzelnen Slice-Bilddateien aus dem "images"-Ordner und setzt sie so zusammen, dass sie wie das Originalbild aussehen. Die HTML-Struktur sorgt dann dafür, dass Klicks auf die Bereiche der Slices die hinterlegten URLs aufrufen.
Es ist entscheidend zu verstehen, dass der Link nicht in der `.jpg`-Datei selbst steckt, sondern in der begleitenden `.html`-Datei und der Art und Weise, wie ein Webbrowser diese interpretiert und darstellt. Daher müssen Sie immer die HTML-Datei und den zugehörigen "images"-Ordner zusammen verwenden, wenn Sie das Bild auf einer Webseite einbinden möchten.
Anwendungsbereiche für klickbare Bilder
Die Fähigkeit, Hyperlinks in Bilder zu integrieren, ist in verschiedenen Szenarien nützlich:
- Web-Banner und Anzeigen: Erstellen Sie ansprechende Banner, bei denen verschiedene Produkte oder Angebote innerhalb des Banners auf ihre jeweiligen Shop-Seiten verlinken.
- Interaktive Infografiken: Machen Sie komplexe Grafiken interaktiver, indem Sie auf bestimmte Elemente klicken lassen, um zusätzliche Informationen anzuzeigen oder zu externen Quellen zu verlinken.
- Image Maps: Erstellen Sie Navigationsmenüs oder interaktive Karten, die komplett aus einem Bild bestehen, bei denen aber jeder Bereich ein eigener Link ist.
- E-Mail-Signaturen: Obwohl komplexer und nicht von allen E-Mail-Clients gleich unterstützt, kann diese Technik verwendet werden, um klickbare Bereiche in einer E-Mail-Signaturgrafik zu erstellen.
Wichtige Überlegungen und Einschränkungen
Beachten Sie, dass die "Speichern für Web (Legacy)"-Funktion in zukünftigen Versionen von Photoshop möglicherweise durch modernere Exportoptionen ersetzt wird. Die grundlegende Methode der Slice-Erstellung zur Definition klickbarer Bereiche bleibt jedoch ein Kernkonzept für die Erstellung von Image Maps.
Die erzeugte HTML-Struktur ist relativ einfach. Für komplexere Web-Layouts oder responsive Designs, die sich an verschiedene Bildschirmgrößen anpassen, ist es oft besser, das Bild ohne Slices zu exportieren und die Links sowie die interaktive Struktur direkt im modernen HTML- und CSS-Code Ihrer Webseite zu erstellen, indem Sie das <img> Tag innerhalb eines <a> Tags platzieren.
Die Methode mit Slices und "Speichern für Web" ist ideal für statische Layouts oder bestimmte Grafiken, bei denen die klickbaren Bereiche fest definiert sind und sich nicht dynamisch anpassen müssen.
Vergleich verschiedener Exportmethoden in Photoshop
Es ist hilfreich zu verstehen, wie sich das "Speichern für Web" mit Slices von anderen Exportmethoden unterscheidet:
| Export-Methode | Dateiformat(e) | Klickbare Links integriert? | Primärer Zweck |
|---|---|---|---|
| Datei > Speichern unter... | PSD, JPEG, PNG, TIFF, etc. | Nein | Speichern des Projekts oder finalen Bildes für Druck, Archivierung oder Weiterbearbeitung. |
| Datei > Exportieren > Exportieren als... | PNG, JPG, GIF, SVG | Nein | Schneller Export optimierter Bilddateien in verschiedenen Formaten und Skalierungen. |
| Datei > Exportieren > Speichern für Web (Legacy)... (ohne Slices) | JPEG, GIF, PNG-8, PNG-24, WBMP | Nein | Optimierter Export einer einzelnen Bilddatei für die Webnutzung (reduzierte Dateigröße). |
| Datei > Exportieren > Speichern für Web (Legacy)... (mit Slices) | HTML-Datei + Bilddateien (gesliced) | Ja (in der HTML-Datei) | Erstellung von Image Maps oder Web-Layouts mit klickbaren Bereichen. |
Diese Tabelle verdeutlicht, dass nur die Methode "Speichern für Web (Legacy)" in Verbindung mit Slices die notwendige Struktur für klickbare Bereiche in einem Webkontext liefert.
Häufig gestellte Fragen (FAQs)
Hier sind Antworten auf einige gängige Fragen zum Thema Hyperlinks in Photoshop-Bildern:
Kann ich einen Hyperlink direkt *in* der JPEG-Datei speichern?
Nein. JPEG ist ein reines Bildformat, das nur Pixeldaten speichert. Es unterstützt keine interaktiven Elemente wie Links. Die Methode in Photoshop erstellt die Link-Informationen in einer separaten HTML-Datei, die zusammen mit den Bildteilen verwendet wird.
Funktioniert der Link, wenn ich die exportierte `.jpg`-Datei einfach auf meinem Computer öffne?
Nein. Der Link ist nicht in der `.jpg`-Datei selbst enthalten. Er ist Teil des HTML-Codes, den Photoshop beim "Speichern für Web" generiert. Sie müssen die von Photoshop erstellte `.html`-Datei in einem Webbrowser öffnen, damit die Slices und ihre Links funktionieren.
Gibt es eine Tastenkombination, um einen Link in Photoshop hinzuzufügen?
Es gibt keine einzelne Tastenkombination, um direkt einen Hyperlink wie in einem Textdokument einzufügen. Das Hinzufügen eines Links in Photoshop erfolgt über den Prozess der Slice-Erstellung, der Eingabe der URL in den Slice-Optionen und des anschließenden Exports über "Speichern für Web". Dies ist ein mehrstufiger Prozess, keine einzelne Tastenkombination.
Was ist der Hauptunterschied zwischen "Speichern unter" und "Speichern für Web (Legacy)"?
"Speichern unter" dient hauptsächlich zum Speichern des aktuellen Arbeitsstatus (.psd) oder des finalen Bildes in Standardformaten (wie .jpg, .png) für Druck oder allgemeine Nutzung. "Speichern für Web (Legacy)" ist speziell für die Webnutzung optimiert: Es reduziert die Dateigröße, ermöglicht die Konvertierung in webfreundliche Formate und, wenn Slices verwendet werden, generiert es den notwendigen HTML-Code und die Bilddateien, um Interaktivität wie Hyperlinks zu ermöglichen.
Kann ich den Slice-Bereich exakt an eine Ebene anpassen?
Ja. Wählen Sie das Slice-Auswahlwerkzeug, klicken Sie auf den Slice, um ihn zu aktivieren. In der Optionsleiste oben gibt es eine Schaltfläche "Slice von Ebenen". Wenn Sie diese klicken, versucht Photoshop, den Slice exakt an die Begrenzungen der aktuell ausgewählten Ebene anzupassen. Dies ist sehr nützlich, wenn Sie ein Element auf einer eigenen Ebene platziert haben.
Fazit
Obwohl Sie einen Hyperlink nicht direkt *in* eine JPEG-Datei in Photoshop einbetten können, bietet das Programm eine effektive Methode, um klickbare Bildbereiche für die Webnutzung zu erstellen. Durch die Kombination des Slice-Werkzeugs mit der Funktion Speichern für Web (Legacy) können Sie interaktive Grafiken, Banner oder Image Maps erstellen, die beim Klick auf definierte Bereiche zu spezifischen URLs navigieren. Diese Technik ist ein wertvolles Werkzeug für jeden, der ansprechende und funktionale Bilder für das Internet gestalten möchte und die erzeugte HTML-Struktur einfach in seine Webseite integrieren kann.
Vergessen Sie nicht, dass das Ergebnis eine Kombination aus HTML-Datei und Bilddateien ist, die zusammen auf einem Webserver platziert werden müssen, damit die Links im Browser funktionieren. Das einfache Öffnen der exportierten `.jpg`-Datei zeigt nur das Bild ohne die klickbaren Funktionen.
Hat dich der Artikel Klickbare Bilder erstellen in Photoshop interessiert? Schau auch in die Kategorie Photoshop rein – dort findest du mehr ähnliche Inhalte!