Slices: Bilder fürs Web mit Photoshop aufbereiten

Photoshop bietet mit dem Dialog Für “Web und Geräte speichern …” zahlreiche Exportmöglichkeiten von Grafiken und Fotos fürs Internet. In diesem abschließenden Beitrag der Artikelserie geht es um das Erstellen und Exportieren von Slices.

Moderne Webentwicklung konzentriert sich auf semantischen HTML-Code und sauberes CSS. So ideal ist es leider nicht immer gelaufen. In den frühen Jahren des Internet waren Webdesigner und -entwickler darauf angewiesen, Weblayouts mit Tabellen zu realisieren. Dies erforderte perfekt ausgerichtete Tabellenzellen, so dass die darin enthaltenen Bilder nahtlos zusammengefügt wurden.

Ein ziemlicher Fummelkram also. Um diesen Prozess zu beschleunigen, führte Adobe die Photoshop-Slices ein. Dieses einfache Tool half Webworkern dabei, exakt zu definieren, an welcher Stelle Grafiken und Fotos geschnitten werden und dann als einzelne Bildelemente in Webprojekte zu exportieren. Der passende  HTML-Code, mit dem die Tabellen erstellt und zusammengesetzt werden, wird von Photoshop gleich mitgeliefert.

Ideales Layout-Tool für HTML-E-Mails

Während die moderene Webentwicklung HTML-Tabellen-Layouts hinter sich gelassen hat, finden solche Tabellen noch immer Verwendung. Für HTML-Newsletter beispielsweise. Da HTML-E-Mails je nach Client mit stark variierender und zudem meist magerer CSS-Unterstützung zu kämpfen haben, sind HTML-Tabellen eine gutes Mittel, um ein möglichst verlässlichliches Layout zu erreichen. Slices sind daher nach wie vor relevant.

Slices mit Photoshop erstellen

Mit dem Slices Tool, das Sie über das Tastaturkürzel K aufrufen können, sind Slices schnell erstellt. Einfach klicken und ein Rechteck aufziehen. Die Flächen rund um Ihr Slice werden logisch in weitere Slices – so genannte Auto-Slices – unterteilt.

Auto-Slices funktionieren genau so wie Benutzer-Slices, allerdings gibt es eine Ausnahme: Die Größe können Sie nicht direkt verändern. Sie können Auto-Slices jedoch in Benutzer-Slices um wandeln. Dazu verwenden Sie das in der folgenden Abbildung dargestellte Slice-Auswahl-Werkzeug, aufzurufen über Shift + C.


Dieses Icon finden Sie im Flyout-Menü des Freistellen-Werkzeugs.

Nachdem Sie das Slice-Auswahl-Werkzeug aktiviert haben, klicken Sie das gewünschte Slice mit der rechten Maustaste an und wählen aus dem Kontextmenü den Befehl In Benutzer-Slice umwandeln.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Jedes Slice wird von einem Rahmen umschlossen. Jeder Slice ist entsprechend seiner Position im gesamten Bild mit einer fortlaufenden Nummer versehen, die oben links in diesem Rahmen angezeigt wird.

Eine E-Mail mit Slices; die Rahmen bilden die Tabellenzellen.

Nach dem Sie ein Slice erstellt haben, können Sie dessen Größe verändern, indem Sie den begrenzenden Rahmen aufziehen oder zuschieben. Sie können ein Slice auch verschieben, indem Sie den Inhalt an eine andere Stelle ziehen. Wenn ein Slice ein anderes überlappt, entscheidet die Stapelreihenfolge, wie das Bild aufgeteilt wird.

Stapelreihenfolge ändern

Die Reihenfolge von Benutzer-Slices können Sie ändern, indem Sie ein Slice mit dem Slice-Auswahl-Werkzeug aktivieren und anschließend über die Schaltflächen in der Optionsleiste nach vorne oder hinten verschieben. Slices, die im Stapel weiter oben liegen, haben Vorrang vor den weiter unten liegenden.

Über diese Buttons können Sie die Reihenfolge ändern.

HTML-Tabelle über Speichern für Web und Geräte exportieren

Ein Slice stellt wie gesagt eine Tabellenzelle dar und Photoshop kann das für die gesamte Tabelle erforderliche HTML erstellen und exportieren. Das erledigen Sie über den Dialog Speichern für Web und Geräte im Menü Datei.

Wenn Sie in diesen Dialog aufrufen, während ein Bild mit Slices geöffnet ist, ändert sich ein paar Dinge geringfügig. Es sind nach wie vor dieselben Dateiformate und Optionen verfügbar, aber Sie können für die einzelnen Slices jeweils eigene Einstellungen vornehmen.

Verwenden Sie das Slice-Auswahl-Werkzeug in der linken oberen Ecke des Dialogfensters, um eines oder mehrere Slices auszuwählen. Wählen Sie dann die Kompressionsverfahren für die ausgewählten Slices. Die Nichtausgewählten bleiben von diesen Einstellungen unberührt. Sie können auch ganz einfach alle Slices auswählen und eine globale Einstellung auf die gesamte Auswahl anwenden.

Tipp: Oftmals gelingt es, die Dateigröße zu reduzieren, indem Sie für die einzelnen Slices individuelle Einstellungen verwenden. Beim obigen Beispiel etwa, können Sie für den großen Bildbereich das Format JPEG mit einer hohen Kompressionsstufe wählen, während die unteren Slices mit Text das speicherplatzintensivere PNG-Format benötigen.

Verborgene Einstellungen

Jedes Slice hat zudem einige verborgene Einstellungen, die sich auf die Tags im HTML-Code auswirken. Mit einem Doppelklick öffnen Sie das Dialogfenster Slice-Optionen.

Der Dialog Slice-Optionen

Über den oben abgebildeten Dialog können Sie die umfangreiche Einstellungen vornehmen – am häufigsten werden Sie wohl diese benötigen:

  • Slice-Typ: Wenn das Slice kein Bild enthält, können Sie den Eintrag Kein Bild aus der Auswahlliste wählen. Das hat den Vorteil, dass Sie statt dessen Text oder anderen HTML-Code in die jeweilige Zelle eintragen können.
  • Name: Hier können Sie Eintragungen wie “Header”, “Footer”, “Inhalt” und ähnliches vornehmen.
  • URL: Sie können dem Slice auch einen Link zuweisen und die entsprechende URL einfach in dieses Feld eintragen.
  • Ziel: Sofern Sie einen Hyperlink gesetzt haben, können Sie in diesem Feld festlegen, ob der Link in einem neuen oder im selben Fenster geöffnet werden soll.
  • Meldungstext: Texteingaben, die Sie in diesem Feld vornehmen werden angezeigt, wenn die Anwender mit dem Mauszeiger über das jeweilige Bild fahren.
  • Alt-Tag: Der Eintrag aus diesem Feld wird ins Alt-Tag des HTML-Codes übernommen.

Bestätigen Sie Ihre Eingaben im Dialog Slice-Optionen jeweils mit OK. Wenn Sie sämtliche Slices optimiert haben, drücken Sie die Schaltfläche Speichern. Daraufhin öffnet sich der folgende Dialog.

Hier legen Sie die Export-Optionen fest.

Die Auswahlliste Format bietet Ihnen die Optionen Nur Bilder, Bilder und HTML beziehungsweise Nur HTML.

Über die Auswahlliste Einstellungen können Sie bestimmen, wie die Bilder exportiert werden und wie der HTML- beziehungsweise XHTL-Code aussehen soll. Über die Option Andere bekommen Sie einen weiteren Dialog mit zahlreichen Optionen für den Export angezeigt. Darin können Sie neben Vorgaben für den Quellcode und Dateikompatibilität unter anderem auch Roll-Over-Effekte für bestimmte Slices festlegen.

Die Option Andere öffnet den Dialog Ausgabeeinstellungen.

Mit einem Klick auf Speichern, werden die Slices als einzelne Bilder exportiert und – sofern Sie die Option wie im obigen Bildschirmfoto aktiviert haben – in einem eigenen Ordner namens “images” abgelegt. Der HTML-Code wird geschrieben und als separate Datei gespeichert. Soweit, so gut.

Oder auch nicht gut. Photoshop kann Ihnen zwar eine Menge Arbeit abnehmen und den HTML-Code automatisch erstellen. Optimal ist dieser Code sicherlich nicht und – so ist der XHTML-Export beispielsweise auf den “Transitional” beschränkt. XHTML Strict ist nicht vorgesehen. Sie sollten den Code daher zumindest prüfen und ein wenig bereinigen.

Thomas Giannatasio (Übersetzung Manuela Müller)

Hinterlasse einen Kommentar

1 Kommentar auf "Slices: Bilder fürs Web mit Photoshop aufbereiten"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
suphi deniz
Gast

wie kann ich aber die erstellte Datei an meinem Thunderbird Mail-Client anhängen?

wpDiscuz