Wissenswertes zu Slices

Webseiten können eine Vielzahl von Elementen wie beispielsweise HTML-Text, Bitmap- und Vektorgrafiken enthalten. In Illustrator können Sie mithilfe von Slices die Begrenzungen unterschiedlicher Webelemente im Bildmaterial definieren. Wenn das Bildmaterial z. B. eine Bitmap enthält, die im JPEG-Format optimiert werden muss, und für den Rest des Bildes die Optimierung als GIF-Datei wünschenswert wäre, können Sie das Bitmapbild mit einem Slice isolieren. Wenn Sie das Bildmaterial mit dem Befehl „Für Web und Geräte speichern“ als Webseite speichern, können Sie festlegen, dass jedes Slice als unabhängige Datei mit eigenem Format, eigenen Einstellungen und eigener Farbtabelle gespeichert wird.

Slices in einem Illustrator-Dokument entsprechen Tabellenzellen in der resultierenden Webseite. Standardmäßig wird der Slice-Bereich als Bilddatei exportiert, die von einer Tabellenzelle umgeben wird. Wenn Sie möchten, dass die Tabellenzelle HTML-Text und eine Hintergrundfarbe anstelle einer Bilddatei enthält, ändern Sie den Slice-Typ in „Kein Bild“. Wenn Sie Illustrator-Text in HTML-Text umwandeln möchten, ändern Sie den Slice-Typ in „HTML-Text“.

Geslictes Bildmaterial mit unterschiedlichen Slice-Typen
Geslictes Bildmaterial mit unterschiedlichen Slice-Typen

A. Slice-Typ „Kein Bild“ B. Slice-Typ „Bild“ C. Slice-Typ „HTML-Text“ 

Sie können Slices auf der Zeichenfläche und im Dialogfeld „Für Web und Geräte speichern“ anzeigen. Illustrator nummeriert Slices von links nach rechts und von oben nach unten und beginnt dabei in der linken oberen Ecke des Bildmaterials. Wenn Sie die Anordnung oder Gesamtzahl der Slices ändern, werden die Slice-Nummern entsprechend aktualisiert.

Wenn Sie ein Slice erstellen, wird das umgebende Bildmaterial von Illustrator in automatische Slices unterteilt, um das Layout mithilfe einer webbasierten Tabelle verwalten zu können. Es gibt zwei Arten von automatischen Slices: Auto-Slices und Unter-Slices. Auto-Slices beziehen sich auf die Bereiche des Bildmaterials, die Sie nicht als Slice definiert haben. Auto-Slices werden bei jedem Hinzufügen bzw. Bearbeiten von Slices neu generiert. Unter-Slices geben an, wie überlappende, benutzerdefinierte Slices aufgeteilt werden. Obwohl Unter-Slices nummeriert sind und mit einem Slice-Symbol angezeigt werden, können Sie sie nicht vom darunter liegenden Slice getrennt auswählen. Bei Bedarf werden Auto-Slices und Unter-Slices von Illustrator während der Bearbeitung neu generiert.

Erstellen von Slices

  1. Führen Sie einen der folgenden Schritte durch:
    • Wählen Sie mindestens ein Objekt auf der Zeichenfläche aus und wählen Sie „Objekt“ > „Slice“ > „Erstellen“.

    • Wählen Sie das Slice-Werkzeug  aus und ziehen Sie es über den Bereich, in dem Sie ein Slice erstellen möchten. Halten Sie beim Ziehen des Zeigers über den Bereich die Umschalttaste gedrückt, wenn das Slice quadratisch sein soll. Ziehen Sie bei gedrückter Alt- (Windows) bzw. Wahltaste (Mac OS), um das Slice von der Mitte aus zu zeichnen.

    • Wählen Sie mindestens ein Objekt auf der Zeichenfläche aus und wählen Sie „Objekt“ > „Slice“ > „Aus Auswahl erstellen“.

    • Setzen Sie Hilfslinien an die Stellen, an denen das Bildmaterial in Slices aufgeteilt werden soll, und wählen Sie „Objekt“ > „Slice“ > „Aus Hilfslinien erstellen“.

    • Wählen Sie ein vorhandenes Slice aus und wählen Sie „Objekt“ > „Slice“ > „Slice duplizieren“.

      Tipp: Verwenden Sie den Befehl „Objekt“ > „Slice“ > „Erstellen“, wenn die Slice-Abmessungen mit der Begrenzung eines Elements im Bildmaterial übereinstimmen sollen. Wenn das Element verschoben oder bearbeitet wird, passt sich die Größe des Slice automatisch an das neue Bildmaterial an. Mit diesem Befehl können Sie auch ein Slice erstellen, das Text- und grundlegende Formatierungseigenschaften eines Textobjekts erfasst.

      Tipp: Verwenden Sie das Slice-Werkzeug, den Befehl „Aus Auswahl erstellen“ oder den Befehl „Aus Hilfslinien erstellen“, wenn die Abmessungen des Slice von dem zugrunde liegenden Bildmaterial unabhängig sein sollen. Die so erstellten Slices werden im Ebenenbedienfeld angezeigt und können wie jedes andere Vektorobjekt verschoben, skaliert und gelöscht werden.

Auswählen von Slices

Wählen Sie mit dem Slice-Auswahl-Werkzeug  im Zeichenfenster oder im Dialogfeld „Für Web und Geräte speichern“ ein Slice aus.

  • Soll ein Slice ausgewählt werden, klicken Sie darauf.
  • Sollen mehrere aufeinander folgende Slices ausgewählt werden, halten Sie beim Klicken die Umschalttaste gedrückt. (Im Dialogfeld „Für Web und Geräte speichern“ können Sie auch bei gedrückter Umschalttaste ziehen.)
  • Soll ein Slice ausgewählt werden, das von einem anderen überlappt wird, klicken Sie auf den noch sichtbaren Bereich dieses Slice.

    Außerdem können Sie Slices im Zeichenfenster auswählen, indem Sie einen der folgenden Schritte ausführen:

  • Soll ein Slice ausgewählt werden, das mit dem Befehl „Objekt“ > „Slice“ > „Erstellen“ erstellt wurde, wählen Sie das entsprechende Bildmaterial auf der Zeichenfläche aus. Wenn das Slice mit einer Gruppe oder Ebene verbunden ist, wählen Sie im Ebenenbedienfeld das Zielsymbol neben der Gruppe bzw. Ebene aus.
  • Soll ein Slice ausgewählt werden, das mit dem Slice-Werkzeug, dem Befehl „Aus Auswahl erstellen“ oder dem Befehl „Aus Hilfslinien erstellen“ erstellt wurde, wählen Sie das Slice im Ebenenbedienfeld als Ziel aus.
  • Klicken Sie mit dem Auswahl-Werkzeug  auf den Slice-Pfad.
  • Soll ein Slice-Pfadsegment oder ein Slice-Ankerpunkt ausgewählt werden, klicken Sie mit dem Direktauswahl-Werkzeug auf das gewünschte Element.

    Hinweis: Auto-Slices können nicht ausgewählt werden. Diese Slices werden abgeblendet dargestellt.

Festlegen von Slice-Optionen

Es hängt von den für das Slice ausgewählten Optionen ab, wie der Inhalt des Slice in der resultierenden Webseite angezeigt wird und funktioniert.

  1. Führen Sie mit dem Slice-Auswahl-Werkzeug einen der folgenden Schritte aus:
    • Wählen Sie im Zeichenfenster ein Slice aus und wählen Sie „Objekt“ > „Slice“ > „Slice-Optionen“.

    • Doppelklicken Sie im Dialogfeld „Für Web und Geräte speichern“ mit dem Slice-Auswahl-Werkzeug auf ein Slice.

  2. Wählen Sie einen Slice-Typ und legen Sie die entsprechenden Optionen fest:

    Bild

    Wählen Sie diesen Typ, wenn Sie möchten, dass der Slice-Bereich in der resultierenden Webseite eine Bilddatei sein soll. Wenn Sie möchten, dass das Bild ein HTML-Link ist, geben Sie einen URL und einen Ziel-Frame ein. Sie können auch eine Meldung festlegen, die im Statusbereich des Browsers angezeigt wird, wenn Sie mit dem Mauszeiger auf das Bild zeigen. Außerdem können Sie einen alternativen Text festlegen, der angezeigt wird, wenn das Bild nicht sichtbar ist, sowie eine Hintergrundfarbe für die Tabellenzelle.

    Kein Bild

    Wählen Sie diesen Typ, wenn Sie möchten, dass der Slice-Bereich HTML-Text sowie eine Hintergrundfarbe in der resultierenden Webseite enthalten soll. Geben Sie den gewünschten Text im Textfeld „In Zelle angez. Text“ ein und formatieren Sie ihn mithilfe der üblichen HTML-Tags. Geben Sie nicht mehr Text ein, als im Slice-Bereich angezeigt werden kann. (Wenn Sie zu viel Text eingeben, fließt dieser in benachbarte Slices und das Layout der Webseite wird beeinträchtigt. Da der Text nicht auf der Zeichenfläche angezeigt wird, lässt sich dies aber erst feststellen, wenn Sie sich die Webseite in einem Webbrowser ansehen.) Legen Sie Optionen für die horizontale und vertikale Ausrichtung fest, um die Ausrichtung von Text in der Tabellenzelle zu ändern.

    HTML-Text

    Dieser Typ ist nur verfügbar, wenn Sie das Slice durch Auswählen eines Textobjekts und Wählen von „Objekt“ > „Slice“ > „Erstellen“ erstellt haben. Der Illustrator-Text wird in HTML-Text mit grundlegenden Formatattributen in der resultierenden Webseite konvertiert. Zur Bearbeitung des Textes müssen Sie den Text im Bildmaterial aktualisieren. Legen Sie Optionen für die horizontale und vertikale Ausrichtung fest, um die Ausrichtung von Text in der Tabellenzelle zu ändern. Sie können auch eine Hintergrundfarbe für die Tabellenzelle auswählen.

    Tipp: Wenn Sie Text für den Slice-Typ „HTML-Text“ im Dialogfeld „Slice-Optionen“ bearbeiten möchten, ändern Sie den Slice-Typ in „Kein Bild“. Dadurch wird die Verknüpfung mit dem Textobjekt auf der Zeichenfläche aufgehoben. Soll die Textformatierung ignoriert werden, geben Sie als erstes Wort im Textobjekt „<unformatiert>“ ein.

