Share
Project Parfait è un nuovo strumento di Adobe, attualmente in versione beta, che consente di aprire qualsiasi PSD direttamente nel browser per estrarre risorse CSS, testo e immagini da esso. Al momento funziona solo su Chrome, ma Adobe prevede di implementarlo su tutti i browser con lo sviluppo.
Aprire un PSD in Project Parfait è semplicissimo. Basta andare su https://projectparfait.adobe.com/ e fare clic sul grande blu Carica il tuo PSD pulsante nell'angolo in alto a destra:
Quindi, dopo aver effettuato l'accesso con il tuo ID Adobe, trascina e rilascia il tuo PSD nell'area del pannello vuota e verrà caricato per te:
Quando il caricamento è completo, puoi fare clic sulla miniatura del tuo PSD e questo si aprirà in Project Parfait per te:
Per generare CSS per qualsiasi elemento del tuo disegno fai clic per selezionarlo, quindi il codice pertinente verrà visualizzato nella barra laterale destra Ispettore CSS campo. Da qui puoi evidenziare e copiare gli elementi del codice che desideri o fare clic su Copia tutto pulsante:
In alternativa, con l'elemento selezionato, verrà visualizzata una chiamata blu, sulla quale è possibile fare clic su Copia CSS link per afferrare tutto il codice direttamente:
La chiamata blu che appare quando un elemento è selezionato può anche essere usata per copiare facilmente il contenuto del testo da un PSD facendo clic su Copia testo link:
Anche esportare le immagini tramite Project Parfait è semplice. Inizia selezionando l'immagine che desideri esportare. Se comprende più strati tenere premuto Cambio e fare clic su ciascuno per selezionare più volte. Quindi fai clic sulla freccia rivolta verso il basso sulla chiamata blu e otterrai a Salva come casella in cui è possibile inserire il nome dell'immagine preferito, il formato e le impostazioni di qualità:
Dopo che l'immagine è stata salvata, apparirà nel Risorse scheda della barra laterale destra, da cui è possibile fare clic sull'immagine per scaricarla:
Project Parfait beta è appena uscito dai cancelli e appena un mese fa, quindi ci sono alcuni aspetti della generazione di CSS che attualmente non sono supportati. Tuttavia, il tasso di aggiornamenti è già stato molto veloce secondo i membri del forum Project Parfait, quindi immagino che il team di Adobe stia già lavorando su queste aree e possiamo presumere che molti miglioramenti sono in arrivo.
Accentsconagua
colore di sfondo la proprietà è impostata per fornire un fallback per i browser che non supportano il gradiente CSS. Project Parfait fa già un ottimo lavoro nella generazione di CSS per gli elementi di testo.
Genera perfettamente impostazioni di peso dei caratteri numerici come 100, 300, 900, il che significa che se si imposta un peso del font come "Thin", "Light", "Black" e così via in Photoshop, il valore corretto verrà emesso in CSS per riflettere quel peso.
Fa anche un ottimo lavoro di stima dell'altezza della linea, calcolato come valore relativo alla dimensione del carattere dell'elemento di testo selezionato.
Inoltre, se esistono più tipi di stili in una riga di testo, li rileverà entrambi e fornirà due lotti di output CSS, uno con il commento / * Stile in linea * /.
A volte, i livelli sono impilati uno sopra l'altro o posizionati solo a una piccola distanza, rendendo difficile selezionarli tramite l'interfaccia visiva. Project Parfait offre quindi la possibilità di selezionare i livelli direttamente attraverso la scheda "Livelli" nella barra laterale:
Appena si importa il PSD, Project Parfait identificherà tutti i colori utilizzati nel progetto e li stamperà nel Colori sezione della barra laterale destra. Inoltre, ogni volta che viene selezionato un elemento che utilizza uno di questi colori, il colore verrà evidenziato nella barra laterale:
Questo è potenzialmente molto utile per le persone che usano i preprocessori, poiché i valori dei colori possono essere facilmente definiti come variabili all'inizio del processo di codifica e quindi applicati secondo necessità durante tutto il progetto.
Più o meno allo stesso modo in cui Project Parfait rileva i colori piatti, rileverà anche i gradienti che sono stati applicati nel disegno e li renderà disponibili per una facile copia e incolla dalla barra laterale destra. Come per i colori piatti, qualsiasi elemento selezionato che utilizza una sfumatura vedrà il gradiente corrispondente evidenziato nella barra laterale:
Per gli utenti del preprocessore questo offre un modo pratico per afferrare tutti i gradienti utilizzati nel disegno in modo che possano essere definiti come mixin per un facile riutilizzo nel design.
Oltre a informazioni su colori e sfumature, Project Parfait ti fornirà anche un riepilogo "a colpo d'occhio" di tutti i font utilizzati nel design, nonché dei pesi e delle dimensioni utilizzati.
Ciò significa che nel momento in cui apri il PSD, sai quali tipi di carattere e quali varianti di peso del font devi utilizzare nel formato web friendly per l'integrazione. Hai anche la possibilità di salvare le dimensioni del carattere come variabili del preprocessore dovresti scegliere.
Quando lavori direttamente in Photoshop, ottenere informazioni sulla larghezza, l'altezza, la posizione e la distanza tra gli elementi può essere un'esperienza dolorosa. Non così con Project Parfait.
Per ottenere la larghezza, l'altezza e le coordinate X / Y di un elemento basta fare clic su di esso e osservare la chiamata blu:
Per ottenere la distanza tra due elementi, tieni premuto MAIUSC e fai clic su entrambi. Apparirà un display che mostra la distanza orizzontale e verticale in pixel:
In questo momento Project Parfait è completamente gratuito, basta accedere con il tuo ID Adobe e sei pronto per partire.
Se sei un designer alla ricerca di miglioramenti al flusso di lavoro di produzione o uno sviluppatore che vuole un modo più semplice per passare da PSD a codice, Project Parfait è assolutamente da provare nella nuova scena del web design.
