Mit Slices unterteilen Sie ein Bild in kleinere Bilder, die mithilfe einer HTML-Tabelle oder mithilfe von CSS-Ebenen auf einer Webseite wieder zusammengesetzt werden. Wenn Sie das Bild teilen, können Sie verschiedene URL-Links zum Erstellen der Seitennavigation zuweisen oder jeden einzelnen Bildteil mithilfe eigener Optimierungseinstellungen optimieren.

Mit dem Befehl „Für Web und Geräte speichern“ wird ein geslictes Bild exportiert und optimiert. Photoshop speichert jedes Slice in einer separaten Datei und generiert den zur Anzeige des unterteilten Bildes erforderlichen HTML- oder CSS-Code.

In Slices unterteilte Webseite in Photoshop
In Slices unterteilte Webseite.

Beachten Sie beim Arbeiten mit Slices stets Folgendes:

  • Sie können Slices mit dem Slice-Werkzeug oder durch Erstellen ebenenbasierter Slices erstellen.

  • Nach dem Erstellen von Slices lassen sich diese mit dem Slice-Auswahlwerkzeug  auswählen. Sie können die Slices dann verschieben, skalieren oder an anderen Slices ausrichten.

  • Im Dialogfeld „Slice-Optionen“ haben Sie die Möglichkeit, Optionen für die einzelnen Slices (z. B. Slice-Typ, Name und URL) festzulegen.

  • Im Dialogfeld „Für Web und Geräte speichern“ können Sie jedes einzelne Slice mithilfe verschiedener Optimierungseinstellungen optimieren.

Slice-Typen

Slices werden nach der Art ihres Inhalts (Tabellen-Slice, Bild-Slice, Kein-Bild-Slice) und nach der Art und Weise ihrer Erstellung (Benutzer-Slices, ebenenbasierte Slices, Auto-Slices) kategorisiert.

Mit dem Slice-Werkzeug erstellte Slices werden als Benutzer-Slices bezeichnet. Auf Basis einer Ebene erstellte Slices werden ebenenbasierte Slices genannt. Wenn Sie ein neues Benutzer-Slice oder ebenenbasiertes Slice erstellen, werden zusätzliche Auto-Slices erzeugt, um die übrigen Bildbereiche abzudecken, d. h., der nicht durch Benutzer-Slices oder ebenenbasierte Slices definierte Bildraum wird durch Auto-Slices gefüllt. Auto-Slices werden beim Hinzufügen oder Bearbeiten von Benutzer-Slices oder ebenenbasierten Slices stets neu generiert. Sie können Auto-Slices in Benutzer-Slices konvertieren.

Die verschiedenen Slice-Typen unterscheiden sich im Erscheinungsbild: Benutzer-Slices und ebenenbasierte Slices sind durch eine durchgehende Linie, Auto-Slices dagegen durch eine gepunktete Linie definiert. Benutzer- und ebenenbasierte Slices sind darüber hinaus durch besondere Symbole gekennzeichnet. Auto-Slices können beliebig ein- und ausgeblendet werden, was die Anzeige der Benutzer- und ebenenbasierten Slices erleichtert.

Ein Unter-Slice ist eine Art Auto-Slice, das beim Erstellen von überlappenden Slices erzeugt wird. Unter-Slices geben an, wie das Bild beim Speichern der optimierten Datei unterteilt wird. Obwohl Unter-Slices nummeriert und mit einem Slice-Symbol gekennzeichnet sind, können sie nicht getrennt von dem zugrunde liegenden Slice ausgewählt oder bearbeitet werden. Unter-Slices werden jedes Mal neu generiert, wenn Sie die Zeichenordnung der Slices ändern.

Slices werden auf unterschiedliche Weise erstellt:

  • Auto-Slices werden automatisch erzeugt.

  • Benutzer-Slices werden mit dem Slice-Werkzeug erstellt.

  • Ebenenbasierte Slices werden mit dem Ebenenbedienfeld erstellt.

Unterteilen einer Webseite in Slices

