Share
Projekt Parfait är ett nytt verktyg från Adobe, för närvarande i beta, vilket låter dig öppna upp PSD direkt i webbläsaren för att extrahera CSS, text och bildtillgångar från den. För tillfället fungerar det bara på Chrome men Adobe planerar att rulla ut det på alla webbläsare som utvecklingen fortsätter.
Att öppna en PSD i Project Parfait är super lätt. Gå bara till https://projectparfait.adobe.com/ och klicka på den stora blåen Ladda upp din egen PSD knappen i övre högra hörnet:
Sedan, efter att du loggat in med ditt Adobe-ID, drar du och släpper din PSD på det tomma panelen och det laddas upp för dig:
När uppladdningen är klar kan du klicka på miniatyrbilden på din PSD och den öppnas i Project Parfait för dig:
För att generera CSS för något element i din design klickar du bara på för att markera den då kommer den relevanta koden att visas i den högra sidofältet CSS Inspector fält. Härifrån kan du markera och kopiera elementen i koden du vill ha, eller klicka på Kopiera alla knapp:
Alternativt, med det valda elementet, kommer ett blått utrop att visas, där du kan klicka på Kopiera CSS länk för att få tag i all kod direkt:
Den blåa utrop som visas när ett element väljs kan också användas för att enkelt kopiera textinnehåll från en PSD genom att klicka på Kopiera text länk:
Att exportera bilder via Project Parfait är också enkelt. Börja med att välja den bild du vill exportera. Om den innehåller flera lager håller du ned Flytta och klicka på var och en för att välja flera. Klicka sedan på den nedåtriktade pekspilen på det blå samtalet och du får en Spara som rutan där du kan ange dina önskade bildnamn, format och kvalitetsinställningar:
När bilden är sparad kommer den att visas i Tillgångar fliken i den högra sidofältet, varifrån du kan klicka på bilden för att ladda ner den:
Projekt Parfait beta är friskt ut ur portarna och knappt en månad gammal, så det finns några aspekter av CSS-generationen som för närvarande inte stöds. Uppdateringsgraden har emellertid redan varit mycket snabb enligt medlemmarna i Project Parfait-forumet, så jag antar att Adobe-teamet redan arbetar på dessa områden och vi kan anta att många förbättringar är på väg.
Accentsconagua
bakgrundsfärg Egenskapen är inställd för att ge en återgång till webbläsare som inte stöder CSS-gradienten. Projekt Parfait gör redan ett bra jobb för att skapa CSS för textelement.
Det genererar numeriska teckensnittsviktinställningar som 100, 300, 900 perfekt, vilket betyder att om du anger en typsnitt som "Tunn", "Lätt", "Svart" och så vidare i Photoshop, kommer det korrekta värdet att matas ut i CSS för att återspegla denna vikt.
Det gör också ett mycket bra jobb med att uppskatta linjens höjd, beräknad som ett värde i förhållande till textstorleken för det valda textelementet.
Dessutom, om flera typer av styling existerar i en rad text kommer det att upptäcka dem båda och ge dig två massor av CSS-utdata, en prefaced med kommentaren / * Inline Style * /.
Ibland staplas skikten ovanpå varandra, eller placeras bara ett litet avstånd, vilket gör det svårt att välja dem via det visuella gränssnittet. Projektparfait ger därför möjlighet att välja lager direkt genom fliken "Lager" i sidofältet:
Så snart du importerar din PSD, kommer Project Parfait att identifiera alla färger som används i designen och mata ut dem i Färger del av höger sidofält. Dessutom, när du har valt ett element som använder en av dessa färger markeras färgen i sidofältet:
Detta är potentiellt mycket användbart för personer som använder preprocessorer, eftersom färgvärdena enkelt kan definieras som variabler vid kodprocessens början och sedan appliceras efter behov i hela designen.
På samma sätt som Project Parfait detekterar plana färger, det kommer också att upptäcka gradienter som har tillämpats i designen och gör dem tillgängliga för enkel kopiering och klistra in från höger sidofält. Som med plana färger, valda element som använder en lutning kommer att se motsvarande gradient markerad i sidofältet:
För preprocessoranvändare ger detta ett praktiskt sätt att ta alla de gradienter som används i konstruktionen så att de kan definieras som mixins för enkel återanvändning i designen.
Förutom färg- och lutningsinformation kommer Projekt Parfait också att ge dig en översiktlig sammanfattning av alla teckensnitt som används i konstruktionen, samt vikter och storlekar som används.
Det betyder det ögonblick du öppnar PSD du vet vilka teckensnitt och vilka typsnitt viktvarianter du behöver ta i webbvänligt format för integration. Du har också möjlighet att spara teckensnittsstorlekarna som preprocessorvariabler om du väljer.
När du arbetar direkt i Photoshop får du information om bredd, höjd, position och avstånd mellan element som kan vara en smärtsam upplevelse. Inte så med Project Parfait.
För att få bredden, höjden och X / Y-koordinaterna för ett element klickar du bara på det och tittar på det blå utropet:
För att få avståndet mellan två element håller du bara ned SHIFT och klickar på båda. En skärm visas som visar dig horisontellt och vertikalt avstånd i pixlar:
Just nu är Project Parfait helt gratis att använda, logga bara in med ditt Adobe ID och du är redo att gå.
Om du är en designer som letar efter förbättringar av ditt produktionsflöde eller en utvecklare som vill ha ett lättare sätt att gå från PSD till kod, är Project Parfait ett måste prova ny ankomst i webbdesignscenen.
