Share
Prosjekt Parfait er et nytt verktøy fra Adobe, for øyeblikket i beta, som lar deg åpne noen PSD direkte i nettleseren for å trekke ut CSS, tekst og bildeaktiver fra den. For øyeblikket fungerer det bare på Chrome, men Adobe planlegger å rulle det ut over alle nettlesere når utviklingen går videre.
Å åpne opp en PSD i Project Parfait er super enkelt. Bare gå til https://projectparfait.adobe.com/ og klikk den store blåen Last opp din egen PSD knappen øverst til høyre:
Deretter, etter å ha logget deg inn med Adobe ID-en, dra og slipp din PSD på det tomme panelområdet, og det lastes opp for deg:
Når opplastingen er fullført, kan du klikke på miniatyrbildet på PSD-en din og den åpnes i Project Parfait for deg:
For å generere CSS for ethvert element i designet, klikker du bare for å velge det, og den aktuelle koden vil bli vist i høyre sidelinje CSS Inspector felt. Herfra kan du markere og kopiere elementene til koden du vil ha, eller klikk på Kopier alt knapp:
Alternativt, med det valgte elementet, vises en blå utringing, som du kan klikke på Kopier CSS lenke for å hente all koden direkte:
Den blå utkallingen som vises når et element er valgt, kan også brukes til å enkelt kopiere tekstinnhold fra en PSD ved å klikke på Kopier tekst link:
Det er også enkelt å eksportere bilder via Project Parfait. Begynn med å velge bildet du vil eksportere. Hvis det består av flere lag, hold nede Skifte og klikk hver for å velge flere. Deretter klikker du nedover pekepilen på det blå anropet, og du får en Lagre som boks der du kan legge inn dine foretrukne bilde navn, format og kvalitet innstillinger:
Etter at bildet er lagret, vises det i Eiendeler fanen i høyre sidefelt, der du kan klikke på bildet for å laste det ned:
Prosjekt Parfait beta er frisk ut av portene og knapt en måned gammel, så det er noen aspekter av CSS generasjon som for tiden ikke støttes. Imidlertid har oppdateringsgraden allerede vært veldig rask i henhold til medlemmer av Prosjekt Parfait-forumet, så jeg antar at Adobe-teamet allerede jobber på disse områdene, og vi kan anta at mange forbedringer er på vei.
Accentsconagua
bakgrunnsfarge Egenskapen er satt til å gi en tilbakebetaling for nettlesere som ikke støtter CSS-gradienten. Prosjekt Parfait gjør allerede en god jobb med å generere CSS for tekstelementer.
Det genererer numeriske skrifttypevektsinnstillinger som 100, 300, 900 perfekt, noe som betyr at hvis du angir en skriftvekt som "Tynn", "Lys", "Svart" og så videre i Photoshop, vil den riktige verdien bli utført i CSS å reflektere den vekten.
Det gjør også en veldig god jobb med å estimere linjens høyde, beregnet som en verdi i forhold til skriftstørrelsen til det valgte tekstelementet.
I tillegg, hvis flere typer styling eksisterer i en linje med tekst, vil den oppdage dem begge og gi deg to mange CSS-utganger, en prefaced med kommentaren / * Inline Style * /.
Noen ganger lages lagene ovenpå hverandre, eller plasseres bare en liten avstand fra hverandre, noe som gjør det vanskelig å velge dem via det visuelle grensesnittet. Prosjektparfait gir derfor også muligheten til å velge lag direkte gjennom "Lag" -fanen i sidefeltet:
Så snart du importerer PSD, vil Project Parfait identifisere alle fargene som brukes i designen og sende dem ut i Farger del av høyre sidefelt. I tillegg, når du har valgt et element som bruker en av disse fargene, vil fargen bli uthevet i sidefeltet:
Dette er potensielt svært nyttig for folk som bruker preprosessorer, da fargeværdiene lett kan defineres som variabler ved starten av kodingsprosessen og deretter påføres etter behov gjennom hele designet.
På samme måte som Project Parfait oppdager flade farger, vil det også oppdage gradienter som har blitt brukt i designet og gjør dem tilgjengelige for enkel kopiering og liming fra høyre sidefelt. Som med flade farger, vil hvert valgt element som bruker en gradient, se den tilsvarende gradienten som er markert i sidefeltet:
For preprocessorbrukere gir dette en praktisk måte å ta tak i alle gradienter som brukes i designet slik at de kan defineres som mixins for enkel gjenbruk i design.
I tillegg til farge- og gradientinformasjon, vil Project Parfait også gi deg et oversikt over alle fonter som brukes i designet, samt de anvendte vekter og størrelser.
Dette betyr at øyeblikket du åpner PSDen du vet hvilke skrifttyper og hvilke skrifttypevektsvarianter du må ta i webvennlig format for integrasjon. Du har også mulighet til å lagre skriftstørrelsene som preprosessvariabler hvis du velger.
Når du jobber direkte i Photoshop, får du informasjon om bredde, høyde, posisjon og avstand mellom elementer som en smertefull opplevelse. Ikke så med Project Parfait.
For å få bredden, høyden og X / Y-koordinatene til et element klikker du bare på det og ser på det blå utropet:
For å få avstanden mellom to elementer, hold bare SHIFT nede og klikk på begge. En skjerm vises som viser deg horisontal og vertikal avstand i piksler:
For øyeblikket er Project Parfait helt gratis å bruke, bare logg inn med din Adobe ID, og du er klar til å gå.
Hvis du er en designer som ser etter forbedringer av produksjons arbeidsflyten din, eller en utvikler som vil ha en enklere måte å gå fra PSD til kode, er Project Parfait et must, prøve ny ankomst i webdesignscenen.