Mit dem Slice-Werkzeug können Sie Slice-Linien direkt in einem Bild zeichnen. Sie können Ihre Grafik auch mithilfe von Ebenen entwerfen und Slices auf Basis der Ebenen erstellen.

Erstellen eines Slice mit dem Slice-Werkzeug

  1. Wählen Sie das Slice-Werkzeug  aus. (Drücken Sie die Taste C, um zwischen den Werkzeugen zu wechseln, die mit dem Freistellungswerkzeug gruppiert sind.)

    Alle vorhandenen Slices werden automatisch im Dokumentfenster angezeigt.

  2. Wählen Sie in der Optionsleiste eine Art aus:

    Normal

    Legt die Slice-Proportionen fest, während Sie die Maus ziehen.

    Festes Seitenverhältnis

    Legt ein bestimmtes Seitenverhältnis fest. Geben Sie für das Seitenverhältnis ganze Zahlen oder Dezimalzahlen ein. Um z. B. ein Slice mit einem Höhen-/Breiten-Verhältnis von 1:2 zu erstellen, geben Sie für die Breite „2“ und für die Höhe „1“ ein.

    Feste Größe

    Legt die Höhe und Breite des Slice fest. Geben Sie Pixelwerte in ganzen Zahlen ein.

  3. Ziehen Sie über den Bereich, in dem Sie ein Slice erstellen möchten. Halten Sie beim Ziehen über den Bereich die Umschalttaste gedrückt, wenn das Slice quadratisch sein soll. Halten Sie beim Ziehen über den Bereich die Alt-Taste (Windows) bzw. die Wahltaste (Mac OS) gedrückt, um das Slice von der Mitte aus zu zeichnen. Wählen Sie „Ansicht“ > „Ausrichten an“, um ein neues Slice an einer Hilfslinie oder einem anderen Slice im Bild auszurichten. Siehe Verschieben, Skalieren und Ausrichten von Benutzer-Slices.

Erstellen von Slices anhand von Hilfslinien

  1. Fügen Sie dem Bild Hilfslinien hinzu.
  2. Wählen Sie das Slice-Werkzeug aus und klicken Sie in der Optionsleiste auf die Schaltfläche „Slices entlang der Hilfslinien“.

    Bei diesem Vorgang werden alle vorhandenen Slices gelöscht.

Erstellen eines Slice aus einer Ebene

Ein ebenenbasiertes Slice umfasst alle Pixeldaten in der Ebene. Wenn Sie die Ebene verschieben oder den Ebeneninhalt bearbeiten, wird der Slice-Bereich automatisch so angepasst, dass er die neuen Pixel einschließt.

Erstellen eines Slice in Photoshop aus einer Ebene
Ein ebenenbasiertes Slice wird bei Änderung der Quellebene aktualisiert.

Ebenenbasierte Slices sind weniger flexibel als Benutzer-Slices, Sie können jedoch ein ebenenbasiertes Slice in ein Benutzer-Slice umwandeln. Siehe Konvertieren von Auto-Slices und ebenenbasierten Slices in Benutzer-Slices.

  1. Wählen Sie im Ebenenbedienfeld eine Ebene aus.
  2. Wählen Sie „Ebene“ > „Neues ebenenbasiertes Slice“.

Hinweis:

Verwenden Sie kein ebenenbasiertes Slice, wenn Sie die Ebene während einer Animation über einen großen Bildbereich bewegen möchten, da das Slice u. U. zu groß wird.

Konvertieren von Auto-Slices und ebenenbasierten Slices in Benutzer-Slices

Ein ebenenbasiertes Slice ist mit dem Pixelinhalt einer Ebene verbunden. Daher kann es nur durch Bearbeiten der Ebene verschoben, kombiniert, unterteilt, skaliert und ausgerichtet werden, es sei denn, Sie konvertieren es in ein Benutzer-Slice.

