Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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!

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Links zum Thema

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 15 Kommentare

  1. CSS-Code aus Photoshop exportieren. Drei Lösungen im Vergleich. | kulturbanause blog
    schrieb am 16.01.2013 um 09:00 Uhr:

    […] Als nächstes schauen wir uns das kostenlose Plugin CSS3PS an. Da ich das Tool vor einiger Zeit bereits vorgestellt habe, verzichte ich hier auf Details. Den entsprechenden Artikel findet ihr hier: Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS […]

    Antworten
  2. Die wichtigsten non-destruktiven Photoshop-Techniken + Tipps, Tricks & Videos | kulturbanause blog
    schrieb am 03.09.2012 um 17:52 Uhr:

    […] bieten noch einen weiteren Vorteil. Mit Tools wie CSS3PS oder CSSHat könnt ihr Stile in CSS3-Code konvertieren lassen. Das ist praktisch und beschleunigt […]

    Antworten
  3. Florian
    schrieb am 23.07.2012 um 16:38 Uhr:

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

    Antworten
  4. Carrear
    schrieb am 18.07.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

    Antworten
  5. hans
    schrieb am 14.07.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.

    Antworten
  6. Stefan
    schrieb am 13.07.2012 um 09:52 Uhr:

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

    Antworten
    • Mario
      schrieb am 14.07.2012 um 15:21 Uhr:

      Hi Stefan,

      gerne!

      Antworten
  7. hans
    schrieb am 12.07.2012 um 00:09 Uhr:

    @mario: warum sollte fireworks eingestampft werden?

    Antworten
    • Mario
      schrieb am 14.07.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?

      Antworten
  8. Photoshop-Ebenstile als CSS3-Code exportieren - michaelbrumm.de - Der Blog über WordPress, Webdesign & Online-Marketing
    schrieb am 09.07.2012 um 20:24 Uhr:

    […] Dank an Jonas Hellwig, der mich in seinem Blog auf dieses äußerst nützliche Plugin aufmerksam gemach […]

    Antworten
  9. Mario
    schrieb am 09.07.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).

    Antworten
    • Jonas Hellwig
      schrieb am 09.07.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.

      Antworten
      • Mario
        schrieb am 09.07.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

  10. Caspar
    schrieb am 09.07.2012 um 10:08 Uhr:

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

    Antworten
  11. Flowsen
    schrieb am 09.07.2012 um 09: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.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →