Das Aufteilen eines Bildes in kleinere Segmente, auch Slices genannt, ist eine grundlegende Technik in der digitalen Bildbearbeitung, insbesondere wenn es darum geht, Grafiken für Webseiten oder andere digitale Medien vorzubereiten. Adobe Photoshop bietet hierfür ein spezielles Werkzeug an, das Slice-Werkzeug, mit dem Sie Bereiche Ihres Bildes definieren können, die später als separate Dateien exportiert werden sollen. Diese Technik ist nicht nur nützlich für die Erstellung von komplexen Web-Layouts, sondern auch für interaktive Elemente oder die Optimierung der Ladezeit.
In diesem ausführlichen Artikel führen wir Sie Schritt für Schritt durch den Prozess der Arbeit mit Slices in Photoshop. Wir zeigen Ihnen, wie Sie Slices erstellen, bearbeiten und vor allem, wie Sie sie korrekt exportieren, um das bestmögliche Ergebnis für Ihre Projekte zu erzielen.
Was genau sind Slices in Photoshop?
Slices sind im Grunde rechteckige Bereiche, die Sie über Ihr Bild legen. Sie definieren, welche Teile des Bildes beim Export als separate Bilddateien gespeichert werden. Wenn Sie ein Bild mit Slices exportieren, zerlegt Photoshop das Bild entlang der Slice-Grenzen und speichert jedes Segment als eine eigene Datei. Gleichzeitig kann Photoshop (über die Funktion "Für Web speichern (Legacy)") auch den benötigten HTML-Code und/oder CSS generieren, um diese Einzelbilder auf einer Webseite wieder zusammenzusetzen, oft in einer Tabelle oder mithilfe von CSS.
Es gibt zwei Haupttypen von Slices:
- Benutzer-Slices (User Slices): Diese erstellen Sie manuell mit dem Slice-Werkzeug oder automatisch aus Hilfslinien oder Ebenen. Sie haben volle Kontrolle über ihre Größe, Position und die Export-Einstellungen.
- Automatische Slices (Auto Slices): Diese werden von Photoshop automatisch generiert, um die Bereiche des Bildes auszufüllen, die nicht von Benutzer-Slices abgedeckt werden. Sie stellen sicher, dass das gesamte Bild in Slices aufgeteilt ist. Automatische Slices sind mit einer gestrichelten Linie gekennzeichnet und werden standardmäßig mit dem Slice-Werkzeug nicht direkt bearbeitet. Sie können jedoch automatische Slices in Benutzer-Slices umwandeln, falls Sie sie anpassen möchten.
Warum sollte man Slices in Photoshop verwenden?
Die Verwendung von Slices bietet mehrere Vorteile, insbesondere im Kontext der Webentwicklung:
- Optimierung: Sie können unterschiedliche Komprimierungs- und Dateiformat-Einstellungen auf verschiedene Slices anwenden. Ein Foto-Bereich kann als optimiertes JPG exportiert werden, während ein Logo mit Transparenz als PNG gespeichert wird und ein Bereich mit wenigen Farben als GIF. Dies ermöglicht eine maximale Bildqualität bei minimaler Dateigröße.
- Interaktivität: Slices können mit URLs verknüpft werden, um anklickbare Bereiche (Links) zu erstellen. Dies war früher eine gängige Methode zur Erstellung von Image Maps oder komplexen Navigationsmenüs.
- Schnellere Ladezeiten: Durch das Aufteilen eines großen Bildes in kleinere Teile können Browser die einzelnen Slices parallel laden, was die wahrgenommene Ladezeit der gesamten Seite verbessern kann.
- Layout-Erstellung: Slices helfen dabei, ein komplexes Layout-Design in Photoshop in die einzelnen Bildelemente zu zerlegen, die für die Webentwicklung benötigt werden (Header, Navigation, Banner, Content-Bereiche etc.).
- Animationen: Einzelne Slices können als Frames für einfache Web-Animationen (GIFs) verwendet werden.
Das Slice-Werkzeug finden und verwenden
Das Slice-Werkzeug ist in der Werkzeugleiste von Photoshop versteckt. Es befindet sich normalerweise unter dem Freistellungswerkzeug (Crop Tool). Klicken und halten Sie das Freistellungswerkzeug, um das Flyout-Menü zu öffnen, und wählen Sie dann das Slice-Werkzeug (Tastenkürzel: C, eventuell müssen Sie mehrfach C drücken, um durch die Werkzeuge zu wechseln).
Manuelles Erstellen von Slices
Nachdem Sie das Slice-Werkzeug ausgewählt haben, können Sie Slices manuell erstellen:
- Klicken und ziehen Sie mit dem Werkzeug einen rechteckigen Bereich auf Ihrem Bild auf. Sobald Sie die Maustaste loslassen, wird ein neuer Benutzer-Slice erstellt.
- Photoshop nummeriert die Slices automatisch, beginnend bei 01. Die blauen Linien zeigen Benutzer-Slices an, die grauen Linien automatische Slices.
- Automatische Slices werden um Ihre manuell erstellten Slices herum generiert, um das gesamte Bild abzudecken.
Slices aus Hilfslinien erstellen
Wenn Sie bereits Hilfslinien (Guides) in Ihrem Dokument platziert haben, können Sie diese verwenden, um Slices automatisch zu erstellen:
- Stellen Sie sicher, dass Ihre Hilfslinien korrekt platziert sind (Ansicht > Neu > Hilfslinie... oder ziehen Sie Hilfslinien aus den Linealen - Ansicht > Lineale).
- Wählen Sie das Slice-Werkzeug.
- Klicken Sie in der Optionsleiste am oberen Bildschirmrand auf die Schaltfläche "Slices aus Hilfslinien erstellen".
- Photoshop erstellt nun Slices basierend auf allen vorhandenen Hilfslinien.
Slices aus Ebenen erstellen
Diese Methode ist besonders nützlich, wenn Sie Elemente auf separaten Ebenen haben, die Sie als individuelle Bilder exportieren möchten:
- Wählen Sie im Ebenen-Bedienfeld die Ebene(n) aus, aus denen Sie Slices erstellen möchten.
- Stellen Sie sicher, dass das Slice-Werkzeug aktiv ist.
- Klicken Sie in der Optionsleiste auf die Schaltfläche "Slices aus Ebenen erstellen".
- Photoshop erstellt für jede ausgewählte Ebene einen Slice, der genau die Grenzen des Inhalts dieser Ebene umschließt (basierend auf den Pixeln auf der Ebene).
Slices bearbeiten und verwalten
Um Slices zu bearbeiten, benötigen Sie das Slice-Auswahl-Werkzeug (Slice Select Tool). Dieses finden Sie ebenfalls unter dem Freistellungswerkzeug oder dem Slice-Werkzeug im Flyout-Menü.
- Auswählen: Klicken Sie mit dem Slice-Auswahl-Werkzeug auf einen Slice, um ihn auszuwählen. Halten Sie die Umschalttaste gedrückt, um mehrere Slices auszuwählen.
- Verschieben und Größe ändern: Ziehen Sie ausgewählte Slices, um sie zu verschieben, oder ziehen Sie an den Griffen an den Kanten oder Ecken, um die Größe zu ändern.
- Löschen: Wählen Sie einen oder mehrere Slices aus und drücken Sie die Entf-Taste. Nur Benutzer-Slices können gelöscht werden; automatische Slices werden neu generiert, um die Lücken zu füllen.
- Automatische Slices in Benutzer-Slices umwandeln: Wählen Sie einen automatischen Slice mit dem Slice-Auswahl-Werkzeug aus und klicken Sie in der Optionsleiste auf "Slice hochstufen" (Promote Slice). Er wird nun zu einem Benutzer-Slice, den Sie bearbeiten können.
- Slice-Optionen: Doppelklicken Sie mit dem Slice-Auswahl-Werkzeug auf einen Slice, um das Dialogfeld "Slice-Optionen" zu öffnen. Hier können Sie dem Slice einen Namen geben (wichtig für den Export!), einen URL-Link, einen Alt-Text und ein Ziel für den Link festlegen. Sie können auch den Slice-Typ (Bild oder Keine Bilddaten) und die Abmessungen ändern.
Slices exportieren: Der Schlüssel liegt in "Für Web speichern (Legacy)"
Der wichtigste Schritt bei der Arbeit mit Slices ist der korrekte Export. Dies geschieht traditionell über die Funktion "Für Web speichern (Legacy)". Obwohl Photoshop modernere Export-Optionen wie den Export-Arbeitsbereich oder Asset Export bietet, ist "Für Web speichern (Legacy)" nach wie vor die Funktion, die speziell für das Exportieren von Slices konzipiert ist und die Option bietet, auch HTML-Code zu generieren.
- Gehen Sie zu Datei > Exportieren > Für Web speichern (Legacy)... (File > Export > Save for Web (Legacy)...).
- Das Dialogfeld "Für Web speichern (Legacy)" wird geöffnet. Dies ist ein leistungsstarkes Werkzeug mit vielen Optionen.
- Im linken Bereich sehen Sie eine Vorschau Ihres Bildes mit den Slices. Mit den Hand- und Zoom-Werkzeugen können Sie navigieren und Details betrachten.
- Im rechten oberen Bereich wählen Sie die Export-Einstellungen. Sie können zwischen den Registerkarten "Optimiert", "2-Up" (zwei Ansichten: Original und Optimiert) und "4-Up" (vier Ansichten mit verschiedenen Optimierungen) wechseln, um die Einstellungen zu vergleichen.
- Wählen Sie ein Dateiformat für den Export: GIF, JPG, PNG-8 oder PNG-24. Die Wahl hängt vom Inhalt des Slices ab (siehe Vergleichstabelle unten).
- Passen Sie die Qualitätseinstellungen an (bei JPG) oder die Anzahl der Farben (bei GIF und PNG-8). Achten Sie auf die Dateigröße, die unter der Vorschau angezeigt wird.
- Sie können die Einstellungen für jeden Slice individuell festlegen. Wählen Sie dazu den gewünschten Slice in der Vorschau mit dem Slice-Auswahl-Werkzeug (im Dialogfeld verfügbar) aus und ändern Sie die Einstellungen im rechten Bereich. Ausgewählte Slices haben einen dünnen Rahmen.
- Im rechten unteren Bereich ("Exportieren") finden Sie die Export-Optionen:
- Einstellungen: Wählen Sie "Eigene" oder vordefinierte Presets.
- Format: Wählen Sie "HTML und Bilder" oder "Nur Bilder". Für Web-Layouts ist "HTML und Bilder" oft nützlich, da es den Code zum Zusammenfügen der Slices generiert.
- Slices: Wählen Sie "Alle Slices", "Nur ausgewählte Slices" oder "Alle Benutzer-Slices".
- Klicken Sie auf die Schaltfläche "Speichern...".
- Wählen Sie einen Speicherort und benennen Sie die Datei (falls Sie HTML exportieren, wird eine .html-Datei und ein Ordner mit den Bildern erstellt). Stellen Sie sicher, dass das Format auf "HTML und Bilder" oder "Nur Bilder" eingestellt ist, je nachdem, was Sie in den Export-Optionen gewählt haben.
- Klicken Sie erneut auf "Speichern".
Vergleich der Exportformate für Slices
Die Wahl des richtigen Dateiformats für jeden Slice ist entscheidend für die Optimierung.
| Format | Am besten geeignet für | Vorteile | Nachteile |
|---|---|---|---|
| JPG | Fotos, komplexe Bilder mit vielen Farben und Farbverläufen | Kleine Dateigröße für Fotos, unterstützt 16 Millionen Farben, progressive Anzeige möglich | Verlustbehaftete Komprimierung (Qualität nimmt ab mit höherer Komprimierung), unterstützt keine Transparenz |
| PNG-24 | Bilder mit Transparenz (z.B. Logos, die über andere Inhalte gelegt werden), Bilder mit feinen Details und Farbverläufen | Unterstützt volle Alpha-Kanal-Transparenz (Teiltransparenz), hohe Qualität, verlustfreie Komprimierung | Größere Dateigröße als JPG für Fotos, nicht von allen älteren Browsern vollständig unterstützt |
| PNG-8 | Einfache Grafiken, Logos mit wenigen Farben, Bilder mit harten Kanten, Grafiken mit einfacher Transparenz (Index-Transparenz) | Kleinere Dateigröße als PNG-24, unterstützt Index-Transparenz (entweder voll transparent oder voll opak), verlustfreie Komprimierung | Begrenzte Farbpalette (maximal 256 Farben) |
| GIF | Animationen, Logos mit wenigen Farben, einfache Grafiken mit wenigen Farben und harten Kanten | Unterstützt Animationen, sehr kleine Dateigröße für Bilder mit wenigen Farben, unterstützt Index-Transparenz | Begrenzte Farbpalette (maximal 256 Farben), Qualität leidet bei komplexen Bildern |
Anwendungsbeispiele für Slices
- Webseiten-Layouts: Zerlegen Sie ein komplettes Webdesign in Header, Navigation, Banner, Inhaltsbereiche, Footer etc., um die einzelnen Bildelemente für die HTML/CSS-Implementierung zu erhalten.
- Interaktive Bilder: Erstellen Sie eine Image Map, bei der verschiedene Bereiche eines Bildes zu unterschiedlichen URLs verlinken.
- E-Mail-Vorlagen: E-Mail-Clients haben oft Einschränkungen bei der Anzeige von komplexem HTML/CSS. Das Zerlegen eines Layouts in eine Tabelle aus geslicten Bildern ist hier oft eine zuverlässige Methode.
- Bild-Galerien oder Slider: Exportieren Sie einzelne Bilder aus einem größeren Kompositionsbild.
Tipps für effizientes Arbeiten mit Slices
- Verwenden Sie Hilfslinien: Planen Sie Ihr Layout mit Hilfslinien, bevor Sie Slices erstellen. Das Erstellen von Slices aus Hilfslinien ist oft schneller und präziser als das manuelle Zeichnen.
- Benennen Sie Ihre Slices: Geben Sie wichtigen Slices aussagekräftige Namen im Dialogfeld "Slice-Optionen". Dies hilft Ihnen, die exportierten Dateien später leichter zuzuordnen (der Slice-Name wird Teil des Dateinamens).
- Überprüfen Sie die Vorschau: Nutzen Sie die 2-Up- oder 4-Up-Ansichten im "Für Web speichern (Legacy)"-Dialogfeld, um die Auswirkungen verschiedener Optimierungseinstellungen auf Qualität und Dateigröße zu vergleichen.
- Achten Sie auf automatische Slices: Stellen Sie sicher, dass die automatischen Slices, die Photoshop generiert, keine unerwünschten Bereiche enthalten, die Sie nicht exportieren möchten, oder dass sie korrekt optimiert werden.
- Speichern Sie Ihre Slice-Konfiguration: Wenn Sie das Photoshop-Dokument speichern (als .psd), werden die Slices mit gespeichert. So können Sie Ihre Arbeit später fortsetzen oder Änderungen vornehmen.
Häufig gestellte Fragen (FAQ)
F: Kann ich nicht-rechteckige Bereiche slicen?
A: Nein, Slices in Photoshop sind immer rechtecke. Wenn Sie unregelmäßige Formen für Links benötigen, müssen Sie eine Image Map in HTML erstellen und die Formkoordinaten manuell definieren oder ein Werkzeug verwenden, das dies unterstützt.
F: Ist die Funktion "Für Web speichern (Legacy)" veraltet?
A: Ja, sie wird als "Legacy" bezeichnet, weil Photoshop neuere Exportfunktionen hat. Für den Export von Slices mit optionaler HTML-Generierung ist sie jedoch nach wie vor die Standardmethode in Photoshop.
F: Warum sollte ich Slices verwenden, anstatt einfach Teile meines Bildes zuzuschneiden und zu speichern?
A: Slices automatisieren den Prozess. Sie können ein komplexes Layout in einem Schritt zerlegen und exportieren, inklusive der Generierung von HTML/CSS, was viel schneller ist, als jeden Bereich einzeln zuzuschneiden und zu speichern. Außerdem können Sie Slice-spezifische Optionen wie URLs und Optimierungen festlegen.
F: Kann ich Slices mit URLs verknüpfen?
A: Ja, doppelklicken Sie mit dem Slice-Auswahl-Werkzeug auf einen Slice, um die Slice-Optionen zu öffnen, und geben Sie dort die gewünschte URL ein.
F: Was ist der Unterschied zwischen Benutzer-Slices und automatischen Slices beim Export?
A: Standardmäßig werden alle Slices (Benutzer und Automatische) exportiert, um das gesamte Bild abzudecken. Sie können aber auch wählen, nur Benutzer-Slices oder nur ausgewählte Slices zu exportieren. Die Optimierungseinstellungen können für jeden einzelnen Slice angepasst werden, unabhängig davon, ob er automatisch oder manuell erstellt wurde (obwohl Sie automatische Slices erst zu Benutzer-Slices hochstufen müssen, um spezifische Optionen wie URLs hinzuzufügen).
Zusammenfassung
Das Slice-Werkzeug in Photoshop ist ein mächtiges Werkzeug zur Aufteilung und Optimierung von Bildern für das Web und andere digitale Anwendungen. Obwohl die Exportmethode "Für Web speichern (Legacy)" vielleicht nicht die neueste ist, bleibt sie der Standardweg, um Slices effektiv zu nutzen. Durch das Verständnis, wie man Slices erstellt, bearbeitet und vor allem korrekt exportiert, können Sie Ihre Arbeitsabläufe optimieren und qualitativ hochwertige, performante Grafiken für Ihre Online-Projekte erstellen. Nehmen Sie sich die Zeit, die verschiedenen Optionen im "Für Web speichern"-Dialogfeld zu erkunden, um das volle Potenzial dieser Technik auszuschöpfen.
Hat dich der Artikel Slices in Photoshop erstellen & exportieren interessiert? Schau auch in die Kategorie Photoshop rein – dort findest du mehr ähnliche Inhalte!