Anzeige
Tutorialbeschreibung

Layoutübergabe aus Photoshop

Layoutübergabe aus Photoshop

Ein in Photoshop erstelltes Screendesign muss fachgerecht für die Verwendung im Web aufbereitet werden. Hierzu zählt an erster Stelle das fachgerechte Zerlegen in kleinere Einzelbilder. Dieser Artikel stellt verschiedene Methoden vor, dies zu bewerkstelligen.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Slices

Anstatt flächendeckende großformatige Bilder in der Website einzubinden, verwendet man in der Regel nur wenige (Teil-)Elemente des Designs als Grafik und regelt das optische Erscheinungsbild soweit möglich per CSS. Eine Möglichkeit, die benötigten Teile zu extrahieren, bietet das Slice-Werkzeug in Photoshop. Mit diesem kann das Dokument in viele einzelne Bereiche unterteilt werden, die sich im Web-Export als Einzelbilder ausgegeben lassen. Dabei können für jedes Slice separate Einstellungen bezüglich Benennung, Dateiformat und dessen Eigenschaften wie Kompressionsrate oder Farbanzahl vorgenommen werden. Prinzipiell unterscheidet Photoshop zwischen Benutzer-Slices und Auto-Slices.

Benutzerslices (blau dargestellt) werden vom Anwender selber angelegt und lassen sich flexibel anpassen. Auto-Slices (grau) hingegen werden automatisch definiert. Zum Erstellen von Benutzer-Slices wird einfach mit dem Slice-Werkzeug ein Rahmen um das gewünschte Bildelement aufgezogen. Die Größe lässt sich über die Anfasser des Slice-Rahmens anpassen.

Größenanpassung von SlicesBilder



Eine nützliche Variante bieten ebenenbasierte Slices (Ebene>Neues ebenenbasiertes Slice). Photoshop zieht automatisch ein Slice um die Inhalte der aktiven Ebene. Der Clou daran: Ändert sich deren Inhalt, z.B. durch eine Vergrößerung eines Buttons, passt sich das Slice automatisch mit an. Die verschiedenen Slice-Typen besitzen alle unterschiedliche Icons bzw. Farben, wie an der nachstehenden Abbildung zu erkennen ist.

 
Um ein Slice zu konfigurieren, genügt ein Doppelklick mit dem Slice-Auswahlwerkzeug (gleiches Werkzeugfach wie das Slice-Werkzeug) darauf. Die wichtigste Option bei einer reinen Bildausgabe ist der Name (Dateiname). Nahezu alle anderen Optionen sind nur dann relevant, wenn ihr neben Bildern auch HTML aus Photoshop heraus schreiben wollt. Dies empfiehlt sich jedoch nur als rudimentäres Mock-Up und nicht als finale Website.

Übersicht der verschiedenen Slice-TypenBilder



Mock-Up: Ein Mock-Up ist, bezogen auf Webdesign, ein Vorführmodell, das dem Kunden einen ersten Eindruck vermitteln soll, wie sich die Website im Browser „anfühlt“. Einfache Interaktivität wie die Simulation des Linkverhaltens und Rollover-Effekte und die gewohnte Browserumgebung erleichtern die Beurteilung.

Zum Export der Slices wählt ihr den Befehl Datei>Für Web und Geräte speichern. Markiert im Dialog mit dem Slice-Auswahlwerkzeug ein oder mehrere Slices (Mehrfachauswahl mit Strg/Cmd) und legt die Ausgabe-Eigenschaften wie vom Einzelexport gewohnt fest. Über Speichern bestimmt ihr, wo die Bilder abgelegt werden. Dabei habt ihr die Möglichkeit, anzugeben, welche Slices exportiert werden sollen. Möglich sind nur Ausgewählte Slices bzw. Alle Benutzerslices, um unnötige Datenfluten durch Autoslices zu umgehen.

 
Neben der reinen Bildangabe könnt ihr Photoshop an dieser Stelle unter Format nun auch anweisen, HTML-Code mit auszugeben (wie bereits erwähnt, ist davon abzuraten, da unter anderem die Nichtbeachtung der Semantik gegen eine professionelle Verwertung des produzierten Codes spricht). Die fertig exportierten Einzelbilder verwendet ihr dann im Editor eurer Wahl für den Aufbau mittels HTML und CSS.

Ausgabemodul für SlicesBilder



Manuelle Ausgabe: Anstatt mit Slices zu arbeiten, exportieren viele Profis die grafischen Elemente manuell. Ebeneninhalte werden per Strg/Cmd+Klick auf die Ebenenminiatur geladen und in eine neue Datei kopiert, deren Größe Photoshop beim Anlegen automatisch auf den Inhalt der Zwischenablage berechnet. Abschließend wird das Bildelement im passenden Format über den Dialog Datei>Für Web und Geräte speichern exportiert.


 

Sitegrinder

Das Photoshop-Plugin Sitegrinder ermöglicht euch, eine Datei automatisiert in eine HTML-Seite zu konvertieren. Dabei arbeitet die Anwendung mit so genannten Hints, speziellen Nomenklaturen für Ebenen, die bei der Konvertierung beeinflussen, in welcher Form die jeweiligen Elemente innerhalb der HTML-Struktur ausgegeben werden. Beispielsweise sorgt der Suffix „-text“ für eine Ausgabe als Textinhalt oder „-gallery“ für eine Präsentationsfläche einer Bildergalerie. Der Einsatz von Ebenenkompositionen ermöglicht zudem das Erstellen mehrseitiger HTML-Dokumente. Über den umfangreichen Ausgabedialog lässt sich eine Vielzahl an Parametern wie Farbigkeit oder Link-Verhalten bestimmen. Zudem weist das Plugin auf mögliche Probleme und Fehler im Dokument hin.