Sperren von Slices

Durch das Sperren von Slices können Sie versehentliche Änderungen (Skalieren, Verschieben usw.) verhindern.

  • Sollen alle Slices gesperrt werden, wählen Sie „Ansicht“ > „Slices sperren“.
  • Sollen einzelne Slices gesperrt werden, klicken Sie im Ebenenbedienfeld auf die Bearbeitungsspalte der Slices.

Anpassen von Slice-Begrenzungen

Die Lage und die Größe eines Slice, das mit dem Befehl „Objekt“ > „Slice“ > „Erstellen“ erstellt wurde, sind von dem Bildmaterial abhängig, das im Slice enthalten ist. Wenn Sie das Bildmaterial also verschieben oder dessen Größe ändern, werden die Begrenzungen des Slice automatisch angepasst.

Wenn Sie ein Slice mit dem Slice-Werkzeug, dem Befehl „Aus Auswahl erstellen“ oder dem Befehl „Aus Hilfslinien erstellen“ erstellt haben, können Sie die Slices manuell wie folgt anpassen:

  • Soll ein Slice verschoben werden, ziehen Sie es mithilfe des Slice-Auswahl-Werkzeugs  an die gewünschte Stelle. Halten Sie beim Ziehen die Umschalttaste gedrückt, um die Verschiebung auf die vertikale, horizontale oder diagonale (45 Grad) Richtung zu beschränken.
  • Soll die Größe eines Slice geändert werden, wählen Sie das gewünschte Slice mit dem Slice-Auswahlwerkzeug aus und ziehen Sie an einer Ecke oder Seite des Slice. Sie können auch das Auswahl-Werkzeug oder das Transformierenbedienfeld verwenden, um die Größe von Slices zu ändern.
  • Sollen Slices ausgerichtet oder verteilt werden, verwenden Sie das Ausrichtenbedienfeld. Durch das Ausrichten von Slices lassen sich nicht benötigte Auto-Slices entfernen und kleinere, effizientere HTML-Dateien erstellen.
  • Wenn Sie die Stapelreihenfolge von Slices ändern möchten, ziehen Sie das Slice im Ebenenbedienfeld an eine andere Stelle oder wählen Sie unter „Objekt“ > „Anordnen“ einen Befehl aus.
  • Soll ein Slice unterteilt werden, wählen Sie das Slice aus und wählen Sie „Objekt“ > „Slice“ > „Slices unterteilen“.

    Sie können Slices kombinieren, unabhängig davon, mit welcher Methode sie erstellt wurden. Wählen Sie die Slices aus und wählen Sie „Objekt“ > „Slice“ > „Slices kombinieren“. Abmessungen und Position des resultierenden Slice werden durch das Rechteck bestimmt, das durch Verbinden der Außenkanten der kombinierten Slices entsteht. Wenn die kombinierten Slices nicht nebeneinander liegen oder unterschiedliche Proportionen oder Ausrichtungen haben, kann das neue Slice andere Slices überlappen.

    Sollen alle Slices auf die Größe der Zeichenfläche skaliert werden, wählen Sie „Objekt“ > „Slice“ > „Ganze Zeichenfläche exportieren“. Slices, die größer als die Zeichenfläche sind, werden auf die Größe der Zeichenfläche zugeschnitten. Auto-Slices, die kleiner als die Zeichenfläche sind, werden entsprechend vergrößert. An dem Bildmaterial selbst werden keine Änderungen vorgenommen.

