Share
Cea mai recentă construcție a Photoshop-ului are câteva noi caracteristici noi, care vor atrage atenția web designerilor. Acum puteți transforma forma și stilul unui strat în CSS cu un singur clic. În acest articol, vom explica cum funcționează acest lucru. Hai să aruncăm o privire!
Această nouă caracteristică Photoshop pe care o vom privi este una despre care sunt destul de entuziasmat. Abilitatea de a converti stilurile de straturi ale Photoshop în CSS a fost în jur de ceva timp prin intermediul unor instrumente ale unor terțe părți, dar nu a ieșit niciodată nativă din cutie. Dezvoltatorii web sunt în mod constant însărcinați cu transformarea operelor de artă Photoshop în live designuri CSS3. În funcție de complexitatea obiectului, acest lucru poate dura un timp serios.
Nu ar fi bine dacă Photoshop ar putea face conversia pentru tine? Vestea bună: acum se poate. Să vedem cum funcționează.
Pentru început, să încercăm să convertim un buton de bază în Photoshop. După cum puteți vedea, am început cu un dreptunghi simplu, cu colțuri rotunjite, apoi adaug unele stiluri de straturi. În primul rând, am folosit o suprapunere de gradient. Apoi, voi folosi o umbră interioară setată pentru a suprapune pentru a pune o lumină frumoasă în partea de sus. În cele din urmă, am creat o umbră subțire.
Acum că avem o idee decentă despre cum este construit butonul în Photoshop, să îl convertim în CSS. Există două modalități de a face acest lucru. Primul este să selectați stratul și să mergeți la Layer> Copiați CSS în bara de meniu. Cealaltă este să faceți clic dreapta pe strat și să selectați opțiunea "Copiere CSS" din meniul care apare. Acest lucru va copia codul CSS în clipboardul nostru, astfel încât să îl putem introduce în editorul nostru de cod preferat.
Înainte să mergem să verificăm asta, rețineți că mi-am denumit stratul "buton" în toate literele mici. Acest lucru este important deoarece acesta va fi convertit la un nume de clasă în codul nostru final.
Dacă mergem la un editor de cod, putem încerca codul butonului pentru a vedea dacă funcționează. În primul rând, voi crea un div în html-ul meu și îi dau o clasă de "buton". Acum, voi sari peste CSS și pur și simplu lipiți în codul pe care Photoshop l-a plasat în clipboard.
.butonul
raza de graniță: 10 pixeli;
fundal-imagine: -moz-linear-gradient (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
fundal-imagine: -webkit-gradient linear (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
box-shadow: 0px 5px 4px 0px rgb (0, 0, 0);
poziția: absolută;
stânga: 249px;
top: 245px;
lățime: 300px;
înălțime: 100px;
z-index: 2;
După cum puteți vedea, o bucată destul de mare de cod a fost scrisă pentru noi. Se pare că forma și culoarea sunt la fața locului cu versiunea noastră Photoshop, dar nu totul a fost copiat cu succes.
Pentru început, umbra picăturilor este la opacitate completă, în ciuda opacității reduse în versiunea noastră Photoshop. Aș fi așteptat ca Photoshop să utilizeze RGBa pentru a elimina acest efect. În plus față de problemele de umbră de umbră, umbra noastră interioară a fost pur și simplu ignorată, astfel încât nu există nici o evidențiere în partea de sus.
Cu toate acestea, suntem pe punctul de a începe. Photoshop ne-a salvat un pic de codificare și chiar am mers în plus pentru a include unele prefixe de browser pentru a asigura compatibilitatea maximă.
Doar pentru a compara, să comparăm noua caracteristică de copiere CSS încorporată a Photoshop-ului într-un plugin gratuit Photoshop numit CSS3Ps, care promite, în esență, aceeași funcționalitate.
Încă o dată, voi selecta stratul meu, doar de data asta voi lovi pluginul CSS3Ps. Aceasta lansează o pagină web în care trebuie să aștept 20 de ani pentru a-mi vedea rezultatele. Acest lucru este adesea foarte supărător, dar odată ce rezultatele au apărut, sunt de fapt mai bune decât funcția Photoshop încorporată.
După cum puteți vedea, în această versiune sunt prezente atît elementele de vârf, cît și opacitatea redusă a umbrei. Pentru a face lucrurile mai departe, puteți obține rezultatele dvs. în Sass, o opțiune grozavă pe care aș dori să o văd din Photoshop pe viitor.
Pentru a obține această actualizare, clienții pot urma următoarele instrucțiuni.
Nu folosiți cloudul creativ? Vă puteți abona la Cloud Creative și puteți avea acces la toate aceste actualizări, precum și la restul aplicației Creative Suite, pentru doar 49,99 RON / lună.
Accentsconagua