11.7 Webausgabe direkt aus Photoshop 

Man kann direkt aus Photoshop fix und fertige HTML-Seiten inklusive aller benötigten Grafiken ausgeben lassen. Der Weg führt über den Befehl Für Web und Geräte speichern. Es wird statt nur eines einzigen Bildes eine HTML-Seite mit allem benötigten Code erzeugt, und alle passenden Bilder dazu werden in einen verknüpften Ordner ausgegeben.
Abbildung 11.25 Das Slice-Werkzeug ist bei Photoshop CS4 nun mit dem Freistellungswerkzeug gruppiert und teilt sich mit diesem den Shortcut .
Slicing | Eine wesentliche Rolle spielt dabei das sogenannte »Slicing«, das die Bilddatei in einzelne Segmente »zerschneidet«, die dann in das Gerüst vom HTML-Code eingefügt und damit im Browser darstellbar und im Web funktional gemacht werden.
Tabelle oder CSS | Der ausgegebene HTML-Code kann entweder in Form einer Tabelle oder in Form von <div>-Blocks mit dazugehörigem CSS-Code ausgegeben werden. Der favorisierte Weg führt über dieses Box-Modell von CSS (Cascading Style Sheets). Hierbei wird mit Rahmen pixelgenau layoutet. Dies ist konform zu aktuellen Standards im Web, produziert weniger Code und damit kleinere Dateien. Inhalt und Gestaltung sind sauber getrennt. Außerdem ist die Arbeit mit CSS verlässlicher und genauer in der Gestaltung.
11.7.1 Slicing 

TIPP |
Die Unterteilung des Screendesigns sollte in sinnvollen -Abschnitten erfolgen, die der Struktur des Designs (Menüs, Textboxen, Buttons) folgen und vor allem sehr sorgfältig gemacht werden. Ungenauigkeiten produzieren besonders bei der HTML-Ausgabe in Tabellenform kleine, oft nur 1 Pixel hohe bzw. breite Zellen, die manchmal massenhaft auftauchen und viel überflüssigen Code benötigen und zu sehr unübersichtlichen Verhältnissen im HTML-Code führen. Erfahrungsgemäß gehen die Feinarbeiten beim Slicing bei 200 % Vergrößerung am besten von der Hand. |
Das Slice-Werkzeug rastet an Hilfslinien und Ebenenkanten ein und zerschneidet das Bild. Die einzelnen Segmente werden nummeriert und können nach einem Doppelklick darauf mit dem Slice-Auswahlwerkzeug ( ) benannt sowie mit einer URL und anderen Angaben für den späteren HTML-Code versehen werden. Besonders die sinnvolle Benennung erhöht stark die Übersicht und erspart später lange Suchereien im Code. Zudem sind selbst vergebene Namen in der Regel wesentlich kürzer als die von Photoshop automatisch vergebenen, was den Code verkürzt und die Dateigröße verringert.
Zur besseren Übersicht vor allem bei kleinteiligen Designs empfiehlt es sich, in der Optionenleiste des Slice-Werkzeugs den Button Auto-Slices ausblenden zu aktivieren.
Abbildung 11.26 Screendesign mit Slice-Segmenten
Dann werden die von Photoshop selbst errechneten Slices (grau markiert) zwischen den manuell aufgezogenen (blau markiert) nicht mehr angezeigt.
Abbildung 11.27 Optionen für ein Slice-Segment
Abbildung 11.28 Slice mit HTML- statt Bildausgabe
»Für Web und Geräte speichern« wählen | Ist man mit dem Slicing fertig, wählt man wie bei einem Einzelbild Datei • Für Web und Geräte speichern. An dieser Stelle kann man nun mit dem hier ebenfalls verfügbaren Slice-Auswahlwerkzeug einzelne oder mehrere Segmente markieren und im rechten Dialogteil wie gewohnt deren Kompressionseinstellungen und den Dateityp (GIF, JPEG oder PNG) auswählen.
Slice-Optionen | Auch der Dialog Slice-Optionen steht hier noch per Doppelklick auf ein Slice zur Verfügung. Man kann übrigens auch einzelne Slices von der Ausgabe als Bild ausnehmen und sie als Textabschnitt im HTML-Ergebnis ausgeben lassen, wenn man im Screendesign z. B. Platzhaltertext stehen hat, der später durch HTML-Text ersetzt werden soll, der sich bereits hier einfügen lässt.
Abbildung 11.29 Datei mit Slices im Dialog Für Web und Geräte speichern
Abbildung 11.30 Einstellungsmöglichkeiten im unteren Teil des Dateidialogs von Für Web und Geräte speichern
Klickt man auf Speichern, kann man die Ausgabe im Dateidialog noch weitgehend modifizieren. Als Format muss in unserem Fall HTML und Bilder gewählt werden.
Slices unterteilen | Für regelmäßige Layouts wie z. B. Bildergalerien oder Katalogseiten kann man das Slicing vereinfachen, indem man Slices unterteilt. Dazu finden Sie bei aktiviertem Slice-Auswahlwerkzeug ( ) den Button Unterteilen in der Optionenleiste. Dort kann man wahlweise mit der Anzahl der Unterteilungen oder mit einem festen Abstand in Pixeln arbeiten.
Abbildung 11.31 Unterteilen von Slices
Einstellungen unter »HTML« | Im Abschnitt HTML des Dialogs Ausgabeeinstellungen bei Für Web und Geräte Speichern (Abbindung 11.32, links) lässt sich der Code formatieren und sein Standard zwischen HTML und dem moderneren und verlässlicheren XHTML umschalten.
Einstellungen unter »Slices« | Unter Slices kann man unter Slice-Ausgabe (Abbildung 11.32, rechts) entscheiden, ob das in althergebrachter Tabellenform oder modern und standardgerecht in Form von CSS-Boxen geschehen soll. Darunter kann die Benennung der von Photoshop selbst vergebenen Namen für die Slices geändert werden.
Abbildung 11.32 Die Abteilungen HTML (links) und Slices (rechts) bei den Ausgabeeinstellungen
Einstellungen unter »Dateien speichern« | In der Abteilung Dateien speichern wird unter Dateibenennung festgelegt, wie die einzelnen Bilddateien heißen sollen, und unter Optimierte Dateien wählen Sie aus, wo sie abgelegt werden sollen. Auch die Kompatibilität der Benennung mit den verschiedenen Dateisystemen lässt sich hier regeln.
Abbildung 11.33 Die Abteilung Dateien speichern bei den Ausgabeeinstellungen
Abbildung 11.34 Ergebnisdateien nach dem Speichern
Das Ergebnis | Nach dem Speichern liegen anschließend eine HTML-Datei und ein Bilderordner an der angegebenen Stelle bereit, die man im Browser betrachten kann. Man beachte die von Photoshop vergebenen und die selbst bei den Slices eingetragenen Namen für die Bilder. Rufen wir nun im Browser eine Variante mit der Ausgabe in Tabellenform auf und machen die Struktur der Tabelle mit einem Hilfswerkzeug (Web Developer Tools für Firefox oder Developer Toolbar bei MSIE 7) sichtbar, so bietet sich die in Abbildung 11.35 Ansicht in.
11.7.2 CSS 

Gibt man das Ganze in Form von CSS-formatierten <div>-Boxen aus, schaut das so aus wie in Abbildung 11.36.
Abbildung 11.35 HTML-Ausgabe in Tabellenform
Abbildung 11.36 HTML-Ausgabe mit CSS
Abbildung 11.37 Slice-Namen als IDs für die <div>-Boxen bei der CSS-Ausgabe
Der eigentliche Seitencode umfasst bei der CSS-Variante 104 Zeilen, bei Tabellenausgabe 160 Zeilen. Die Boxen tragen die in Photoshop eingesetzten Namen als ID.
Da man ja bereits in Photoshop z. B. Menüpunkte und Buttons mit Links hinterlegen kann, funktionieren die so erstellten HTML-Seiten sofort und sind im Grunde auch so einsetzbar. Meist wird man diese allerdings weiter bearbeiten.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.