Das Konvertieren von Photoshop-Mockups in Live-Webcode ist unter Webdesignern eine weit verbreitete Praxis. Wir haben das alles schon eine Million Mal von Hand gemacht, also ist es ziemlich aufregend, wenn wir Lösungen sehen, die uns helfen, diesen Prozess zu automatisieren.
Die neueste Version von Creative Cloud Photoshop CS6 verfügt über eine integrierte Funktion zum Konvertieren von Photoshop-Styles in CSS. Wenn Sie eine andere Lösung benötigen, gibt es zwei solide Erweiterungen, die Sie auschecken können. Heute werden wir die Ergebnisse aller drei Methoden vergleichen: Photoshop, CSS3Ps und CSSHat, um zu sehen, welche der besten ist.
Unsere drei Kandidaten
In diesem Artikel werden die Ergebnisse von drei verschiedenen Methoden zum Erreichen des gleichen Ziels verglichen. Wir haben ein Design in Photoshop und möchten, dass es in HTML und CSS integriert ist.
Zu unseren drei Methoden gehören Photoshop selbst (Version 13.1) sowie die beiden Erweiterungen CSS3Ps und CSSHat. Ich habe kürzlich einen Screencast für Psdtuts + erstellt, der Photoshop und CSS3Ps vorstellt und einen Vergleich vornimmt, den Sie hier finden können.
In diesem Tutorial habe ich jedoch nicht die Layer-Gruppenfunktionalität behandelt. Daher dachte ich, dass es einen weiteren Versuch wert war, und entschied mich auch, CSSHat zu werfen, sodass wir die Grundlagen wirklich gut abdecken.
Unser Testfall
Wir benötigen etwas, um die verschiedenen Konvertierungsmethoden zu testen. Daher habe ich ein generisches UI-Bedienfeld erstellt, das alles enthalten kann, was Sie möchten:
Diese besteht im Wesentlichen aus drei verschiedenen Ebenen: der Textebene, der oberen Leiste und dem Hintergrund. Hier habe ich sie etwas getrennt, so dass Sie eine Vorstellung davon bekommen, wie sie gebaut wurden.
Nachfolgend können Sie einen Blick auf unsere Ebenenpalette werfen. Beachten Sie, dass dieses Objekt sehr absichtlich strukturiert ist. Alle drei Methoden, die wir heute betrachten, konvertieren Ebenennamen in CSS in Klassennamen. Sie möchten also sicher sein, dass Sie sehr sorgfältig darauf achten, wie Sie Ihre verschiedenen Teile benennen. Beachten Sie auch, dass die Formen aus Vektorform-Layern bestehen.
Einige der Methoden, die wir ausprobieren, unterstützen Layer-Gruppen. Das heißt, wir möchten die Struktur hier in eine div-Struktur in unserem HTML-Code konvertieren.
HTML
Photoshop kann sich um CSS kümmern, aber wir sind mit HTML immer noch alleine. Hier ist ein kurzer Versuch einer HTML-Struktur, die mit dem Code arbeitet, den Photoshop generieren wird. Ohne dies in Ihrem HTML wird das CSS nichts tun!
Photoshop
Beginnen wir mit der in Photoshop integrierten Funktionalität. Der Prozess hier ist extrem einfach. Alles was wir tun müssen, ist unsere Ebenengruppe im Ebenenbedienfeld auszuwählen und zu gehen Ebene> CSS kopieren (Sie können auf diesen Befehl auch mit einem Rechtsklick zugreifen).
Photoshop bietet so gut wie keine Rückmeldung, dass an diesem Punkt etwas passiert ist. Es gibt keine Optionen zum Optimieren, keine zu inspizierenden Bereiche, sondern nur den Menübefehl, den wir oben angeklickt haben. Dadurch wird ein großer Teil des Codes in die Zwischenablage eingefügt. Hier ist die Ausgabe, direkt aus Photoshop.
Das Ergebnis
Wenn wir dies in einen Code-Editor werfen und das Ergebnis betrachten, sind die Ergebnisse etwas entmutigend. Photoshop hat mit der Konvertierung keinen guten Job gemacht. Für den Anfang hat die obere Leiste keine abgerundeten Ecken. Außerdem scheint der Schatten die volle Deckkraft (zu dunkel) zu haben, und die Platzierung des Typs ist deaktiviert. Wenn wir einen starken Start haben und wirklich viel Zeit sparen, ist dies wahrscheinlich nicht die magische Lösung, die Sie sich von Photoshop erhofft haben.
Sehen Sie es live: Klicken Sie hier
Um es noch schlimmer zu machen, wenn wir zurückspringen und den Code betrachten, gibt es viel zu beanstanden. Es gibt einige wirklich ungewöhnliche Dinge, wie zum Beispiel die unnötige Transformation des Textes. Es scheint, dass du können Lassen Sie Photoshop CSS für Sie schreiben, aber ich bin nicht überzeugt, dass Sie dies tun sollten.
CSS3Ps
Unser nächster Kandidat ist CSS3Ps, ein komplett kostenloses Photoshop-Plugin, das vor der integrierten Photoshop-Funktionalität lag. Die Website zeigt einige ziemlich komplexe Beispiele, so dass dies hoffentlich unser Projekt etwas besser angehen wird.
Wenn die Erweiterung CSS3Ps installiert ist, gehen Sie zu Fenster> Erweiterungen> CSS3Ps. Wählen Sie dann die Ebenengruppe aus und klicken Sie auf das Logo, das im CSS3Ps-Bedienfeld angezeigt wird.
Wenn Sie diese Taste drücken, wird eine Webseite geöffnet und ein Timer angezeigt. Sie müssen zwanzig Sekunden warten und schauen sich eine Anzeige an, die scheiße ist, aber wenn die Erweiterung kostenlos ist, ist das verständlich.
Von hier aus gelangen Sie zu einer Seite mit dem Code, den ich unten kopiert und eingefügt habe. Beachten Sie, dass ich dieses Mal Punkte vor den Klassennamen einfügen musste. CSS3Ps übernimmt den Ebenennamen genau so, wie er in Photoshop angezeigt wird. oder ?#? dort Symbole.
Das Ergebnis
Die Ausgabe von CSS3Ps bietet eine Menge zu mögen. Für den Anfang behandelt es jede einzelne Ebene als eigenes Objekt und versucht nicht, sie übereinander zu positionieren. Ich bevorzuge das und ziehe immer sofort den absoluten Positionscode heraus, den die integrierte Methode verwendet. Dadurch bleibt der Fokus der Konvertierung dort, wo sie sein sollte: auf den Stil.
Sehen Sie es live: Klicken Sie hier
Apropos Stil, die Ergebnisse in diesem Bereich werden ebenfalls verbessert. Beachten Sie, dass die obere Leiste dieses Mal tatsächlich einen Grenzradius hat und wie der Box-Schatten einen Alpha-Wert verwendet, um die Deckkraft zu verringern. Diese Version ist möglicherweise ein kleines Präfix mit vielen Dingen, für die keine Präfixe mehr erforderlich sind, aber ansonsten ist der Code nicht halbwegs schlecht.
Die Tatsache, dass Sie die Ausgabe in Sass oder SCSS umformatieren können, ist eine Killer-Funktion, die diese Methode leicht besser macht als die standardmäßige Photoshop-Funktion.
CSSHat
Die dritte und letzte Methode, die wir auschecken werden, ist CSSHat. Wie bei CSS3Ps handelt es sich um eine Photoshop-Erweiterung, bei der Sie jedoch etwa 30 US-Dollar erhalten.
Um CSSHat zu verwenden, wählen Sie einfach die Ebene aus, die Sie konvertieren möchten, und öffnen Sie das CSSHat-Bedienfeld (finden Sie es im Erweiterungsmenü wie oben bei CSS3P). Leider unterstützt CSSHat derzeit keine Layer-Gruppen. Daher müssen Sie dies für jede einzelne Ebene tun. Dies ist ein schwerer Schlag gegen CSSHat, aber es macht seine Vielseitigkeit wett.
Ich finde es toll, dass ich endlich einige Optionen zum Tweak habe. Die anderen beiden Methoden waren einfach, aber wenn Sie etwas nicht mögen, ist es hart! Hier kann ich vier verschiedene Optionen umschalten: Kommentarerklärungen, Browser-Präfixe, Ebenendimensionen und ob der Code in eine nach der Ebene benannte Regel geschrieben wird oder nicht.
Beachten Sie auch, dass Sie die Ausgabe in einer beeindruckenden Vielfalt von Formaten erhalten können: CSS, SCSS, Sass, LESS, Stylus und Stylus CSS. Hier ist die Ausgabe für die einfache CSS-Version:
Das Ergebnis
Wie Sie oben sehen können, ist der Codeabschnitt dieses Mal ziemlich groß, hauptsächlich aufgrund der Tatsache, dass der Verlauf in eine Daten-URL konvertiert wird. Unten sehen Sie das Ergebnis, wenn Sie direkt in unseren Code-Editor einfügen.
Sehen Sie es live: Klicken Sie hier
Wie Sie sehen, sind die Elemente, genau wie bei CSSPs, lediglich stilisiert, nicht positioniert, wir müssen sie selbst in Position bringen. In dieser Hinsicht sehen die Stile mit Ausnahme des winzigen Texts perfekt aus. Ich nehme an, dass dies mit der Tatsache zusammenhängt, dass ich die Photoshop-Version auf einem Retina-Bildschirm erstellt habe, so dass dieser Fehler möglicherweise nicht auftritt (CSS3Ps haben tatsächlich dasselbe gemacht).
Wer gewinnt?
Ich empfehle CSSHat und CSS3Ps über das, was Sie in Photoshop 13.1 erhalten.Keine der oben beschriebenen Methoden zum Konvertieren von Photoshop-Styles in CSS ist perfekt. Die Photoshop-Version funktioniert, aber der Code ist ziemlich hässlich und die Ergebnisse verwenden nicht die fortschrittlichen CSS3-Techniken, die Sie benötigen, um beispielsweise Deckkraft und komplexe Grenzradius-Setups anzupassen. CSS3Ps ist kostenlos und funktioniert besser als Photoshop, aber die Methode, eine Webseite aufzurufen, die sich hinter einer Verzögerung von zwanzig Sekunden verbirgt, ist ziemlich ärgerlich.
CSSHat ist das Beste in Sachen Anpassung, aber es werden keine Layer-Gruppen unterstützt. Die standardmäßige Photoshop-Methode ist die einzige, die Ihre mehreren Objekte in einer Weise positioniert, die Ihrer Leinwand entspricht. Dies kann eine gute oder schlechte Sache sein (ich wünschte, es wäre eine optionale Funktion). Letztendlich gibt Ihnen nichts die Genauigkeit, Leistung und Vielseitigkeit der manuellen Codierung, aber diese Tools können Sie zu einem guten Start verhelfen und Ihnen viel Zeit sparen.
Ich persönlich neige dazu, CSSHat in dieser Gruppe zu bevorzugen. Es ist ein wenig teuer, aber die Funktionalität ist hervorragend. Es ist ehrlich gesagt viel näher an dem, was ich von Adobe sehen wollte. Ich denke, dass sie bei diesem Feature wirklich den Ball verloren haben, und ich empfehle sowohl CSSHat als auch CSS3Ps über das, was Sie in Photoshop 13.1 erhalten.
Was denkst du?
Nun, da Sie meine Einschätzung dieser drei Tools gesehen haben, ist es Zeit für Sie, mitzumachen. Welche der oben genannten Methoden haben Sie versucht? Was denkst du ist das Beste? Lass es uns in den Kommentaren wissen!