Slices und Imagemaps

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“.

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

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.

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.