Slices erstellen

von Fries Websolutions

Wenn wir mit den so genannten Slices arbeiten können, das ist wirklich etwas Praktisches, leider war es bis jetzt nur mit dem Programm Photoshop von Adobe möglich. Aber in der neusten Überarbeitung von Illustrator, können wir auch mit Slices arbeiten.

Es ist eigentlich kein großer Unterschied, beim arbeiten mit Slices, zum zerschneiden einer Grafik, vom Illustrator 10, zum Photoshop 6 und auch das Werkzeug sieht identisch aus, und es funktioniert auch so, aber wir können einem Teil, auch eine URL beifügen und Hilfslinien in Slices umwandeln, oder aber automatisch für einzelne Teile der Grafik ein Slice erstellen.

Wenn wir uns noch nicht mit diesem Thema beschäftigt haben, hier werden wir jeden Schritt erklären.

Wofür werden Slices gebraucht?
Slices sind eine Bereicherung für die Darstellung, von Grafiken im Internet, um das genauer zu beschreiben, stellen wir uns mal vor: wir wollen eine grafische Navigation erstellen, dazu müssen wir einige Bereiche mit Links versehen, um dann auch navigieren zu können, denn sonst würde eine zu große Grafik, wie die auf unserer Homepage zum Beispiel, sich wegen der zu hohen Ladezeit, dann negativ auswirken. Doch wenn wir jetzt die Grafik in mehrere Einzelteile teilen, dann wird die Geduld der Besucher auf unserer Seite etwas weniger strapaziert, denn man wird merken, "Hier tut sich was".

Wie werden Slices erstellt?

1. Die Bereiche selbst festlegen
2. Die Objekte in Slices umwandeln
3. Die Hilfslinien in Slices umwandeln

zu Punkt 1: Wir wählen das Slice-Werkzeug aus, dann ziehen wir einen Rahmen über einen Teil des Bildes und wir werden sehen, dass noch weitere Bereiche erstellt werden und die werden vom Programm selbstständig erstellt. Diesen selbst erstellten Bereich, können wir selber bearbeiten, aber die anderen Bereiche werden vom Programm angepasst.

zu 2) Wählen wir hier ein Objekt mit dem Auswahlwerkzeug aus, dann klicken wir auf: > Objekt > Slice > Erstellen, oder auf >, um eine Auswahl zu erstellen. Damit wird dem Slice die Grenzen des gewählten Objekts angepasst und wenn wir unser Objekt in der Größe verändern wollen, dann wird der erstellte Slice automatisch angepasst.

zu 3) Aber wir müssen darauf achten, dass wir die Liniale eingeblendet haben, damit wir die Hilfslinien auf unsere Arbeitsfläche ziehen können! Wir unterteilen mit Hilfe der Hilfslinien unsere Grafik, damit wir die in Slices umwandeln können, klicken wir einfach auf: >Objekte > Slices >, um Hilfslinien zu erstellen. Der große Vorteil ist, dass alle Slices die so erstellt werden, dann auch einzeln bearbeitet werden können!

Skalieren, kopieren und zerteilen von Slices
Wenn wir einen Slice bearbeiten wollen, müssen wir zuerst das Slice-Auswahlwerkzeug anklicken, um es dann auszuwählen, jetzt können wir, wie auch beim herkömmlichen Transformieren, die Begrenzungen des Slices verschieben und in der Größe verändern.

Wollen wir einen Slice vervielfältigen, dann aktivieren wir den gewünschten Slice und klicken dann, auf > Bearbeiten > Kopieren und anschließend auf >Bearbeiten > Einfügen, aber wir können ein Slice auch unter > Objekt > Slice >Slice Duplizieren wählen. Nun brauchen wir nur noch die Kopie mit dem Slice,mit dem Auswahlwerkzeug an die gewünschte Stelle ziehen und bei dem Duplikat werden auch die Slice-Optionen vom "Original"-Slice übernommen.

Wenn wir eine Grafik in gleichmäßige Teile zergliedern wollen, dann können wir auch: "Slice aufteilen" nehmen, dazu markieren wir die gesamte Grafik und erstellen zuerst einen Slice. Dann wählen wir unter > Objekt > Slice > Slice aufteilen aus und in dem sich öffnenden Fenster können wir noch die Anzahl der gewünschten Unterteilungen, von1 bis 5, oder den gewünschten Abstand in horizontaler und vertikaler Richtung festlegen. Die von uns erstellten Slices sind aber auch alle einzeln zu bearbeiten.

Wie kann ich einem Slice einen Link hinzufügen?
Wollen wir einem Slice einen Link zuweisen, dann gehen wir unter > Objekt > Slice > Slice-Optionen.

Oben können wir auswählen, wie dieser Bereich aussehen soll.

* "Bild" - dann wird dieser Bereich, als ein Bild dargestellt

* "Kein Bild" - dann können wir hier einen eigenen Bereich erstellen, wen wir eine Farbe bei: Hintergrund zuweisen und bei: "In Zelle angezeigter Text", unseren Text eingeben. Selbstverständlich können wir den Slice umbenennen,oder eine URL zuweisen, aber auch das Ziel angeben, wo die URL geöffnet werden soll.

Unter "Meldung" können wir eingeben, welcher Text angezeigt werden soll, wenn die Maus über diesen Bereich des Bildes gezogen wird und der Text, den wir unter: "Alt" eingegeben, wird dieser Bereich nicht angezeigt werden.

Speichern der Datei fürs Web
Klicken wir auf: > Datei > um für das Web speichern, aber wenn wir nur vereinzelte Slices speichern wollen, wählen wir die mit der Slice-Auswahl und gedrückter Umschalttaste aus. Wollen wir alle Slices auf einmal speichern, dann brauchen wir die nicht einzeln auszuwählen, denn wir wählen unsere Einstellungen, für die Web-Optimierung und dann klicken wir auf: "Speichern"und es öffnet sich ein Fenster.

1) Haben wir schon einen Ordner "images", dann speichern wir die Slices nicht sofort in diesen Ordner, sondern davor und wenn wir alle Slices zusammen, wir meinen: gebündelt in einem eigenen: "images"-Ordner haben wollen, dan müssen wir den bestehenden: "images" Ordner öffnen und die Datei da hinein speichern.

2) Hier könnnen wir nochmal entscheiden, wie wir das Gesamtbild nennen und unter: "Dateityp", wählen wir: "HTML und Bilder", dann aus.

3) Unter "Ausgabeeinstellungen" können wir noch die Feinauswahl treffen.

4) Hier wählen wir: "Alle Slices", dann aus, aber nur, wenn wir alle Slices speichern wollen.Wenn wir nur einzelne Slices speichern wollen, dann müssen wir hier die Einstellung auf: "Ausgewählte Slices" ändern!

Wie kann ich das zerteilte Bild in meine Seite einbauen?
Wenn wir die: .html Datei öffnen, dann sollten wir die gesamte Grafik, in Form einer Tabelle, vorfinden. Wir brauchen nur noch die Tabelle zu kopieren, um sie dann auf einer anderen Seite einbauen zu können, doch wenn unsere: "geslicte" Grafik, sich in einem eigenen Frame befinden soll, dann brauchen wir die: .html Datei nur als Quelle angeben.

Das Prinzip ist doch wirklich einfach und wir können auf einfachem Wege, auch aufwändige Navigationen erstellen.