Adobe Project Parfait (Beta) – PSD-Dateien online in valides CSS umwandeln (PSD CSS-Extractor)

Adobe bringt mit der Project Parfait (Beta) ein Projekt an den
Start, welches in ähnlicher Form oder zumindest mit ähnlichen
Funktionen schon von verschiedenen Plugin-Entwicklern in
Photoshop Einzug gehalten hat, man nehme hier z.B. CSS-Hat oder
Enigma64 als ein Beispiel.


Nichtsdestotrotz ist es eine angenehme Entwicklung, dass auch
Adobe nun ein Tool (PSD CSS-Extractor) herausgebracht hat, mit
dem sich schnell und einfach online die entsprechenden
CSS-Definitionen für PSD-Dateien kopieren lassen bzw. Ebenen oder
gruppierte Elemente als Asset direkt herunterladen lassen.


Anzeige:







Adobe Project Parfait (Beta) – PSD-Dateien online in valides
CSS umwandeln

Project Parfait ermöglicht es Webdesignern, die erstellten
Layouts oder natürlich auch die von Auftraggebern in Form von
PSD-Dateien zu dem Online-Dienst hochzuladen. Parfait ermöglicht
es dann, die Elemente in der PSD-Datein einfach zu selektieren
und den dazugehörigen CSS-Code zu kopieren.
Project Parfait Bild Export

Es ist ebenfalls möglich, Ebenen direkt als Bild herunterzuladen.
Hiermit erspart man sich das Ausschneiden in Photoshop,
wobei dieser Vorgang bereits über den Photoshop
Bild-Asset-Generator (nur in der CC-Version verfügbar) sehr
elegant gelöst wird. Meiner Meinung nach sogar besser und
flexibler als über Project Parfait, da es direkt aus Photoshop
heraus erledigt werden kann. Da Parfait allerdings einfachere
Dialoge bietet, kann es für Anfänger oder nicht routinierte
Nutzer durchaus die schnellere und vor allem einfachere Variante
sein.


Photoshop CC bietet ebenfalls die Möglichkeit, CSS Code direkt
aus der Ebenen-Palette zu kopieren. Dies funktioniert über einen
»Rechtsklick« und anschließend im Kontextmenü mit „CSS kopieren“,
daraufhin kopiert Photoshop CC den CSS-Code in die
Zwischenablage. Hier wiederum ist Project Parfait wesentlich
eleganter und generiert auch den besseren CSS-Code.


Zum Vergleich hier ein Beispiel-Code eines einfachen orangenen
Buttons:


Der Code aus Photoshop CC sieht wie folgt aus:
.Rectangle_5_copy_2 { background-color: rgb( 204, 204, 204 );
position: absolute; left: 932px; top: 703px; width: 142px; height:
37px; z-index: 9; }

Derselbe Button, nur jetzt mit Code aus Project
Parfait:
background-color: #ff9c00; width: 142px; height: 37px;

Hier wird auf Anhieb klar, dass sich Parfait auf die wirklich
relevanten Codes beschränkt und diese auch sauberer ausgibt.
Photoshop CC sorgt im Vergleich für viel Müll-Code, den man in
dieser Form besser nicht in die eigene CSS-Datei übernehmen
sollte, schon gar nicht mit den absoluten Positionen.


Project Parfait befindet sich aktuell in einer offenen
Beta-Version und kann von jedem, der es testen möchte,
ausprobiert werden.


Podcast Info:
Titel: Adobe Project Parfait (Beta) – PSD-Dateien online in
valides CSS umwandeln (PSD CSS-Extractor)
Autor: Pascal Bajorat
Länge: 11 Min
Dateigröße: 282 MB (1080p HD)


Dieses Video findet ihr ebenfalls in unserem Vimeo Kanal.


Anmerkung: In dem Video erzähle ich, dass die
beiden Plugins CSS-Hat und Engima64, aus dem Hause
madebysource.com, bei mir unter Photoshop CC nicht funktionieren.
Nun habe ich von ein paar Kollegen erfahren, dass die Plugins bei
ihnen auch unter der CC funktionieren, dies ist bei mir leider
nicht der Fall, eine Neuinstallation und auch die Installation
auf einem komplett anderen Rechner waren keine Lösung. Auf
Support-Anfragen hat madebysource.com nicht reagiert, daher
erkläre ich beide Plugins zumindest für mich weiterhin als tot
und nicht benutzbar! Das Update, welches während der
Video-Aufnahme angezeigt wurde brachte übrigens auch keine
Verbesserung der Situation.



Ähnliche Artikel:
CSS Vererbung und Kaskadierung Adobe Bild-Asset Generator
Assistent in Photoshop CC Icon mit Adobe Photoshop