Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Standardkonforme Photoshop-Slices

Standardkonforme Photoshop-Slices

Der Export von Photoshop-Slices ist vielen Webdesignern als Relikt tabellenbasierter Layouts bekannt. Maxx Hilberer zeigt, wie man diese Funktion elegant und standardkonform nutzen kann.

Wenn ein Layout für eine Webseite mit Photoshop erstellt und vom Kunden abgenommen wurde, beginnt ein Arbeitsschritt, der es mitunter in sich haben kann – was man meist aber erst später festellt: Der Export der einzelnen Bestandteile.

Dafür wird das gesamte Bild erstmal in sog. Slices aufgeteilt, wobei diese jeden einzelnen Bestandteil, bzw. Region der späteren Seite darstellen. Diese Slices können sowohl Bilder, als auch Text beinhalten.
Ein Text kann direkt in das Textfeld des Slice-Optionen-Fensters eingeben werden.

An dieser Stelle behelfen wir uns mit einem kleinen Trick, um die Standardkonformität zu 100 Prozent zu gewährleisten und fügen ein Paragraph-Tag ein und schließen es am Ende wieder, da Photoshop nur DIVs als Container-Form kennt.

Slice Options
Slice Options

Bei den Slice-Optionen eines Bild-Slices ist eigentlich nur die Benennung wichtig: Voreingestellt ist ein Namensmix aus Dateiname des Layouts und der fortlaufenden Slice Nummerierung, die Photoshop von oben links nach unten rechts verteilt.

Schritt 2 ist dann der eigentliche Export aus Photoshop nach HTML und CSS: »Datei – für Web speichern«

Nachdem das Dateiformat der Bilder ausgewählt wurde (JPEG, GIF oder PNG), kommt der spannendste Teil des gesamten Prozederes: »Speichern«, Dateityp: »HTML und Bilder«

Wichtigster Bestandteil des nun erscheinenden Kontextmenus ist der Punkt »Einstellungen«.
Hier legt man die wichtigsten Eigenschaften der zukünftigen (Web-)Struktur fest, beginnend mit »Andere« im Auswahlmenü, falls man noch keine Einstellungen (»Eigene«) gespeichert hat.

Insgesamt befinden sich vier Optionen im Dropdown unter den Einstellungen:

Vier Optionen bei den Einstellungen
Vier Optionen bei den Einstellungen
  • »Datei speichern«: Dateibenennung festlegen und den Bildern einen Ordner wie »img«, »images« oder »Bilder« zuweisen.
  • »HTML«: hier gibt es einige kleine aber feine Möglichkeiten den Output zu steuern, wie Code Einrückungen und die Wahl zwischen ISO 8859-1 und UTF-8, welches mittlerweile als Standard gelten dürfte.
  • »Hintergrund«: Pfad zu einem HG Bild
  • »Slices«: zwischen Tabellen und DIVs wählen. Hier fällt sicherlich die Wahl meist auch nicht so schwer… ;)

Beim Slices Unterpunkt »CSS generieren« kann man wählen, ob IDs, Klassen oder Inline-Styles generiert werden sollen. Auch das ist keine große Frage: Ein globales Layout beschränkt sich ja meist nur auf die wesentlichen Bestandteile einer Site, also IDs.

An dieser Stelle findet sich leider der einzige Punkt, der spätere Nacharbeit erfordert, weil hier lediglich numerische Namensgebung wie »#1« usw. möglich ist.

Fertig und los.

Die Styles landen jetzt erstmal im Kopf des HTML Dokuments. Man braucht sie hier nur ausschneiden und in eine separate CSS-Datei kopieren, verlinken und fertig ist ein validierendes Webdokument.

Kommentare

Boris
am 16.12.2009 - 08:40

Valide heißt nicht, dass das Ergebnis gut ist ... ein Tabellendesign kann auch valide sein.

Exportfunktionen nehmen einem niemals die Arbeit ab, ordentliches Markup und CSS zu schreiben. Das dient allerhöchstens zu Präsentationszwecken beim Kunden ... ;-)

Permanenter Link

Mario
am 16.12.2009 - 09:00

Also ich verzichte seit Jahren komplett auf das Slicing-Feature von PS. Es ist mir einfach zu unhandlich. Wenn man HTML und CSS sowieso manuell erstellt, dann ist der Vorteil von Slicing (gerade auch bei komplizierteren Layouts, bsp. Sprites) dahin.

Permanenter Link

hotzen
am 16.12.2009 - 09:35

Seh ich auch so. Lieber Anfangs gleich ein wenig mehr Zeit investieren und das ganze von Hand aufbauen, anstatt später auf immer mehr kleine Problemchen zu stoßen.

Permanenter Link

datenkind
am 16.12.2009 - 10:55

Hmm, hätte nicht gedacht, dass noch jemand ernsthaft diese „Funktion“ nutzt.

Für einen Anfänger mag es auf den ersten Blick nach Arbeitserleichterung aussehen, im nachhinein, wenn man etwas firmer mit dem Entwickeln von Websites ist, wird einen die Umstandskrämerei seitens Photoshop tierisch nerven.

Permanenter Link

falko
am 16.12.2009 - 11:12

Also ich finde die Slices Funktion ungemein praktisch und mag Sie nicht mehr missen. Allerdings nicht zur Erzeugung vom HTML bzw. CSS Code.

Mit den Slices kann man recht fix alle Grafiken neu erzeugen wenn sich im Design im Nachhinein noch Sachen wie z.B. Farben ändern.

Permanenter Link

Andi
am 16.12.2009 - 11:16

Ich bin Freund der grafikintensiven und komplizierten Layouts. Ich hab nie Slicing benutzt, bei meinen Layouts mit überlappenden Grafiken und Tricks hier und da stößt Photoshop schnell an seine Grenzen. Ich benutze Hilfslinien und Ebenengruppen und schneide alles von Hand aus.

So kann man auch je nach dem die Seite noch schlanker machen, wenn man für jeden Bereich einzeln entscheidet, welches Grafikformat das Beste ist.

Permanenter Link

Mirko
am 16.12.2009 - 13:38

Slices bieten für mich nur den Vorteil, keine Halbpixel an den Kanten ausversehen auszuwählen, wie es bei normalen Auswahlen ja vorkommen kann. Aber die Exportfunktion war mir seit jeher ein Graus. Kein Programm pfuscht mir in meinem Code rum. ^^ Zumal die Speicherung und Aufteilung in der Regel durch Einsatz in flexiblen Layouts und nicht zuletzt CSS-Sprites sowieso ganz anders als in der PS-Datei aussieht.

Permanenter Link

Die Kommentare sind geschlossen.