Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS

css3-photoshop-plugin-icon-logo

Viele Webdesigner bzw. Frontend-Developer arbeiten immer weniger in Grafikprogrammen wie Photoshop oder Fireworks und wechseln bereits in einer sehr frühen Phase der Website-Erstellung in den Browser. Der Browser ist heute DIE neue Entwicklungsumgebung für Code und Grafik und das Stichwort in diesem Zusammenhang ist „Design in the Browser“. Cloud-Anwendungen und die integrierten Debug-Konsolen der Browser greifen uns dabei mächtig unter die Arme.
Heute möchte ich euch ein neues Photoshop-Plugin vorstellen, dass diese Entwicklung noch weiter beschleunigt: CSS3PS. Mit Hilfe des Plugins wandelt ihr Ebenenstile in CSS3-Code um. Ein Feature das ich mir bereits vor zwei Jahren auf der PhotoCon in München gewünscht habe ist somit endlich Realität geworden!

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Wo finde ich das Plugin?

Das Plugin steht online als Download für die Photoshop-Versionen CS3, CS4, CS5 und CS6 kostenlos zur Verfügung. Nach dem Download installiert ihr das Plugin über den Extention-Manager von Adobe und startet Photoshop einmal neu. Anschließend findet ihr innerhalb von Photoshop unter „Fenster → Erweiterungen“ ein neues Bedienfeld namens „CSS3PS“.

Das Bedienfeld von CSS3PS.

Wie arbeite ich mit dem Plugin?

Das Plugin wandelt Ebenenstile und einige weitere Einstellungen wie die Größe eines Objekts oder die Abrundung der Ecken in CSS3-Code um. Erstellt zunächst ein beliebiges Objekt (z.B. ein Form-Objekt) und fügt anschließend Ebenenstile wie Konturen, Verläufe oder Schatten hinzu. Markiert die gewünschten Ebenen (es ist auch eine Mehrfachauswahl möglich) im Ebenen-Bedienfeld und klickt anschließend auf das „CSS3PS“-Logo im Bedienfeld des Plugins. Das Plugin stellt nun eine Verbindung zur Website her und wandelt die Stile in Code um. Als Ergebnis erhaltet ihr eine Vorschau und den CSS3-Code zum Download auf der Website.

Ergebnis des Exports
Endergebnis auf der Website mit Code und Vorschau

Photoshop CS6-Plugin als Video

Ich habe ein kurzes Video erstellt in dem ich euch zeige, wie ihr mit Hilfe des Plugins Ebenenstile in CSS3-Code umwandelt. Zunächst erstellen wir ein simples Beispiel-Objekt, anschließend generieren wir den Code mit Hilfe des Plugins.

Links zum Thema