Interface Sitegrinder. Hints in Ebenen- und Kompositionspalette definieren Inhaltstypen.Bilder



Der ausgegebene Quelltext ist valide und die mögliche Einflussnahme und Funktionalität gegenüber der Slice-Ausgabe mit HTML bei Weitem besser. Für einfache private Visitenkarten oder ausgefeilte Mock-Ups stellt Sitegrinder somit eine spannende, mit 129$ (Standard) bzw. 349$ (Professional) Anschaffungspreis allerdings nicht ganz günstige Option dar. Für professionelle Ansprüche führt jedoch kein Weg an nachträglicher manueller Anpassung der HTML- und CSS-Dateien vorbei.

Semantik: Eine der großen Schwachstellen einer automatisierten Ausgabe ist die fehlende Möglichkeit semantischer Auszeichnung. Im modernen Webdesign strukturiert man Inhalte nicht nach Optik, sondern nach deren Bedeutung. Eine Überschrift würde beispielsweise mit dem Tag <h1> stärker „betont“ als ein Fließtext. Diese Auszeichnungen spiegeln sich primär nicht im Aussehen für den Besucher wider, sondern strukturieren eine Seite im Hintergrund und ermöglichen somit unter anderem eine bessere Auswertung durch Suchmaschinen oder Screenreader.

 

(X)HTML/CSS Coding-Service

So genannte Coding-Services, Dienstleister im Internet, bieten euch die Möglichkeit, Photoshop-Dateien in standardkonformes HTML schreiben zu lassen. Im Gegensatz zu den bisher vorgestellten Möglichkeiten erfolgt die Umsetzung per Hand und nicht automatisiert. Der Vorteil: Auf diese Weise sind semantisch strukturierte Dokumente möglich. Inzwischen gibt es eine Menge verschiedener Anbieter, die alle nach dem gleichen Prinzip funktionieren: Der Kunde liefert ein nach bestimmten Vorgaben aufbereitetes Design, das innerhalb einer bestimmten Zeitspanne umgesetzt wird. Der Preis richtet sich danach, wie schnell die Umsetzung geschehen soll und beginnt bei etwa 90$. Weitere Extras wie z.B. das Einrichten eines Blog-Systems wie WordPress verursachen zusätzliche Kosten.
 

Coding-Service Anbieter

  • PSD2HTML
  • W3 Markup
  • Chop and Code
  • Design2Markup
  • fastSlicer
  • SliceMyDesign
  • We‘llcodeit
  • XHTML iT
  • XHTML Slicer
  • XHMLized

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Echsenauge
  • 24.08.2013 - 15:30

Ich hatte mich mit Slices noch nicht beschäftigt, daher fand ich dieses Tutorial sehr hilfreich und gut erklärt - vielen Dank dafür!!

Portrait von CastellWall
  • 14.11.2012 - 19:55

Kurz. Wenig Neues. Für Nubies hilfreich...

Portrait von CastellWall
  • 14.11.2012 - 19:54

Kurz. Wenig Neues. Für Nubies hilfreich...

Portrait von phyie
  • 18.07.2012 - 20:50

Sehr hilfreiches Tutorial, gerade für Anfänger. Vielen Dank!

Portrait von phyie
  • 18.07.2012 - 20:50

Sehr hilfreiches Tutorial, gerade für Anfänger. Vielen Dank!

Portrait von AimRabbit
  • 25.05.2012 - 16:56

gutes tut. einfach und verständlich

Portrait von peter86
  • 01.05.2012 - 11:07

Mir hat das Tutorial viel gebracht.
Danke!
Hab viel geschnippelt und zerlegt und, dank des Tutorials, ein (für mich) gutes Ergebnis erzielt.

Portrait von Vlado0505
  • 13.11.2011 - 14:48

... kurz, aber gut!!!

Portrait von jk77
  • 17.10.2011 - 12:27

Ein wenig kurz, dennoch gut.

Portrait von plusMan
  • 16.09.2011 - 16:50

Danke, ich bin begeistert, auch für mich als Anfänger gut zu verstehen und auch umzusetzen.

Portrait von Mondschatten77
  • 09.08.2011 - 12:56

Ich seh schon, ich muß noch viiiiel lernen ... danke! :-)

Portrait von Shanti
  • 25.04.2011 - 16:19

Salut,
man dankt, auch wenns kurz und knap ist, ist es dennoch gelungen.

mfg

Portrait von ideeklusiv
  • 31.03.2011 - 14:58

Zwar ein wenig kurz, aber verständlich erklärt.Danke

Portrait von Kadaverschreck
  • 28.03.2011 - 17:34

Zum Einstieg in den Style-Aufbau für mein PHPkit hat mir das Tutorial gut geholfen. Danke für das Tut.

Portrait von kallipyx
  • 22.03.2011 - 20:28

Hab mich gefreut, dass ich nun auch weiß, wie das mit PS geht, bisher hatte ich das immer im PI gemacht :-) Probier ich gleich mal aus, vielen Dank für die Mühe :-)

Portrait von Superking88
  • 15.03.2011 - 08:20

Gelungene Anleitung! Jetzt brauch ich nur noch ein paar css codes

Portrait von simalosa
  • 21.02.2011 - 09:39

Vielen Dank, interessantes Tut.

Portrait von Nazzradam
  • 18.02.2011 - 11:52

Das hab ich gesucht danke ;)

Portrait von nische
  • 22.01.2011 - 10:12

Super genau das was ich gesucht aber
Tolles Tut

Danke

Portrait von suslik87
  • 25.05.2010 - 11:22

Gute kurze Übersicht der einzelnen Verfahren ... gut für einen ersten Eindruck.

x
×
×