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.

Dieser Artikel wurde verschlagwortet unter:


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Grunt concurrent und time-grunt

Autor: Florian Müller


Technologie


Gestern Abend bin ich auf einen Artikel gestoßen, welcher sich mit der Optimierung von Grunt Tasks beschäftigt hat. Vieles davon ist schon im Einsatz, aber eins hat dann doch noch gefehlt – die Parallelisierung. Dies habe ich heute morgen testweise bei einem Projekt integriert. Um vergleichbare Ergebnisse zu bekommen, welche unabhängig von anderen Build Tasks des …


Beitrag lesen
29
SEP
16

HTML5 Polyfill

Autor: Sascha Nützel


Technologie


Nachdem das „required“- Attribut im Safari nicht funktioniert, bin ich auf die Suche nach einem Polyfill gegangen. Dabei bin ich auf folgende Bibliothek gestoßen: https://github.com/aFarkas/webshim Die Einbindung gestaltet sich recht simpel und wird hier https://github.com/aFarkas/webshim#installation-and-usage gut erklärt. Es besteht auch die Möglichkeit, nicht alle Module einzubinden sondern nur vereinzelt gebrauchte (z.B. ‚forms‘). Das Portalseitige Minify muss für …


Beitrag lesen
31
AUG
16

Einrichten des GoogleTagManagers

Autor: Philip Dumas


Technologie


Zum Hintergrund: seit kurzem verwenden wir den GoogleTagManager(GTM) bei den Hörnerdörfern. Ziel ist es die diversen Analytics Accounts die hier verwendet werden (Bolsterlang, Fischen etc.) unter einen Hut zu bringen. Hierzu kann man im Tagmanager Profil Regeln und Tags erstellen, anhand derer das Tracking dann ausgeführt wird (dazu später mehr). Ermöglicht  wird das Ganze über …


Beitrag lesen
26
AUG
14

Facebook-App als Seitenreiter zu einer Fanpage hinzufügen

Autor: Stefan Oswald


Technologie


Um einer Facebook-Seite (Fanpage) eine eigene Seitenreiter-App hinzuzufügen, ist ein kleiner Workaround notwendig. Hinweis: Die Voraussetzungen, um überhaupt eine Seitenreiter-App erstellen zu können, ist ein Developer Account bei Facebook. Nach dem Erstellen der Seitenreiter-Anwendung kopiert man einfach die App-ID, fügt diese in den unten stehenden Link ein, ruft die URL im Browser auf und wählt …


Beitrag lesen
22
JAN
14