Quick Tips: Konvertering Photoshop filer til kode med Prosjekt Parfait
Prosjekt Parfait er et nytt verktøy fra Adobe, for tiden i beta, som lar deg åpne opp noen PSD direkte i leseren for å trekke CSS, tekst- og bilde eiendeler fra det. I øyeblikket det fungerer bare på Chrome, men Adobe planlegger å rulle den ut i alle nettlesere som utviklingen går videre
Drag &.; Drop laste opp
Åpning opp en PSD i Project Parfait er super lett. Bare gå til http://projectparfait.adobe.com/og klikk den store blå Last opp ditt eget PSD
knappen øverst i høyre hjørne:
Så, etter å ha logget inn med din Adobe-ID dra og slipp PSD på den tomme panel området og det vil laste opp for deg:
Når opplastingen er fullført, kan du klikke på miniatyrbildet for PSD og det vil åpne opp i Project Parfait for deg:
CSS Utvinning
for å generere CSS for ethvert element i design klikker du bare å velge det da den aktuelle koden vil bli vist i høyre sidebar CSS Inspector
feltet. Herfra kan du markere og kopiere elementer i koden du ønsker, eller klikk på Kopier alle
knapp:
Alternativt med elementet valgt, en blå samtale ut vises, på hvilke du kan klikke på Kopier CSS
lenken for å fange all koden direkte:
Tekst Utvinning
den blå samtale ut som vises når et element er valgt kan også brukes til å enkelt kopiere tekst innhold fra en PSD ved å klikke på Kopier tekst
link:
Bilde Extraction
Eksportere bilder via Prosjekt Parfait er også grei. Begynn med å velge bildet du vil eksportere. Hvis det omfatter flere lag hold nede Skift Hotell og klikk hver til multivalg. Klikk deretter nedover peker pilen på blå ringe ut og du får en Lagre som
boks hvor du kan velge dine ønskede bildenavn, format og kvalitetsinnstillinger:
Når bildet er lagret det vises i Eiendeler
kategorien i høyre sidebar , hvor du kan klikke på bildet for å laste det ned:
aspekter fortsatt på vei
Prosjekt Parfait beta er frisk ut av portene og knapt en måned gammel, så er det noen aspekter av CSS generasjon som er i dag ikke støttes. Imidlertid har frekvensen av oppdateringer allerede vært veldig rask i henhold til medlemmer av prosjektet Parfait forum, så jeg gjetter Adobe lag er allerede arbeider på disse områdene, og vi kan anta mange forbedringer er på vei.
Gjennomsiktighet innstillingene som brukes for et lag i dag håndteres ved å sette en RGBA verdi for bakgrunnsfargen. Alfakanalen til bakgrunnsfargen brukes til å sette opacity snarere enn en faktisk opacity verdi sendes ut for hele element, noe som betyr grenser, skygger og så videre vil være upåvirket.
Borders satt via lagstiler er ikke påvist. Men kantlinjer satt via Levende Shape Properties
blir plukket opp.
Aspekter som er utmerket Allerede
Tekst CSS Generation
Prosjekt Parfait allerede gjør en god jobb i å generere CSS for tekstelementer.
Det genererer numeriske font vekt innstillinger som 100, 300, 900 perfekt, noe som betyr at hvis du setter en skrift vekt som "tynn", "Lys", "Black" og så videre i Photoshop, vil den riktige verdien sendes ut i CSS til reflektere den vekten.
det gjør også en veldig god jobb med å estimere linjehøyde, beregnes som en verdi i forhold til skriftstørrelsen for den valgte teksten element.
I tillegg, hvis flere typer styling eksistere i en tekstlinje vil oppdage dem begge og gir deg to massevis av CSS-utgang, en innledet med kommentaren /* Inline Style * /.
Layer Utvalg
Noen ganger lagene er stablet oppå hverandre, eller plassert bare en liten avstand fra hverandre, noe som gjør det vanskelig å velge dem via det visuelle grensesnittet. Prosjekt Parfait gir derfor også muligheten til å velge lag direkte gjennom "Layers" fanen i sidepanelet:
Trekke ut en fargepalett
Så snart du importere PSD, prosjektet Parfait vil identifisere alle fargene som brukes i design og utgang dem i farger
delen av høyre sidepanelet. I tillegg, når du har et element valgt som bruker en av disse fargene, fargen vil bli markert i sidepanelet:
Dette er potensielt svært nyttig for folk som bruker preprocessors, som fargeverdiene kan enkelt defineres som variabler på starten av koding prosessen og deretter brukt etter behov gjennom hele design.
Identifisere Gjenbruk Gradient Styles
på samme måte som prosjekt Parfait oppdager flate farger det vil også oppdage gradienter som har blitt brukt i design og gjøre dem tilgjengelig for enkel kopiere og lime inn fra høyre sidepanelet. Som med flate farger, vil noen utvalgte element som bruker en gradient se tilsvarende gradient markert i sidepanelet:
For preprosessor brukere dette gir en praktisk måte å ta alle gradienter som brukes i design, slik at de kan være definert som mixins for enkel gjenbruk i utformingen.
med et raskt blikk Font oppsummering
i tillegg til farge og gradient informasjon Prosjekt Parfait vil også gi deg en 'på et øyeblikk' oppsummering av alle skriftene som brukes i design, samt vekt og størrelse brukes.
Dette betyr det øyeblikket du åpner opp PSD du vet hvilke skrifter og hvilke skrift vekt varianter du trenger å ta i web format for integrasjon. Du har også muligheten til å lagre ut skriftstørrelser som preprosessor variabler bør du velge.
Komme Layout Informasjon
Når du arbeider direkte i Photoshop får informasjon om bredde, høyde, posisjon og avstand mellom elementene kan være litt av en smertefull opplevelse. Ikke så med Project Parfait
For å få bredde, høyde og X /Y-koordinater av et element bare klikk på den og se på den blå utrykningen.
For å få avstanden mellom to elementer bare holde nede SKIFT og klikke dem begge. En skjerm vises som viser deg den horisontale og vertikale avstanden i piksler:
Prosjekt Parfait er gratis, gi den en virvel
Akkurat nå Prosjekt Parfait er helt gratis å bruke, bare logge deg på med din Adobe-ID, og du er klar til å gå.
Hvis du er en designer som er på utkikk etter forbedringer i produksjonen arbeidsflyt, eller en utvikler som ønsker en enklere vei å gå fra PSD til kode, er prosjektet Parfait en må prøve ny ankomst i webdesign scenen.