kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS

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!

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

12 Kommentare

  1. Flowsen

    Verfasst am 9. Juli 2012 um 9:58 Uhr.

    So eine Funktion habe ich mir gewünscht.
    Einfach aus den Ebenenstilen heraus den CSS3 Code generieren.

    Wird gleich mal mit rumgespielt!
    Danke.

  2. Caspar

    Verfasst am 9. Juli 2012 um 10:08 Uhr.

    Schönes Ding, und perfektes Timing! Vielen Dank für den Beitrag!

  3. Mario

    Verfasst am 9. Juli 2012 um 10:34 Uhr.

    Als, wie ich finde, bessere Alternative: CSS Hat (http://csshat.com/). Kostet zwar was, aber ist preislich eher ein Mitnahmeartikel und ein „echtes“ Plug-In (keine Weiterleitung auf einen Webservice).

    • Jonas Hellwig

      Verfasst am 9. Juli 2012 um 10:54 Uhr.

      Hallo Mario, vielen Dank für den Tipp! Das Tool kannte ich noch gar nicht. Sieht auf den ersten Blick echt schick aus.

      • Mario

        Verfasst am 9. Juli 2012 um 11:29 Uhr.

        Hi Jonas,

        gerne! Ich suche mir gerade so meine Helferlein zusammen. Ich habe bis jetzt immer alles in Fireworks gemacht (wo die CSS Geschichte ja nun von Haus aus dabei ist), aber ich befürchte, lange wird es kein Fireworks mehr geben. Da gewöhne ich mich lieber jetzt schon mal um …

        Was hältst Du von Layer Cake (http://macrabbit.com/layercake/)? Ist das nächste auf meiner Liste. ;-)

        Viele Grüße

        Mario

  4. hans

    Verfasst am 12. Juli 2012 um 0:09 Uhr.

    @mario: warum sollte fireworks eingestampft werden?

    • Mario

      Verfasst am 14. Juli 2012 um 15:20 Uhr.

      Hi Hans,

      weil Adobe mit Abstand am wenigsten für FW tut und es immer als Stiefkind behandelt. Die einzige richtige Neuerung ist der Export der CSS Eigenschaften. Super. Das haben die Jungs von „CSS Hat“ für Photoshop innerhalb kürzester Zeit auf die Beine gestellt. FW (zumindest auf dem Mac) fühlt sich immer sehr zäh an und verbraucht mehr Ressourcen als das aufgeblähte Photoshop.

      Es werden immer mehr „Web“-Funktionen in Photoshop eingebaut und das läuft definitiv flüssiger. Adobe ist Kundenfeedback doch egal. Warum sollen die sich auf Dauer Konkurrenz im eigenen Hause leisten?

  5. Stefan

    Verfasst am 13. Juli 2012 um 9:52 Uhr.

    Muss ich demnächst ausprobieren. Sehr interessant. Danke auch @Mario für den Tipp.

    • Mario

      Verfasst am 14. Juli 2012 um 15:21 Uhr.

      Hi Stefan,

      gerne!

  6. hans

    Verfasst am 14. Juli 2012 um 15:37 Uhr.

    @Mario: ich bin unter anderem wegen der miserablen performance unter fireworks vor ein paar monaten auf windows gewechselt und da läuft fireworks wesentlich flotter und vor allem absturzfrei.

    mich wundert es auch das photoshop so viele web funktionen bekommt und fireworks vernachlässigt wird, aber adobe muss doch wissen das fireworks das indesign für webdesigner ist … (?). mockups in photoshop zu machen ist wesentlich zeitraubender da es weder masterseiten noch seiten überhaupt gibt. man wird doch in photoshop irgendwann von dem ebenen-wust fast erschlagen …

    evtl. hat adobe aber auch ganz andere pläne.

  7. Carrear

    Verfasst am 18. Juli 2012 um 11:27 Uhr.

    Hi,

    also bei mir klappt die Installation nicht. Dieser Extension Manager fragt nach einer anderen Dateiendung, als die, welche auf der Webseite zum Download angeboten werden. Angeboten werden .jsx und .zxp – er fragt aber nach .mxp oder .mxi – mache ich da etwas falsch?

    Viele Grüße

  8. Florian

    Verfasst am 23. Juli 2012 um 16:38 Uhr.

    Groß-ar-tig! Hab ich mir schon ewig gewünscht. Danke! :-)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.