Photoshop-Ebenenstile als CSS3-Code exportieren

Michael Degener Datum: 3. August 2012
Autor: Michael Degener


Ob Designer oder Entwickler, jeder der schon einmal eine Screen-Vorlage mit all seinen Ebenen mittels HTML und CSS zum Leben erwecken musste, hat sich insgeheim sicherlich schon einmal gewünscht, dass sich dabei manche Arbeitsschritte beschleunigen ließen.

Wer kennt sie nicht, die allgegenwärtigen Buttons in Formularen, Teasern und Schnellsuchen. Von runden Ecken über Konturen und Schlagschatten bis hin zu Verläufen ist hier oft alles geboten. Ließ sich dies früher nur mit diversen Hintergrundgrafiken und Tricks bewerkstelligen, so ist heute bei der Umsetzung CSS3 die erste Wahl. Wenn da nur nicht immer die lästige Tipparbeit wäre…

Seit kurzem gibt es ein Photoshop-Plugin, dass diese Entwicklung beschleunigt: CSS3PS. Mit Hilfe des Plugins wandelt ihr Ebenenstile in CSS3-Code um.

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“.

Wie arbeitet das Plugin?
Das Plugin wandelt Ebenenstile und einige weitere Einstellungen wie die Größe eines Objekts oder die Abrundung der Ecken in CSS3-Code um.

  1. Erstellt zunächst ein beliebiges Objekt (z.B. ein Form-Objekt),
  2. fügt anschließend Ebenenstile wie Konturen, Verläufe oder Schatten hinzu,
  3. markiert die gewünschten Ebenen (es ist auch eine Mehrfachauswahl möglich) im Ebenen-Bedienfeld,
  4. klickt anschließend auf das „CSS3PS“-Logo im Bedienfeld des Plugins.
  5. 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.

Das Ganze funktioniert überraschend gut, und das so erzeugt Code-Snippet kann samt vendor prefixes direkt in den jeweiligen Editor kopiert werden.
Ob nur nette Spielerei oder echter Gewinn kann jeder selber entscheiden.

Auch andere Onlinetools wie etwa der CSS-Generator erleichtern einem die Arbeit da enorm. Hier lassen sich die entsprechenden Styles mit wenigen Klicks “zusammenstellen” und können dann ebenfalls einfach kopiert werden.

Kommentare

Axel Güldner

Axel Güldner

– 6. August 2012 / 09:48

Wofür kann man dieses Plugin (und ähnliche) in Photoshop nutzen?
– Als Nachschlagewerk oder Hilfestellung beim Stylen einzelner Elemente wie Buttons, Überschriften und ähnliches was statisch ist.

Wofür sollte man dieses Plugin (und ähnliche) auf gar keinen Fall verwenden?
– Zum Konvertieren ganzer Screens.
– Um blind akzeptierten Code innerhalb von Projekten produktiv zu verwenden.

Was macht mich bei dem Plugin stutzig?
– Wie erstellt man dynamische Zustände in einem Screen (CSS Transitions)?
– Wie verhält sich der Compiler wenn man ihm eine komplexere Screens als die üblichen 2 Button PSDs hinwirft?
– Auf welcher Basis verden Klassennamen erzeugt?
– Auf welcher Basis wird entschieden ob eine Klasse oder eine ID genuzt wird?
– Gibt es überhaupt eine Unterscheidung nach Klassen und IDs?

Ist sicherlich eine nette Sache um mal eben nachzuschauen wie dieser oder jener Effekt in CSS3 nochmal ging. Aber den Code der nachher seinen Weg ins Projekt findet, sollte man nicht einem Photoshop Plugin überlassen und ich hoffe ehrlich das niemand hier derartige Werkzeuge für diesen Zweck nutzt.

Michael

– 8. August 2012 / 16:49

Falls Zweifel aufgekommen sind…
… dieses Plugin soll keinen dazu verleiten zweifelhaften Code aus zweifelhaften Quellen in ernsthaften Projekten wiederzuverwenden.

Ich denke es sollte selbstverständlich sein, dass solche Plugins allenfalls als Hilfestellung gesehen werden können.

Ebenso selbstverständlich sollte es eigentlich sein, dass man nicht erwarten kann, damit den Code für dynamische Zustände (CSS Transitions), komplexere Objekte oder gar gesamte Screens generieren zu können.

Vor allem aber sollte es selbstverständlich sein, dass man nicht einfach den so erzeugten Code in einem Projekt verwendet, ohne ihn zuvor zu validieren und gegebenenfalls anzupassen.

Wenn einem das klar ist, darf man auch mal mit Plugins spielen ; )

Axel Güldner

Axel Güldner

– 9. August 2012 / 15:54

Hi Michael, ist doch super, dann sind wir ja alle der gleichen Ansicht 🙂
Und mit Plugins spielen ist immer gut.

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Parallax Scrolling – ein cooler Effekt der nicht ganz neu ist

Autor: Axel Güldner


Technologie // User Experience & Design


Heute wollte ich mal kurz einen Effekt vorstellen, den viele sicher schon mal gesehen haben, ihn toll fanden, aber keine Ahnung hatten wie das eigentlich funktioniert. Das Thema ist Parallax Scrolling, ein Effekt der auf Websites auftritt, wenn verschiedene Hintergrund Ebenen ein unterschiedliches Scrollverhalten aufweisen. Dies wirkt unerwartet und frisch, da dies nicht die gewohnte …


Beitrag lesen
17.
Nov.
2011

Datenimporte in die imx.Platform

Autor: Tobias Pfannkuche


Technologie


Aufgrund der kontinuierlich steigenden Anzahl externer Datenlieferanten bzw. der Anbindung von Schnittstellen im Rahmen von Datenimporten und damit verbundenen wiederkehrenden Fragen, hier eine Zusammenfassung der Kern-Anforderungen, um Daten von Drittanbietern in die imx.Platform zu übernehmen, sowie Grundfunktionalitäten für Datenimporte. Anforderungen Grundsätzlich sind folgende technischen Anforderungen einer Schnittstelle, die wir zwecks Datenübernahme/-import nutzen wollen, zu erfüllen: …


Beitrag lesen
10.
Nov.
2017

The Vanilla Javascript Repository

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und gleich noch ein Linktipp für all diejenigen, die wie ich, nur ungern jQuery einsetzen und ihre Seiten dadurch aufblähen oder verlangsamen. Unter Vanilla List gibt es eine optisch sehr ansprechende Sammlung von Skripten, die auf Vanilla JS aufbauen und viele unserer Anwendungsfälle abdecken können. Sehr schön ist auch die direkte Anzeige davon, ob eine …


Beitrag lesen
23.
Sep.
2016

Erkenntnisse der IPC 2011

Autor: Benjamin Hofmann


Projekte // Technologie // User Experience & Design


Bevor ich lange im Developer Meeting etwas erzähle, was dann sowieso nur wieder in Vergessenheit gerät, dachte ich mir meine Erkenntnisse von der IPC 2011 in Mainz einfach hier niederzuschreiben. Dauerhaft für alle von uns sichtbar und mit einer Möglichkeit Fragen zu stellen. Hier also meine Top 7 (unsortiert) der Dinge, die ich interessant fand …


Beitrag lesen
08.
Dez.
2011