Share
Project Parfait ist ein neues Tool von Adobe, das sich derzeit in der Beta-Phase befindet und mit dem Sie jede PSD direkt im Browser öffnen können, um CSS-, Text- und Bild-Assets daraus zu extrahieren. Im Moment funktioniert es nur in Chrome, aber Adobe plant, es im Laufe der Entwicklung auf alle Browser auszurollen.
Das Öffnen einer PSD in Project Parfait ist sehr einfach. Gehen Sie einfach zu https://projectparfait.adobe.com/ und klicken Sie auf das große blaue Laden Sie Ihre eigene PSD hoch Button in der oberen rechten Ecke:
Nachdem Sie sich mit Ihrer Adobe-ID angemeldet haben, ziehen Sie Ihre PSD per Drag & Drop in den leeren Bereich des Bedienfelds. Die Datei wird für Sie hochgeladen:
Wenn der Upload abgeschlossen ist, können Sie auf die Miniaturansicht Ihrer PSD klicken und diese wird in Project Parfait für Sie geöffnet:
Um CSS für jedes Element in Ihrem Design zu generieren, klicken Sie einfach darauf, um es auszuwählen. Der entsprechende Code wird in der rechten Seitenleiste angezeigt CSS Inspector Feld. Von hier aus können Sie die Elemente des gewünschten Codes hervorheben und kopieren oder auf klicken Kopiere alles Taste:
Wenn das Element ausgewählt ist, erscheint alternativ ein blauer Aufruf, auf den Sie klicken können CSS kopieren Link, um den gesamten Code direkt abzurufen:
Der blaue Hinweis, der erscheint, wenn ein Element ausgewählt wird, kann auch zum einfachen Kopieren von Textinhalten aus einer PSD verwendet werden, indem Sie auf klicken Text kopieren Verknüpfung:
Das Exportieren von Bildern über Project Parfait ist ebenfalls unkompliziert. Beginnen Sie mit der Auswahl des Bildes, das Sie exportieren möchten. Wenn es mehrere Layer enthält, halten Sie gedrückt Verschiebung und klicken Sie auf jedes, um es auszuwählen. Klicken Sie dann auf den nach unten zeigenden Pfeil auf dem blauen Ruf und Sie erhalten eine Speichern als In diesem Feld können Sie Ihren bevorzugten Bildnamen, Format und Qualitätseinstellungen eingeben:
Nachdem das Bild gespeichert wurde, erscheint es im Vermögenswerte Registerkarte der rechten Seitenleiste, von der aus Sie auf das Bild klicken können, um es herunterzuladen:
Project Parfait Beta ist noch nicht einmal einen Monat alt, daher gibt es einige Aspekte der CSS-Generierung, die derzeit nicht unterstützt werden. Laut den Mitgliedern des Project Parfait-Forums war die Aktualisierungsrate jedoch bereits sehr hoch. Ich denke, das Adobe-Team arbeitet bereits in diesen Bereichen und wir können davon ausgehen, dass viele Verbesserungen auf dem Weg sind.
Accentsconagua
Hintergrundfarbe Diese Eigenschaft stellt einen Fallback für Browser bereit, die keinen CSS-Farbverlauf unterstützen. Project Parfait ist bereits sehr gut darin, CSS für Textelemente zu generieren.
Es generiert perfekt numerische Schriftgewichtseinstellungen wie 100, 300, 900, dh wenn Sie in Photoshop eine Schriftgewichtstärke wie "Thin", "Light", "Black" usw. festlegen, wird der korrekte Wert in CSS ausgegeben um dieses Gewicht zu reflektieren.
Es eignet sich auch sehr gut zum Schätzen der Zeilenhöhe, berechnet als Wert relativ zur Schriftgröße des ausgewählten Textelements.
Wenn in einer Textzeile mehrere Stilarten vorhanden sind, werden beide erkannt und Sie erhalten zwei CSS-Ausgaben, von denen die eine dem Kommentar vorangestellt ist / * Inline Style * /.
Manchmal werden Ebenen übereinander gestapelt oder nur in geringem Abstand voneinander angeordnet, was die Auswahl über die visuelle Schnittstelle erschwert. Project Parfait bietet daher auch die Möglichkeit, Layer direkt über die Registerkarte "Layer" in der Seitenleiste auszuwählen:
Sobald Sie Ihre PSD importieren, erkennt Project Parfait alle im Design verwendeten Farben und gibt sie in der aus Farben Abschnitt der rechten Seitenleiste. Immer, wenn Sie ein Element ausgewählt haben, das eine dieser Farben verwendet, wird die Farbe in der Seitenleiste hervorgehoben:
Dies ist möglicherweise für Benutzer von Präprozessoren sehr nützlich, da die Farbwerte zu Beginn des Codierungsprozesses leicht als Variablen definiert und dann nach Bedarf im gesamten Design angewendet werden können.
Auf die gleiche Weise wie Project Parfait flache Farben erkennt, werden auch im Design verwendete Farbverläufe erkannt und stehen für einfaches Kopieren und Einfügen aus der rechten Seitenleiste zur Verfügung. Wie bei flachen Farben wird für jedes ausgewählte Element, das einen Farbverlauf verwendet, der entsprechende Farbverlauf in der Seitenleiste hervorgehoben:
Für Präprozessorbenutzer bietet dies eine praktische Möglichkeit, alle im Design verwendeten Gradienten zu erfassen, sodass sie als Mixins definiert werden können, um sie im Design problemlos wiederverwenden zu können.
Neben Farb- und Farbverlaufsinformationen bietet Project Parfait eine Übersicht aller auf dem Design verwendeten Schriftarten sowie der verwendeten Gewichte und Größen auf einen Blick.
Dies bedeutet, dass Sie in dem Moment, in dem Sie die PSD öffnen, wissen, welche Schriftarten und welche Varianten für die Schriftgewichtung Sie für die Integration in einem webfreundlichen Format benötigen. Sie haben auch die Möglichkeit, die Schriftgrößen als Präprozessor-Variablen zu speichern, falls Sie dies wünschen.
Wenn Sie direkt in Photoshop arbeiten, können Informationen über Breite, Höhe, Position und Abstand zwischen den Elementen eine schmerzhafte Erfahrung sein. Nicht so bei Project Parfait.
Um die Breite, Höhe und X / Y-Koordinaten eines Elements zu erhalten, klicken Sie einfach darauf und sehen Sie sich den blauen Aufruf an:
Halten Sie die Umschalttaste gedrückt und klicken Sie auf beide, um den Abstand zwischen zwei Elementen zu erhalten. Ein Display zeigt den horizontalen und vertikalen Abstand in Pixel an:
Momentan ist Project Parfait völlig kostenlos. Melden Sie sich einfach mit Ihrer Adobe-ID an, und schon kann es losgehen.
Wenn Sie ein Designer sind, der nach Verbesserungen in Ihrem Produktionsworkflow sucht, oder ein Entwickler, der einen einfacheren Weg von der PSD zum Code sucht, ist Project Parfait ein Muss für den Einstieg in die Webdesign-Szene.
