"Photoshop to Web" Pentalogie

von Andreas Braun | 1 | 4258 Aufrufe

Anzeige Hier werben

Cut and Slice, Ink, CSS3P, flaticon, Guideguide

Der Schritt von einem Layout einer Webseite oder App in Photoshop hin zur tatsächlichen Implementierung stellt einen schwierigen und unliebsamen Teil der Entwicklung dar.

Meistens auch deshalb, da Designer nicht zwingend Webentwickler sind, und beim Entwurf nicht die Umsetzungsschwierigkeiten im Hinterkopf haben.

Der andere Fall ist aber auch nicht ideal, denn wenn sich der Designer zu stark von den Problemen mit HTML und CSS beeinflussen lässt, könnte die Kreativität darunter leiden.

Zum Glück ist es mit CSS3 und HTML5 immer mehr möglich, auch die aufwendigsten Layouts Eins-zu-Eins umzusetzen.

Vorausgesetzt der Programmierer hat die entsprechenden Informationen über die einzelnen Teile des Layouts. Damit sind gemeint Schriftart,Größe,Schattenlänge,Schattentransparenz usw.

Diese lange Liste an Einstellungen für jedes Element ist essenziell für die Abbildung in HTML mit CSS.

Um sich dabei viel Zeit zu ersparen, bieten sich Extensions für Photoshop an, die automatisch viele der Informationen aus dem Photoshop Dokument herausziehen. Einige, die bei mir im Einsatz sind, möchte ich euch heute näher vorstellen.

Cut&Slice (Photoshop CS6+)

Bild zu "Photoshop to Web" Pentalogie

Mit Cut&Slice kann ein "ordentlicher" Photoshop Designer mit nur einem Klick Assets aus dem Entwurf extrahieren. Ordentlich bedeutet, dass man seine Layer sinnvoll benennt und gruppieren sollte. Bei größeren, aufwendigen Webseiten ohnehin ein muss, um überhaupt noch etwas wiederfinden zu können. Das Plugin kann kostenlos für Photoshop heruntergeladen werden. Mit dem Adobe Extension Manager lässt es sich problemlos installieren und wird über das Menu Fenster->Erweiterungen geöffnet. Um die Funktionen nutzen zu können, müssen zuvor einige Änderungen an der Ebenenliste vorgenommen werden. Auf der Webseite werden diese unter dem Punkt "Only some simple rules" genannt. Hier eine kurze Zusammenfassung.

Bild zu "Photoshop to Web" Pentalogie

Das Tool selbst präsentiert sich mit einer Auswahl der Exporteinstellungen für iphone, Android und Webseite. Dabei legt das Plugin im gleichen Ordner wie die PSD für jede Exporteinstellung einen neuen Ordner an, und speichert die Assets passend zur Verwendung in einer iphone App, einer Android App oder auf einer Webseite. Beispielsweise wird beim Export für iphone von jedem Element eine @2x Version zur Verwendung für Retina erstellt.

Bild zu "Photoshop to Web" Pentalogie

Die für mich nützlichste Funktion ist "Cut Selected" . Man wählt einen oder mehrere übereinanderliegende Layer aus (Beispielsweise die Layer eines Buttons) , und kann diesen dann sofort ohne erst den Hintergrund ausblenden zu müssen, oder den Layer zuzuschneiden, exportieren. Supereinfach und schnell. Vor allem wenn Änderungen an Grafiken getestet werden sollen.

Bild zu "Photoshop to Web" Pentalogie

Ink - A photoshop documentor plugin

Bild zu "Photoshop to Web" Pentalogie

Ink ist laut Entwickler ein Plugin zum Dokumentieren. Das lustige ist, dass für das Tool selbst keinerlei Dokumentation, FAQ oder How-to angeboten wird. Nur ein "What's ink". Ansich kein schlimmes Flaw, aber leider sind die Buttons mit ihren Icons keine große Hilfe bei der ersten Anwendung. Daher möchte ich hier nicht nur das Plugin vorstellen, sondern auch eine Anwendungshilfe anbieten. Wie üblich lässt sich das MXP Paket kostenlos herunterladen und entweder per Doppelklick oder über den Extensionmanager installieren. Aufzurufen ist das Plugin in Photoshop über Fenster-Erweiterungen.

Nun zum Interface. Wie bereits erwähnt, stellt sich schnell der "Hmmm Wassup?" Faktor ein, wenn sich das Fenster zum ersten Mal öffnet. Man hat nun folgende Möglichkeiten: Der "unauffällige" Gelbe Button zieht alle wichtigen Informationen über einen Layer oder Mehrere Layer heraus und zeigt sie in einer neuen (_ink) Layergruppe an. Dabei werden auch die Abmessungen des Layers als Lineale an die Auswahl angefügt.

Bild zu "Photoshop to Web" Pentalogie
Interface Ink

Der Zweite Button mit dem Textsymbol bewirkt prinzipiell das gleiche wie der Gelbe, gibt aber keine Abmessungen aus.

Die etwas seltsamen kleinen Buttons darunter geben die Abmessungen entweder des gewählten Layers oder einer Marquee Auswahl aus. Von links nach rechts erklärt:

  • Layerabmessung Breite
  • Layerabmessung Höhe
  • Layerabmessung Höhe und Breite
  • Marquee-Auswahl Breite
  • Marquee-Auswahl Höhe
  • Marquee-Auswahl Höhe und Breite

Die Togglebuttons sind mit der Beschreibung zwar selbsterklärend, aber der Vollständigkeit halber auch hier noch eine Erklärung:

  • Print Layer Main Properties: Gibt Deckkraft und Flächendeckkraft des Layers aus
  • Print Layer Colors: Gibt den Farbfüllwert in RGB aus
  • Print Layer Effects: Gibt die eingestellten Layereffekte (Gradientfüllung, Schlagschatten usw) und deren Einstellungen aus. Diese Liste kann lang werden.
  • Text-Bubble: Verpasst der Ausgabe der Daten einen türkisen Hintergrund
  • Print units: Gibt die Abmessungen aus. Diese Option hat nur Auswirkungen auf den Gelben Button.

Die Ausgabe von Ink ist eine neue Layergruppe an oberster Stelle des Layerpanels mit der Bezeichnung (_ink) und stellt sich folgendermaßen dar:

Bild zu "Photoshop to Web" Pentalogie
Ausgabe von Ink als Infobubble

Das Plugin arbeitet zuverlässig, aber nicht unbedingt schnell. Bei vielen gewählten Layern kann die Ausgabe schon mal mehrere Minuten dauern. Ausserdem geht schnell die übersicht verloren. Man sollte daher schrittweise vorgehen, und nicht das komplette Dokument "dokumentieren".

CSS3Ps (Photoshop CS3+)

Bild zu "Photoshop to Web" Pentalogie

Dieses Plugin ist der Heilige Gral für Grafiker, die gerne einmal ihre Designs als CSS Code auf einer HTML Seite testen wollen. Photoshop CC hat die gleiche Funktion mittlerweile auch integriert, aber für Nutzer älterer Photoshop Versionen ist dieses Plugin ein Muss. Man muss aber bei beiden Lösungen, CSS Export via Photoshop CC oder per Plugin CSS3P, erwähnen, dass nicht alles korrekt abgebildet wird. Vor allem Blendmodi wie "Multiply" oder "Screen" erkennt das Plugin nicht, und stellt den entsprechenden Layer als roten Fehler dar. Das Problem lässt sich lösen, indem statt Multiply ein leicht transparenter Normal-Blend Modus eingestellt wird. Auch Bordergradients mit Alphachannel sind dem Plugin noch nicht bekannt, und übrigens auch den wenigsten Browsern, also kann dieser Effekt nicht 1-zu-1 übersetzt werden. Hier wird ein findiger CSS Entwickler zwar ein Workaround finden, aber Designer müssen zunächst erst einmal darauf verzichten.

Bild zu "Photoshop to Web" Pentalogie
CSS3P Fenster

Das Handling des Plugins ist denkbar einfach. Nach der Installation über den Adobe Extension Manager wird wie üblich per Menu Fenster->Erweiterungen das Interface von CSS3Ps aktiviert. Der gestaltete Layer mit seinen Effekten muss ausgewählt werden, und per Klick auf die einzige Schaltfläche öffnet sich ein Browserfenster mit der Webseite von CSS3Ps und es erscheint nach einigen Sekunden der CSS Code sowie eine Darstellung dessen, was CSS3Ps an Layerstyles erkannt hat. Leider ist das Ergebnis nicht 100%-ig. Aber dies trifft auf die mir bekannten derartigen Plugins alle zu. Auch Photoshop CC's interne CSS Erkennung ist nicht das Gelbe vom Ei, aber auf jeden Fall ein guter Startpunkt.

Der Workflow von CSS3Ps

1. Auswahl des Layers
2. Click auf CSS3Ps Button

Bild zu "Photoshop to Web" Pentalogie

3. Warten
4. CSS Code und Vorschau

Bild zu "Photoshop to Web" Pentalogie

Ein ganz ähnliches, aber kostenpflichtiges Plugin ist CSSHat (http://csshat.com/) für 34 $. Da ich dieses Plugin nicht besitze, fehlt mir ein direkter Vergleich der Ergebnisse.

Ergänzende Plugins

Zur Ergänzung hier noch zwei nützliche Plugins, die bei mir zur Erstellung von Webseiten Layouts zum Einsatz kommen:

Guideguide (Photoshop CS5+)

Bild zu "Photoshop to Web" Pentalogie

Auf einem leeren Photoshop Dokument ein Layout für eine Seite zu entwickeln ist am Anfang immer etwas mühselig. Die meisten haben sich für diesen Zweck bereits eigene Templates mit vordefinierten Grid-Layouts angelegt, um sich zumindest den Schritt der Aufteilung der Seite mit Guides ersparen zu können. Ein Plugin mit dem sich das Auslegen des Grids erleichtern lässt, ist Guideguide. Die Icons des Interfaces lassen nicht gleich darauf schließen, was sich hinter den Werten verbirgt. Für Hilfe einfach im Textfeld etwas mit dem Cursor hovern, dann erscheint der nützlichere Hilfetext. Der "GG" Button in der Mitte/Unten startet nach Eingabe der Werte die Generierung der Guides.

Bild zu "Photoshop to Web" Pentalogie
Guideguide Plugin mit Ergebnis

Für zukünftige Verwendung können einmal erstellte Grids auch als Sets gespeichert werden.

Flaticon (Photoshop CS5+)

Bild zu "Photoshop to Web" Pentalogie

Das nächste Plugin, das ich vorstellen möchte hat weniger mit dem Exportieren zu tun. Mit Flaticon hat man eine nützliche Bibliothek an Icons direkt als Fenster in Photoshop. Die Datenbank umfasst mehrere tausend Iconshapes, die durchsuchbar sind, und die per Drag-And-Drop direkt in das eigene Layout einfügt werden können. Da die Icons als Shapes vorliegen, lassen sie sich beliebig skalieren, und mit Layereffekten anpassen.

Bild zu "Photoshop to Web" Pentalogie
Extensionfenster von Iconshape

Ich hoffe ich konnte euch mit diesen Plugins das Leben mit Photoshop ein wenig erleichtern, und würde mich freuen, wenn ihr mir in den Comments eure nützlichen Erweiterungen mitteilt.

Über den Autor: Andreas Braun
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten