CSS-Code aus Photoshop exportieren. Drei Lösungen im Vergleich.

css-kopieren-photoshop

Auch wenn der moderne Workflow nicht mehr so linear verläuft wie noch vor ein paar Jahren (Design → Coding), wird Photoshop für Webdesigner immer interessanter. Zwar werden mittlerweile viele Grafiken über CSS3 realisiert, doch gestalten lässt es sich in Photoshop einfach besser. Und seit dem neuesten Update exportiert Photoshop auch CSS-Code. Ich habe die neue Funktion den zwei bekannten Plugins CSS3PS und CSS Hat gegenübergestellt.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Ebenenstile als Grundlage

Ich möchte euch in diesem Beitrag drei Lösungen vorstellen, mit denen sich Photoshop-Grafiken in CSS3-Code umwandeln lassen. Die Grundlage aller drei Varianten sind Ebenen mit zugewiesenen Ebenenstilen. Damit ihr die Ergebnisse besser bewerten könnt, habe ich ein Beispiel vorbereitet, und zeige sowohl das Aussehen der CSS-Version (in Chrome), als auch den exportierten Code. Da sich Blendmodi mit CSS nicht simulieren lassen, habe ich auf solche Einstellungen verzichtet.

Beispiel-Ebene

Die Beispiel-Ebene sieht so aus. Ein Vektor-Objekt mit abgerundeten Ecken und einem Vektor-Verlauf, bei dem ich Vordergrund- und Hintergrundfarbe umgekehrt habe. Zusätzlich ein paar Ebenenstile für eine Kontur, einen Schein nach Innen und einen Schlagschatten.

Testebene für den CSS-Export von Photoshop
Testebene für den CSS-Export von Photoshop

Die Vektor-Funktionen stellen erschwerte Bedingungen dar. Um effektiv und zeitgemäß mit Photoshop CS6 arbeiten zu können, sind Vektoren jedoch unverzichtbar. Daher habe ich sie in die Beispielebene aufgenommen, auch wenn es sich hierbei nicht um einen Ebenenstil handelt.

CSS-Export für Photoshop CS6 (13.1)

Nutzer der Creative Cloud können sich freuen. Seit dem Update auf Version 13.1 bietet Photoshop einen integrierten CSS-Export für Ebenenstile. Mit einem Rechtsklick auf die entsprechende Ebene im Ebenen-Bedienfeld, erreicht ihr den Eintrag „CSS kopieren“.
Leider eignet sich die Funktion für komplexe Grafiken nicht. Das Ergebnis ist deutlich schlechter als ich erwartet hätte. Den umgekehrten Verlauf in den Vektor-Einstellungen hat Photoshop glatt übersehen, auch der Schein nach innen ist nicht umgesetzt.

CSS-Export von Photoshop
CSS-Export von Photoshop

CSS-Code von Photoshop

.Abgerundetes_Rechteck_1 {
  border-width: 0px;
  border-color: rgb( 255, 255, 255 );
  border-style: solid;
  border-style: solid;
  border-width: 3px;
  border-color: rgb( 0, 75, 131 );
  border-radius: 15px;
  background-image: -moz-linear-gradient( 90deg, rgb( 58, 167, 232 ) 0%, rgb( 21, 113, 184 ) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb( 58, 167, 232 ) 0%, rgb( 21, 113, 184 ) 100%);
  box-shadow: 0px 16px 18px 0px rgb( 48, 30, 5 );
  position: absolute;
  left: 63px;
  top: 46px;
  width: 420px;
  height: 119px;
  z-index: 2;
}

CSS3PS

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

Das Ergebnis entspricht leider auch nicht unserem Qualitätsanspruch. Der Vektor-Hintergrund wurde ignoriert, ansonsten sind jedoch alle Effekte vorhanden. Im Gegensatz zur Photoshop eigenen Funktion, hat das Plugin sogar den Schein nach Innen umgesetzt.

CSS-Export von CSS3PS
CSS-Export von CSS3PS

CSS-Code von CSS3PS

Abgerundetes Rechteck 1
{
	width: 426px;
	height: 125px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 0 16px 18px #301e05, inset 0 0 0 2px rgba(255,255,255,.17);
	-moz-box-shadow: 0 16px 18px #301e05, inset 0 0 0 2px rgba(255,255,255,.17);
	box-shadow: 0 16px 18px #301e05, inset 0 0 0 2px rgba(255,255,255,.17);
	border: solid 3px #004b83;
}

CSS Hat

Kommen wir zum letzten Plugin unserer kurzen Testreihe: CSS Hat. Das Plugin ist zwar nicht kostenlos ($29.99), bietet dafür aber auch ein eigenes Bedienfeld mit Einstellungsmöglichkeiten.
Neben der Art des Codes (CSS, LESS, SCSS, SASS, Stylus, Stylus CSS) könnt ihr festlegen, ob die Bezeichnung der Ebene als CSS-Klasse verwendet werden soll und ob die Abmessungen der Grafik mit aufgenommen werden sollen. Auf Wunsch können sogar Vendor-Präfixe hinzugefügt und Kommentare eingebunden werden.

Bedienfeld von CSS Hat
Bedienfeld von CSS Hat

Das Ergebnis ist deutlich besser als bei Photoshop und CSS3PS. Im Gegensatz zu beiden anderen Lösungen sieht das Element genau so aus wie in Photoshop. Ich setze CSS Hat übrigens selbst täglich ein und bin von diesem Plugin sehr überzeugt. Die 30 Euro sind gut angelegt und sollten bereits im ersten Projekt wieder erwirtschaftet worden sein.

CSS-Export von CSS Hat
CSS-Export von CSS Hat

CSS-Code von CSS Hat

Ich habe beim CSS-Export alle Einstellungen aktiviert.

.abgerundetes-rechteck-1 {
	width: 426px;
	height: 125px;
	border: 3px solid #004a83; /* stroke */
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	border-radius: 18px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	-moz-box-shadow: 0 16px 18px rgba(48,30,5,.83), inset 0 0 0 2px rgba(255,255,255,.17); /* drop shadow and inner glow */
	-webkit-box-shadow: 0 16px 18px rgba(48,30,5,.83), inset 0 0 0 2px rgba(255,255,255,.17); /* drop shadow and inner glow */
	box-shadow: 0 16px 18px rgba(48,30,5,.83), inset 0 0 0 2px rgba(255,255,255,.17); /* drop shadow and inner glow */
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDQyNiAxMjUiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE1NzFiNyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhYTdlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNDI2IiBoZWlnaHQ9IjEyNSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* layer fill content */
	background-image: -moz-linear-gradient(bottom, #1571b7 0%, #3aa7e7 100%); /* layer fill content */
	background-image: -o-linear-gradient(bottom, #1571b7 0%, #3aa7e7 100%); /* layer fill content */
	background-image: -webkit-linear-gradient(bottom, #1571b7 0%, #3aa7e7 100%); /* layer fill content */
	background-image: linear-gradient(bottom, #1571b7 0%, #3aa7e7 100%); /* layer fill content */
}

Fazit

Ich hätte ehrlich gesagt nicht erwartet, dass das Ergebnis so eindeutig zugunsten von CSS Hat ausfällt. Ich bin zwar davon ausgegangen, dass CSS Hat den besten Code liefert, dass Photoshop jedoch so klar versagt, ist enttäuschend. Ich hoffe Adobe reicht hier zügig ein Update nach.
CSS3PS befindet sich im Mittelfeld, hat jedoch den großen Nachteil, dass die Ebenen mühsam hochgeladen werden müssen und das Vektoren nicht erkannt werden. Für Profis ist das Gratis-Plugin daher keine Alternative.

Links / Quellen