Share
Proiectul Parfait este un instrument nou de la Adobe, în prezent în beta, care vă permite să deschideți orice PSD direct în browser pentru a extrage CSS, documente text și imagini din acesta. În prezent, funcționează numai în Chrome, dar Adobe intenționează să-l extindă în toate browserele pe măsură ce dezvoltarea se mișcă.
Deschiderea unui PSD în cadrul proiectului Parfait este foarte ușoară. Accesați https://projectparfait.adobe.com/ și faceți clic pe albastrul mare Încărcați propriul PSD butonul din colțul din dreapta sus:
Apoi, după ce v-ați conectat cu ID-ul dvs. Adobe, trageți și plasați PSD-ul în zona cu panou gol și se va încărca pentru dvs.:
Când încărcarea este completă, puteți face clic pe miniatură din PSD și se va deschide în Project Parfait pentru dvs.:
Pentru a genera CSS pentru orice element din design, trebuie doar să faceți clic pentru ao selecta, apoi codul relevant va fi afișat în bara laterală dreaptă Inspectorul CSS camp. De aici puteți evidenția și copia elementele codului dorit sau faceți clic pe Copiați toate buton:
Alternativ, cu elementul selectat, va apărea un apel albastru, pe care puteți face clic pe Copiați CSS link-ul pentru a apuca tot codul direct:
Apelul albastru care apare atunci când este selectat un element poate fi de asemenea utilizat pentru a copia cu ușurință conținutul text dintr-un PSD făcând clic pe Copiază textul legătură:
Exportul de imagini prin intermediul proiectului Parfait este de asemenea simplu. Începeți prin selectarea imaginii pe care doriți să o exportați. Dacă cuprinde mai multe straturi, țineți apăsat Schimb și faceți clic pe fiecare pentru a selecta multiplă. Apoi dați clic pe săgeata indicând în jos pe apelul albastru și veți obține o Salvează ca unde puteți introduce numele preferat al imaginii, formatul și setările de calitate:
După ce imaginea este salvată, va apărea în bunuri din bara laterală dreaptă, de unde puteți face clic pe imagine pentru al descărca:
Proiectul Parfait beta este proaspăt afară din porți și abia la o lună, deci există câteva aspecte ale generației CSS care în prezent nu sunt suportate. Cu toate acestea, rata actualizărilor a fost deja foarte rapidă, în funcție de membrii forumului Proiectul Parfait, așa că am ghicit că echipa Adobe lucrează deja în aceste domenii și putem presupune că multe dintre îmbunătățirile sunt pe drum.
Accentsconagua
culoare de fundal proprietatea este setată pentru a oferi o rezervă pentru browserele care nu acceptă gradientul CSS. Proiectul Parfait are deja o treabă excelentă în generarea de CSS pentru elemente de text.
Aceasta generează setări numerice de greutate a fonturilor, cum ar fi 100, 300, 900 perfect, ceea ce înseamnă că dacă setați o greutate a fontului, cum ar fi "Thin", "Light", "Black" și așa mai departe în Photoshop, valoarea corectă va fi afișată în CSS pentru a reflecta această greutate.
De asemenea, face o treabă foarte bună de estimare a înălțimii liniei, calculată ca o valoare relativă la mărimea fontului elementului text selectat.
În plus, dacă există mai multe tipuri de stil într-o singură linie de text, acestea le vor detecta pe ambele și vă vor da două loturi de ieșire CSS, una prefață cu comentariul / * Stil inline * /.
Uneori, straturile sunt stivuite unul peste celălalt sau plasate doar la o distanță mică, ceea ce face dificilă selectarea acestora prin intermediul interfeței vizuale. Proiectul Parfait oferă de asemenea posibilitatea de a selecta straturile direct prin fila "Straturi" din bara laterală:
Imediat ce importați PSD-ul, Project Parfait va identifica toate culorile folosite în proiectare și le va scoate în colorate secțiune din bara laterală dreaptă. În plus, ori de câte ori aveți selectat un element care utilizează una dintre aceste culori, culoarea va fi evidențiată în bara laterală:
Acest lucru este potențial foarte util pentru persoanele care folosesc preprocesoare, deoarece valorile culorilor pot fi ușor definite ca variabile la începutul procesului de codificare și apoi aplicate după cum este necesar pe parcursul întregului proiect.
În același mod în care proiectul Parfait detectează culori plane, va detecta, de asemenea, gradiente care au fost aplicate în proiectare și le va pune la dispoziție pentru a copia și lipi ușor de pe bara laterală dreaptă. Ca și în cazul culorilor plane, orice element selectat care utilizează un gradient va vedea gradientul corespunzător evidențiat în bara laterală:
Pentru utilizatorii de preprocesor, aceasta oferă o modalitate la îndemână de a apuca toate gradientele utilizate în proiectare, astfel încât acestea să poată fi definite ca mixuri pentru reutilizarea ușoară în proiectare.
Pe lângă informațiile referitoare la culoare și gradient, proiectul Parfait vă va oferi un rezumat "la scurt" al tuturor fonturilor utilizate în proiectare, precum și greutățile și dimensiunile utilizate.
Aceasta înseamnă că, în momentul în care deschideți PSD, știți ce fonturi și ce variante de greutate a fontului trebuie să le luați în format prietenos pentru integrare. Aveți, de asemenea, opțiunea de a salva dimensiunile de fonturi ca variabile de preprocesor pe care le alegeți.
Când lucrați direct în Photoshop obținerea de informații despre lățimea, înălțimea, poziția și distanța dintre elemente pot fi o experiență dureroasă. Nu cu Proiectul Parfait.
Pentru a obține coordonatele lățimii, înălțimii și X / Y a unui element, faceți clic pe el și priviți la apelul albastru:
Pentru a obține distanța dintre două elemente, țineți apăsat SHIFT și faceți clic pe amândouă. Se va afișa un afișaj care vă arată distanța orizontală și verticală în pixeli:
Acum, proiectul Parfait este complet gratuit, doar conectați-vă cu ID-ul dvs. Adobe și sunteți gata să mergeți.
Dacă sunteți un designer care caută îmbunătățiri în fluxul de producție sau un dezvoltator care dorește o modalitate mai ușoară de a merge de la PSD la cod, Project Parfait trebuie să încerce o nouă sosire în scena de design web.
