CSS-Code aus Photoshop kopieren und exportieren

Im letzten Artikel sind wir darauf eingegangen, wie man in Adobe InDesign erzeugte Layouts Browser- oder App-Basiert konvertieren kann. Zugegebenermaßen ist der Einsatz der dort vorgestellten HTML5-Exportfunktion ziemlich exotisch und wird wohl eher in bestimmten Agenturkonstellationen zum Einsatz kommen.

Weitaus häufiger wird natürlich Photoshop eingesetzt. Hier bestand schon länger der Wunsch, Photoshop Ebenenstile in CSS-Code umzuwandeln, wie man es beispielsweise von Fireworks kennt. Bisher war dies allerdings nur mit Plugins möglich.

Seit dem Creative Cloud-Update auf Version 13.1 bietet Photoshop nun einen fest integrierten CSS-Export für Ebenenstile an. Hierzu ist lediglich ein Rechtsklick auf die gewünschte Ebene notwendig, wo Sie nun den Punkt “CSS kopieren” auswählen können. Der CSS-Code wird nun automatisch in die Zwischenablage kopiert und kann entsprechend weiter verarbeitet werden. Mehrere Elemente können auch gruppiert und zusammenhängend kopiert werden. Ferner lassen sich auch Textebenen Exportieren.

Einschränkend muss man aber direkt sagen, dass der CSS-Export momentan nur sehr rudimentär funktioniert. Vektor-Funktionen und ausgefeilte Effekte werden nicht berücksichtigt. Auch ist der Code nicht auf die verschiedenen Browser-Engines optimiert. Aufgrund dieser Einschränkungen eignet sich die Exportfunktion insgesamt noch nicht für den dauerhaften, produktiven Einsatz. Fireworks bietet hier eine deutlich ausgefeiltere Funktionalität an.

Alternativ lohnt sich auch der Einsatz des sehr ausgereiften Photoshop-Plugins CSS Hat, eventuell kann aber auch das kostenlose Plugin CSS3Ps ausreichen.


Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

, ,

Ebenfalls Lesenswert:

Eine Reaktion zu CSS-Code aus Photoshop kopieren und exportieren

  1. Hans-Peter 5. Juli 2013 at 14:24 #

    Zunächst danke für den Artikel! Werde das Thema zukünftig in Angriff nehmen, insbesondere das letzte Plugin kannte ich noch nicht.

Hinterlasse eine Antwort