Entfernen von Slices

Sie können Slices entfernen, indem Sie sie löschen oder in dem jeweiligen Bildmaterial zurückwandeln.

  • Soll ein Slice gelöscht werden, wählen Sie es aus und klicken Sie auf die Schaltfläche „Löschen“. Wenn das Slice mit dem Befehl „Objekt“ > „Slice“ > „Erstellen“ erstellt wurde, wird gleichzeitig auch das entsprechende Bildmaterial gelöscht. Soll das zugehörige Bildmaterial nicht gelöscht werden, löschen Sie das Slice nicht, sondern wandeln Sie es zurück.
  • Sollen alle Slices gelöscht werden, wählen Sie „Objekt“ > „Slice“ > „Alle löschen“. Slices, die mit dem Befehl „Objekt“ > „Slice“ > „Erstellen“ erstellt wurden, werden nicht gelöscht, sondern zurückgewandelt.
  • Soll ein Slice zurückgewandelt werden, wählen Sie es aus und wählen Sie „Objekt“ > „Slice“ > „Zurückwandeln“.

Ein- oder Ausblenden von Slices

  • Sollen Slices im Zeichenfenster ausgeblendet werden, wählen Sie „Ansicht“ > „Slices ausblenden“.
  • Sollen Slices im Dialogfeld „Für Web und Geräte speichern“ ausgeblendet werden, klicken Sie auf die Schaltfläche „Slices einblenden/ausblenden“ .
  • Wenn Sie die Slice-Nummern ausblenden und die Farbe der Slice-Linien ändern möchten, wählen Sie „Bearbeiten“ > „Voreinstellungen“ > „Intelligente Hilfslinien und Slices“ (Windows) bzw. „Illustrator“ > „Voreinstellungen“ > „Intelligente Hilfslinien und Slices“ (Mac OS).

Erstellen von Imagemaps

Mit Imagemaps können Sie einen oder mehrere Bereiche eines Bildes, die so genannten Hotspots, mit einem URL verknüpfen. Wenn ein Besucher der Webseite auf einen Hotspot klickt, lädt der Webbrowser sofort die verknüpfte Datei.

Der Hauptunterschied bei der Verwendung von Imagemaps und Slices zum Erstellen von Links liegt darin, wie das Bildmaterial als Webseite exportiert wird. Bei Imagemaps bleibt das Bildmaterial als einzelne Bilddatei intakt, während es bei Slices in separate Dateien aufgeteilt wird. Ein weiterer Unterschied besteht darin, dass bei Imagemaps polygonale oder rechteckige Bildbereiche verknüpft werden können, bei Slices aber nur rechteckige Bereiche. Wenn Sie nur rechteckige Bereiche verknüpfen müssen, sind Slices möglicherweise besser geeignet als Imagemaps.

Hinweis:

Im Interesse einer ordnungsgemäßen Darstellung der Verknüpfungen sollten in Slices, die URL-Links enthalten, keine zusätzlichen Imagemap-Bereiche erstellt werden, da in einigen Browsern u. U. eine der beiden Verknüpfungen ignoriert wird.

  1. Wählen Sie das Objekt aus, das mit einem URL verknüpft werden soll.
  2. Wählen Sie im Attributebedienfeld im Menü „Imagemap“ eine Form für die Imagemap aus.
  3. Geben Sie im Textfeld „URL“ einen relativen oder vollständigen URL-Pfad ein oder wählen Sie aus der Liste der verfügbaren URLs einen URL aus. Wenn Sie die eingegebene URL-Adresse testen möchten, klicken Sie auf die Schaltfläche „Browser“.

    Hinweis:

    Wenn Sie die Anzahl der im Menü „URL“ angezeigten Einträge erhöhen möchten, wählen Sie im Menü des Attributebedienfelds die Option „Bedienfeldoptionen“. Geben Sie dann unter „Anzahl der URL-Einträge“ eine Zahl zwischen 1 und 30 ein.

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