Share
Die neueste Version von Photoshop enthält einige großartige neue Funktionen, die die Aufmerksamkeit der Webdesigner auf sich ziehen werden. Sie können jetzt die Form und den Stil einer Ebene mit einem einzigen Klick in CSS konvertieren. In diesem Artikel erklären wir, wie das funktioniert. Lass uns einen Blick darauf werfen!
Diese neue Photoshop-Funktion, die wir uns ansehen werden, ist eine, über die ich mich sehr freue. Die Möglichkeit, Photoshop-Ebenenstile in CSS zu konvertieren, gibt es bereits seit einiger Zeit mit Tools von Drittanbietern, die jedoch nie direkt von der Stange sind. Webentwickler müssen ständig Photoshop-Grafiken in CSS3-basierte Live-Designs konvertieren. Abhängig von der Komplexität des Objekts kann dies einige Zeit in Anspruch nehmen.
Wäre es nicht schön, wenn Photoshop die Konvertierung für Sie übernehmen könnte? Gute Nachrichten: Jetzt kann es. Mal sehen, wie es funktioniert.
Beginnen wir mit dem Konvertieren einer einfachen Schaltfläche in Photoshop. Wie Sie sehen, habe ich mit einem einfachen Rechteck mit abgerundeten Ecken angefangen und dann einige Ebenenstile hinzugefügt. Zuerst habe ich eine Verlaufsüberlagerung verwendet. Als Nächstes verwende ich ein inneres Schatten-Set zum Überlagern, um ein schönes Highlight über die Oberseite zu setzen. Schließlich habe ich einen subtilen Schlagschatten erstellt.
Nun, da wir eine gute Vorstellung davon haben, wie die Schaltfläche in Photoshop erstellt wird, konvertieren wir sie in CSS. Hierfür gibt es zwei Möglichkeiten. Die erste besteht darin, die Ebene auszuwählen und zu gehen Ebene> CSS kopieren in der Menüleiste. Die andere Möglichkeit ist, mit der rechten Maustaste auf die Ebene zu klicken und die Option "CSS kopieren" aus dem angezeigten Menü auszuwählen. Dadurch wird der CSS-Code in unsere Zwischenablage kopiert, sodass wir ihn in unseren bevorzugten Code-Editor einfügen können.
Bevor wir das überprüfen, beachten Sie, dass ich meine Ebene "button" in Kleinbuchstaben benannt habe. Dies ist wichtig, da dies in unserem abschließenden Code in einen Klassennamen umgewandelt wird.
Wenn wir zu einem Code-Editor wechseln, können wir unseren Button-Code ausprobieren, um zu sehen, ob er funktioniert hat. Zuerst erstelle ich ein div in meiner HTML und gebe eine Klasse von "button". Jetzt gehe ich zum CSS und füge einfach den Code ein, den Photoshop in meiner Zwischenablage abgelegt hat.
.Taste
Grenzradius: 10px;
Hintergrundbild: -moz-linearer Gradient (90 Grad, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
Hintergrundbild: -webkit-linearer Gradient (90 Grad, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
Box-Schatten: 0px 5px 4px 0px rgb (0, 0, 0);
Position: absolut;
links: 249px;
oben: 245px;
Breite: 300px;
Höhe: 100px;
z-Index: 2;
Wie Sie sehen, wurde ein ziemlich großer Teil des Codes für uns geschrieben. Es sieht so aus, als ob Form und Farbe in unserer Photoshop-Version stimmen, aber nicht alles wurde erfolgreich kopiert.
Für den Anfang ist der Schlagschatten trotz der reduzierten Opazität in unserer Photoshop-Version vollständig deckend. Ich hätte erwartet, dass Photoshop RGBa verwendet, um diesen Effekt zu erzielen. Zusätzlich zu den Schattenproblemen wurde unser innerer Schatten einfach ignoriert, so dass es keine Hervorhebung am oberen Rand gibt.
Alles in allem haben wir jedoch einen guten Start. Photoshop hat uns einiges an Codierung erspart und sogar einige Browser-Präfixe hinzugefügt, um maximale Kompatibilität zu gewährleisten.
Zum Vergleich: Vergleichen Sie die neue integrierte Copy-CSS-Funktion von Photoshop mit einem kostenlosen Photoshop-Plugin namens CSS3Ps, das im Wesentlichen die gleiche Funktionalität verspricht.
Noch einmal, ich wähle meine Ebene aus, nur diesmal werde ich das CSS3Ps-Plugin verwenden. Dadurch wird eine Webseite gestartet, auf der ich zwanzig Jahre warten muss, um meine Ergebnisse zu sehen. Dies ist zwar sehr ärgerlich, aber sobald die Ergebnisse auftauchen, sind sie tatsächlich besser als die integrierte Photoshop-Funktion.
Wie Sie sehen können, ist in dieser Version sowohl das obere Highlight als auch die reduzierte Deckkraft des Box-Shadows vorhanden. Um die Dinge noch weiter auszudrücken, können Sie Ihre Ergebnisse in Sass erhalten, eine großartige Option, die ich in Zukunft in Photoshop sehen möchte.
Um dieses Update zu erhalten, können Kunden die folgenden Anweisungen befolgen.
Die Creative Cloud nicht verwenden? Sie können die Creative Cloud abonnieren und erhalten Zugriff auf all diese Updates sowie den Rest der Creative Suite für nur 49,99 $ / Monat.
Accentsconagua