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

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Bug in Netbeans 8.0.1 und Lösung

Autor: Bastian Schwarz


Technologie


Wie einige mitbekommen haben hatte ich nach dem Update auf Netbeans 8.0.1 kein Autcomplete mehr und auch alle anderen Sachen wie Open Class, Navigation etc. gingen nicht mehr. Heute habe ich endlich eine Lösung gefunden: https://netbeans.org/bugzilla/show_bug.cgi?id=247026 Readers Digest: Offenbar gab es Änderungen wie der Index geschrieben wird, dieser sollte das erkennen und sich neu aufbauen. …


Beitrag lesen
23.
Sep.
2014

Kundenworkshop imx.Platform 3

Autor: Christine Pfleger


infomax // Strategie & Konzeption // Technologie // Tourismus // Über den Tellerrand // User Experience & Design


Kundenworkshop GUI imx.Platform 3
Kundenworkshop GUI imx.Platform 3

Am 29. Mai 2019 haben wir den "Power-Usern" unter unseren Kunden, also denjenigen, die am intensivsten mit dem infomax-Technologie-Framework imx.Platform arbeiten, in einem Workshop den aktuellen Stand der neuen imx.Platform 3 präsentiert, ihre Wünsche an Features und Usability diskutiert und diese priorisiert in eine Roadmap überführt.


Beitrag lesen
29.
Mai
2019

Open Graph Tags in der imx.Library

Autor: Bastian Schwarz


Technologie


Soeben habe ich eine neue Version des MetainfoGenerators bereitgestellt, der einen Builder und einen Renderer für die Open Graph Tags beinhaltet. Die Logiken zur Einbindung sind nicht im „Mock“-Smartyplugin enthalten, da die Logik sich von Portal zu Portal unterscheiden kann. Wicht dafür ist, dass die Open Graph Tags mind. aus title, image, url und type …


Beitrag lesen
04.
Sep.
2012

AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Autor: Stefan Oswald


Technologie // User Experience & Design


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine „Ladeschnecke“ (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im „beforeLoad“-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im „complete“-Ereignis wieder entfernt oder unsichtbar gemacht wird. …


Beitrag lesen
23.
Juli
2014