Alle Auto-Slices in einem Bild sind miteinander verknüpft und besitzen die gleichen Optimierungseinstellungen. Wenn Sie andere Optimierungseinstellungen für ein Auto-Slice festlegen möchten, müssen Sie es in ein Benutzer-Slice umwandeln.

  1. Wählen Sie mit dem Slice-Auswahlwerkzeug  ein oder mehrere Slices aus, die Sie konvertieren möchten.
  2. Klicken Sie in der Optionsleiste auf „Umwandeln“.

    Hinweis:

    Sie können ein Auto-Slice im Dialogfeld „Für Web und Geräte speichern“ umwandeln, indem Sie dessen Verknüpfung aufheben. Siehe Arbeiten mit Slices im Dialogfeld „Für Web und Geräte speichern“

Anzeigen von Slices und Slice-Optionen

Sie können Slices in Photoshop und im Dialogfeld „Für Web und Geräte speichern“ anzeigen. Die folgenden Merkmale können beim Erkennen und Unterscheiden von Slices hilfreich sein:

Slice-Linien

Definieren die Slice-Rahmen. Durchgezogene Linien kennzeichnen Benutzer-Slices oder ebenenbasierte Slices, gepunktete Linien Auto-Slices.

Slice-Farben

Unterscheiden Benutzer-Slices und ebenenbasierte Slices von Auto-Slices. Standardmäßig besitzen Benutzer- und ebenenbasierte Slices blaue Symbole, Auto-Slices dagegen graue.

Außerdem werden im Dialogfeld „Für Web und Geräte speichern“ nicht ausgewählte Slices durch Farbkorrekturen abgedunkelt. Diese Korrekturen dienen nur Anzeigezwecken und wirken sich nicht auf die Farbe des endgültigen Bildes aus. Standardmäßig ist die Farbkorrektur bei Auto-Slices doppelt so umfangreich wie bei Benutzer-Slices.

Slice-Nummern

Slices werden, ausgehend von der linken oberen Ecke des Bildes, von links nach rechts und von oben nach unten durchnummeriert . Wenn Sie die Anordnung oder Gesamtzahl der Slices ändern, werden die Slice-Nummern entsprechend aktualisiert.

Slice-Kennzeichen

Die folgenden Kennzeichen oder Symbole zeigen bestimmte Bedingungen an.

Benutzer-Slice mit Inhaltsart „Bild“.

Benutzer-Slice mit Inhaltsart „Kein Bild“.

Slice ist ebenenbasiert.

Ein- und Ausblenden von Slice-Grenzen

  1. Wählen Sie „Ansicht“ > „Einblenden“ > „Slices“. Verwenden Sie den Befehl „Extras“, um Slices zusammen mit anderen Objekten ein- oder auszublenden. Siehe Ein- oder Ausblenden von Extras.

Ein- und Ausblenden von Auto-Slices

  1. Führen Sie einen der folgenden Schritte durch:
    • Wählen Sie das Slice-Auswahlwerkzeug  aus und klicken Sie in der Optionsleiste auf „Auto-Slices einblenden“ bzw. „Auto-Slices ausblenden“.

    • Wählen Sie „Ansicht“ > „Einblenden“ > „Slices“. Auto-Slices werden zusammen mit den übrigen Slices angezeigt.

Ein- und Ausblenden von Slice-Nummern

  1. Führen Sie einen der folgenden Schritte durch:
    • Wählen Sie unter Windows „Bearbeiten“ > „Voreinstellungen“ > „Hilfslinien, Raster und Slices“.

    • Wählen Sie unter Mac OS „Photoshop“ > „Voreinstellungen“ > „Hilfslinien, Raster und Slices“.

  2. Klicken Sie unter „Slices“ auf die Option „Slice-Nummern einblenden“.

Ändern der Farbe von Slice-Linien

  1. Wählen Sie unter Windows „Bearbeiten“ > „Voreinstellungen“ > „Hilfslinien, Raster und Slices“ und unter Mac OS „Photoshop“ > „Voreinstellungen“ > „Hilfslinien, Raster und Slices“.
  2. Wählen Sie im Bereich „Slices“ unter „Linienfarbe“ eine Farbe.

    Nach der Farbänderung werden ausgewählte Slice-Linien automatisch in einer kontrastierenden Farbe angezeigt.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie