Dieser Workshop beschreibt die Slice Funktion für den Export eines Designs ins HTML-Format. Der Workshop wurde in Photoshop und Dreamweaver erstellt, funktioniert aber auch in älteren Photoshop Versionen und anderen HTML-Editoren.
Was ist Slicen?
Beim Slicen wird das Bild in Photoshop einzelne Bestandteile zerschnitten. So kann man z.B. die Buttons einer Navigationsleiste in einzelne Bilder unterteilen und entsprechend verlinkt werden. Anschließend erfolgt der Export ins HTML-Format für die Weiterbearbeitung der Webseite in einem HTML-Editor.
Nachdem Sie die Bearbeitung des Designs nach Ihren Wünschen abgeschlossen haben, wählen Sie in Photoshop das Slice-Tools aus der Toolbar aus.
Mit dem Slice-Tool können Sie nun das Design in rechteckige Bereiche unterteilen, die sogenannten Slices. Jedes Slice wird beim Exportieren im HTML-Format ein extra Bild werden. Definieren Sie die Slices so, dass Buttons jeweils ein Slice sind und das Bereiche die Sie später im HTML-Editor mit Text füllen wollen entsprechend geslict sind.
Das Ergebnis sollte dann in etwa so ausschauen:
Gehen Sie nun im Menü “Datei” auf “Für Web speichern”. Im erscheinenden Dialog werden nun die Optimierungseinstellungen für die einzelnen Slices vorgenommen.
Sie können jedes Slice unabhängig voneinander als JPG/GIF oder PNG Grafik optimieren. Wählen Sie die Einstellungen für jedes Slice, welches die beste Bildqualität und Ladezeit bietet. Hauptsächlich einfarbige Regionen sollten als GIF oder PNG abgespeichert werden, Fotos als JPG.
Nach dem alle Einstellungen für Slices vorgenommen würden, gehen Sie auf den Button “Speichern”. Wählen Sie bei Dateityp die Option “HTML und Bilder”.
Nach dem Speichern liegen eine HTML-Datei und die einzelnen Slices als Bilder vor. Diese HTML kann nun mit einem HTML-Editor bearbeitet werden:
Im HTML-Editor können nun die Buttons verlinkt werden. Um im Hauptteil Text unterzubringen, wird das Bild aus der Tabellen-Zelle entfernt. Stattdessen können nun Inhalte eingefügt werden. Um im News-Teil Inhalte einzufügen wird das Bild entfernt, gleichzeitig aber als Hintergrundbild in der Tabellen-Zelle eingefügt.
Mehrere Seiten können angelegt werden, indem die HTML-Datei kopiert wird. Viele HTML-Editoren bieten zudem Möglichkeiten eine HTML-Datei als Template zu benutzen.
