Übersicht über Slices

Wenn du Grafiken für das Web entwirfst, müssen sich verschiedene Teile eines Bilds oft unabhängig voneinander verhalten. Ein Bereich kann mit einer URL verknüpft sein, ein anderer schneller geladen werden, und ein weiterer kann andere Optimierungseinstellungen benötigen.Slices teilen ein einzelnes Bild in ein Raster kleinerer Teile auf, die zusammen als Web-Seite funktionieren, während du die Steuerung über jeden Abschnitt behältst.

Photoshop setzt geslicte Bilder auf Webseiten mithilfe von HTML-Tabellen oder CSS-Ebenen wieder zusammen.Wenn du ein geslictes Bild mit dem Befehl Datei > Exportieren > Für Web speichern exportierst, speichert Photoshop jeden Slice als separate Datei. Außerdem wird das HTML oder CSS generiert, das benötigt wird, um das Bild in einem Browser als einzelne Komposition anzuzeigen.

So funktionieren Slices

Slices teilen ein Bild entlang unsichtbarer Rasterlinien und erstellen rechteckige Abschnitte, die als unabhängige Dateien funktionieren. Jeder Slice behält seine Position im Gesamtlayout bei und fungiert gleichzeitig als separates Element mit eigenen Eigenschaften, Optimierungseinstellungen und Verhaltensweisen.

Dieser Ansatz bietet einige praktische Vorteile:

• Weise verschiedene URL-Links zu, um klickbare Navigationselemente zu erstellen
• Wende unterschiedliche Komprimierungs-Einstellungen an, um Qualität und Dateigröße in verschiedenen Bereichen auszubalancieren
• Einzelne Abschnitte aktualisieren, ohne die gesamte Komposition erneut zu exportieren

Slice-Typ nach Erstellung

Photoshop kategorisiert Slices danach, wie sie erstellt werden, und jeder Typ verhält sich anders, wenn du dein Bild bearbeitest.

• Benutzer-Slices: Abschnitte, die du manuell mit dem Slice-Werkzeug erstellst. Du hast die volle Kontrolle über ihre Größe, Position und Eigenschaften, und sie bleiben an ihrem Platz, bis du sie verschiebst oder änderst.
• Ebenenbasierte Slices: Slices umfassen alle Pixel in einer Ebene.Ihre Begrenzungen werden automatisch aktualisiert, wenn du die Ebene verschiebst oder bearbeitest. Sie eignen sich gut für Inhalte, die sich häufig ändern, bieten aber weniger Kontrolle über die genaue Positionierung als Benutzer-Slices.
• Automatische Slices: Slices, die den verbleibenden Platz in einem Bild ausfüllen, der nicht von Benutzer-Slices oder ebenenbasierten Slices abgedeckt wird. Photoshop generiert diese automatisch und generiert sie jedes Mal neu, wenn du andere Slices hinzufügst, entfernst oder änderst. Alle automatischen Slices in einem Bild verwenden dieselben Verbesserungseinstellungen.
• Unter-Slices: Ein spezieller Typ automatischer Slices, der angezeigt wird, wenn sich Slices überlappen. Unter-Slices zeigen an, wie Photoshop die überlappenden Bereiche aufteilt, wenn du die optimierte Datei speicherst.Du kannst Unter-Slices nicht unabhängig von den zugrunde liegenden Slices auswählen oder bearbeiten.

Slice-Typ nach Inhalt

Slices werden auch nach dem Inhaltstyp klassifiziert, den sie enthalten.

• Bildslices: Der standardmäßige Slice-Typ für visuelle Inhalte, der Bilddaten aus deinem Photoshop-Dokument enthält.
• Slices ohne Bild: Leere Tabellenzellen für HTML-Text oder Farbflächen.Photoshop exportiert diese nicht als Grafikdateien. Deshalb sind sie nützlich für Live-Text, den du auswählen kannst.
• Tabellen-Slices: Slices, die festlegen, wie Photoshop die HTML-Tabelle strukturiert, die zum Zusammensetzen eines in Slices aufgeteilten Bilds in einem Browser verwendet wird.

Visuelle Slice-Hinweise

Photoshop verwendet visuelle Hinweise, damit du die Slice-Typen bei der Arbeit leichter unterscheiden kannst.

• Slice-Linien: Durchgezogene Linien kennzeichnen Anwender-Slices oder ebenenbasierte Slices, gepunktete Linien kennzeichnen automatische Slices.
• Slice-Farben: Blaue Symbole kennzeichnen Anwender-Slices und ebenenbasierte Slices, graue Symbole kennzeichnen automatische Slices.
• Slice-Nummern: Die Nummern in der oberen linken Ecke jedes Slices verlaufen von links nach rechts und von oben nach unten und werden automatisch aktualisiert, wenn du Slices neu anordnest oder änderst.
• Slice-Badges: Kleine Symbole kennzeichnen den Slice-Inhalt und den Slice-Typ. Zum Beispiel kennzeichnet ein Bildsymbol einen Anwender-Slice mit Bildinhalt, ein durchgestrichenes Bildsymbol kennzeichnet einen Anwender-Slice ohne Bildinhalt, und ein Ebenensymbol kennzeichnet einen ebenenbasierten Slice.

Wenn du diese visuellen Unterschiede erkennst, kannst du Slice-Typen schnell identifizieren und bei komplexen Slice-Layouts effizienter arbeiten, wenn du Webseiten in Slices aufteilst.