Benutzerhandbuch Abbrechen

Slicen von Webseiten

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

Mit dem Befehl Für Web speichern wird ein in Slices unterteiltes 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.

Beachte beim Arbeiten mit Slices stets Folgendes:

  • Du kannst 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. Du kannst die Slices dann verschieben, skalieren oder an anderen Slices ausrichten.

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

  • Im Dialogfeld Für Web speichern kannst du 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 du ein neues Benutzer-Slice oder ebenenbasiertes Slice erstellst, 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. Du kannst 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 du die Zeichenordnung der Slices änderst.

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 kannst du Slice-Linien direkt in einem Bild zeichnen. Du kannst deine Grafik auch mithilfe von Ebenen entwerfen und Slices auf Basis der Ebenen erstellen.

Erstellen eines Slice mit dem Slice-Werkzeug

  1. Wähle das Slice-Werkzeug  aus. (Drücke 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ähle in der Optionsleiste eine Art aus:

    Normal

    Legt die Slice-Proportionen fest, während du die Maus ziehst.

    Festes Seitenverhältnis

    Legt ein bestimmtes Seitenverhältnis fest. Gib 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, gib 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. Gib Pixelwerte in ganzen Zahlen ein.

  3. Ziehe über den Bereich, in dem du ein Slice erstellen möchtest. Halte beim Ziehen über den Bereich die Umschalttaste gedrückt, wenn das Slice quadratisch sein soll. Halte 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ähle „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üge dem Bild Hilfslinien hinzu.
  2. Wähle das Slice-Werkzeug aus und klicke 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 du die Ebene verschiebst oder den Ebeneninhalt bearbeitest, 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, Du kannst jedoch ein ebenenbasiertes Slice in ein Benutzer-Slice umwandeln. Siehe Konvertieren von Auto-Slices und ebenenbasierten Slices in Benutzer-Slices.

  1. Wähle im Ebenenbedienfeld eine Ebene aus.
  2. Wähle „Ebene“ > „Neues ebenenbasiertes Slice“.
Hinweis:

Verwende kein ebenenbasiertes Slice, wenn du die Ebene während einer Animation über einen großen Bildbereich bewegen möchtest, 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, du konvertierst es in ein Benutzer-Slice.

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

  1. Wähle mit dem Slice-Auswahlwerkzeug  ein oder mehrere Slices aus, die du konvertieren möchtest.
  2. Klicke in der Optionsleiste auf „Umwandeln“.

Anzeigen von Slices und Slice-Optionen

Du kannst Slices in Photoshop und im Dialogfeld Für Web 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 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 du die Anordnung oder Gesamtzahl der Slices änderst, 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ähle „Ansicht“ > „Einblenden“ > „Slices“. Verwende 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ühre einen der folgenden Schritte durch:
    • Wähle das Slice-Auswahlwerkzeug  aus und klicke in der Optionsleiste auf „Auto-Slices einblenden“ bzw. „Auto-Slices ausblenden“.

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

Ein- und Ausblenden von Slice-Nummern

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

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

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

Ändern der Farbe von Slice-Linien

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

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

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?