Estrai di Creative Cloud è una nuova funzione gratuita di Risorse di Creative Cloud che consente di esplorare un file PSD direttamente dal browser, compresi i livelli e le composizioni di livelli. Questo è di particolare beneficio ai progettisti e agli sviluppatori Web che possono condividere i file PSD, sbloccare le informazioni di progettazione e scaricare risorse pronte per essere utilizzate in produzione. Grazie a Estrai, potete effettuare le seguenti azioni su un file PSD nel browser:

  • Copiare testo e CSS
  • Ottenere informazioni su colore, sfumatura e font
  • Misurare le distanze tra elementi
  • Salvare risorse di immagini ottimizzate per la produzione

Se siete un designer o uno sviluppatore Web che utilizza i file PSD, Estrai di Creative Cloud semplifica radicalmente il processo che porta dalla progettazione al codice, riducendo il numero di passaggi tediosi e minimizzando lo scambio di comunicazioni.

Nota:

Estrai è di sola lettura e non può essere utilizzato per modifica i file PSD.

Estrarre informazioni sugli stili

  1. Accedete al sito Web di Creative Cloud.
  2. Andate alla sezione Risorse dell'account Creative Cloud.
  3. Caricate il file PSD trascinandolo e rilasciandolo nell'area Files oppure utilizzando l'opzione Scegliere file. Potete anche passare a file PSD precedentemente caricati.
  4. Fate clic sulla miniatura del file PSD per aprirlo nella vista Estrai.
I file vengono aperti nella vista Estrai

Nella vista Estrai, potete esplorare la progettazione del file PSD dal browser. Potrete esplorare la gerarchia dei livelli, visualizzare le diverse composizioni di livelli ed estrarre porzioni del file PSD in nuovi file immagine. Facendo clic su qualsiasi elemento dell'anteprima del file PSD, si seleziona un livello per il quale si ottengono le relative informazioni. Dopo aver effettuato la selezione, potrete:

Visualizzare e copiare coordinate e dimensioni degli elementi

Facendo clic su un singolo elemento nel file PSD, viene visualizzato il pannello Info. Nel pannello sono visualizzate la larghezza e l'altezza dell'elemento, nonché la posizione x e y del livello dell'elemento nel progetto.

Coordinate e dimensioni di un elemento del progetto visualizzate in pixel (px)
Coordinate e dimensioni di un elemento del progetto visualizzate come percentuali (%)

Nota:

Fate clic su qualsiasi valore quale L, A, X o Y per copiarne il valore negli Appunti.

Le misure in Estrai possono essere visualizzate in pixel o percentuale. Se un elemento è selezionato, le misure in percentuale della larghezza e dell'altezza sono relative alla larghezza e all'altezza totali del progetto PSD. Se sono selezionati due elementi, di cui uno completamente incluso nell'altro, la larghezza e l'altezza dell'elemento più interno sono indicate in relazione alle dimensioni dell'elemento esterno.

Le misure degli elementi interni sono visualizzate in relazione alle misure dell'elemento che li racchiude

Nota:

Fate clic su qualsiasi valore per copiarne il valore negli Appunti.

Visualizzare la distanza tra due elementi

Per visualizzare la distanza tra due elementi, fate clic sugli elementi tenendo premuto il tasto Maiusc. La conoscenza delle distanze tra gli elementi è utile per determinare le informazioni su margini o sulla spaziatura.

Distanza tra due elementi

Copiare il codice CSS

Quando in un progetto PSD è selezionato un elemento, copiate il CSS dell'elemento facendo clic su Copia CSS nel pannello Info blu. Potete anche visualizzare e copiare il codice CSS da Ispettore CSS.

Visualizzare il codice CSS

Nota:

Estrai supporta i preprocessori. Nella scheda Stili, fate clic su (freccia giù) accanto a CSS per visualizzare le opzioni per utilizzare i preprocessori CSS.

Opzioni per utilizzare i preprocessori CSS

Copiare del testo

Se l'elemento selezionato contiene del testo, fate clic su Copia testo per copiare il testo negli Appunti.

Copiare il testo selezionato negli Appunti

Visualizzare e copiare informazioni su font, colore e sfumatura

Potete visualizzare e copiare le informazioni correlate a font, colori e sfumature in uso nel documento del progetto (PSD) aprendo il pannello Stili. Durante la visualizzazione delle informazioni, fate clic su una dimensione di font o un campione sfumatura per copiarne il valore negli Appunti.

Valore della sfumatura di colore di esempio

Quando selezionate un elemento, gli stili di testo e colore in uso vengono evidenziati nel pannello Stili.

Nota:

Tramite l'integrazione con Adobe Typekit, Estrai offre l'accesso a migliaia di font di alta qualità. Nel pannello Stili, accanto ai font provenienti da Typekit, è visualizzata l'icona di Typekit (). Quando fate clic su questa icona di Typekit, Estrai apre la pagina corrispondente al font su Typekit.

Quando trovate un font sicuro per il Web che desiderate utilizzare, aggiungetelo in un kit in Typekit e collegatelo al codice di produzione.

Informazioni su font e colore dell'elemento selezionato

Usare lo strumento Color Picker

Lo strumento Color Picker () consente di trovare rapidamente il colore di un elemento nel progetto.

  • Selezionate lo strumento Color Picker, quindi fate clic in un'area qualsiasi del progetto. Lo strumento Color Picker rileva il colore e lo aggiunge come campione di colore al pannello Stili. Ora potete visualizzare e copiare con facilità le informazioni CSS per il colore.
Lo strumento Color Picker

Estrarre risorse di immagini

Utilizzando Estrai di Creative Cloud, potete selezionare uno o più livelli nel file PSD ed estrarre una risorsa di immagine. Le risorse possono essere estratte come immagini PNG a 8 bit e PNG a 32 bit, JPG e SVG.

Estrazione della risorsa di immagini

Nella pannello info di colore blu di un elemento, fate clic sull'icona ed effettuate le seguenti operazioni:

  1. Verificate le impostazioni della risorsa di immagine. Se necessario, selezionate un altro formato di immagine supportato (PNG, JPG o SVG).
  2. Se state generando una risorsa JPG, regolate la qualità della risorsa di immagine.
  3. Se necessario, selezionate un'opzione per la scala. Ad esempio, selezionate Adatta a 2x. La risorsa può essere adattata da 0,1x a 5x.
  4. Fate clic su Salva.
  5. Cercate la risorsa generata nel pannello Risorse. Le risorse sono disponibili anche nella cartella appena creata accanto al file PSD nella visualizzazione di Risorse di Creative Cloud. La cartella creata è denominata -assets. Ad esempio, se il file è denominato avventura.psd la cartella delle risorse sarà denominata avventura-assets.

    Quando fate clic sulla miniatura di un'immagine nel pannello Risorse, la risorsa viene scaricata nel computer locale.
Il pannello Risorse

Nota:

quando avete eseguito l'accesso e state visualizzando un file PSD in Risorse di Creative Cloud, avete accesso a funzioni avanzate di estrazione delle risorse. Ogni volta che scaricate una risorsa, questa è aggiunta al pannello Risorse e nella cartella .psd_assets in Risorse di Creative Cloud. Potete fare clic sulla miniatura di un'immagine nel pannello Risorse per scaricare la risorsa localmente nel computer.

Il pannello Risorse non è disponibile facendo clic sul collegamento ricevuto da un altro utente per visualizzare un file PSD. Estrai può essere utilizzato normalmente in questo caso, ma le risorse vengono scaricate immediatamente nel computer quando fate clic sull'icona . Utilizzare il gestore dei download del browser per trovare le risorse nel disco locale.

Lavorare con i livelli

Il pannello Livelli visualizza tutti i livelli e i gruppi di livelli nel progetto PSD. Dato che Creative Cloud Estrai è una funzione di sola lettura, le modifiche ai livelli non sono salvate nel file PSD.

Il pannello Livelli consente di mostrare o nascondere il livello, selezionare gli elementi del livello ed estrarre le risorse. 

Estrarre livelli o gruppi di livelli come risorse di immagine

Potete estrarre un livello o un gruppo di livelli del file PSD come risorsa di immagine. Effettuate le seguenti operazioni:

  1. Fate clic sul pannello Livelli per visualizzare la gerarchia dei livelli del file PSD.
Gerarchia dei livelli

Nota:

Potete selezionare più livelli nella gerarchia ed esportare un'unica nuova risorsa immagine che combina tutti i livelli selezionati. 

  1. Esaminate la gerarchia dei livelli ed esploratela. 
    • Per espandere un gruppo di livelli, fate clic sull'icona della cartella () accanto al gruppo.
    • Fate clic su un elemento per evidenziare il livello o il gruppo di livelli nel riquadro Livelli.
  2. Selezionate il livello o il gruppo di livelli che desiderate estrarre come risorsa di immagine. Tenete premuto il tasto Comando (Mac) o Ctrl (Windows) per selezionare più livelli. Se selezionate più oggetti, essi sono estratti come singola risorsa che contiene i livelli o i gruppi selezionati.
  3. Fate clic sull'icona  accanto al livello o al gruppo di livelli. Se avete selezionato più livelli o gruppi di livelli, fate clic sull'icona  accanto a uno qualsiasi dei livelli selezionati.
  4. Immettete un nome per la nuova risorsa di immagine.
  5. Selezionate un formato per la risorsa di immagine (PNG 8 Alpha, PNG 32, JPG o SVG).
  6. (Facoltativo) Se state generando una risorsa di immagine JPG, potete regolare la qualità.
  7. Fate clic su Salva
  8. Cercate la risorsa generata nel riquadro Risorse. Le risorse sono disponibili anche nella cartella appena creata accanto al file PSD in Risorse di Creative Cloud.

Nota:

l'opzione Ripristina livelli reimposta la visibilità dei livelli allo stato originale nel progetto.

Nascondere o mostrare un livello o un gruppo di livelli

Per nascondere/mostrare un livello o un gruppo di livelli, attivate o disattivate l'icona occhio () accanto al livello nel pannello Livelli.

Lavorare con le composizioni di livelli

Creative Cloud Estrai consente di visualizzare diverse composizioni di livelli di Photoshop. Se caricate un file PSD per Estrai che include le composizioni di livelli, nella parte superiore del file PSD è presente un menu a comparsa. Questo menu a comparsa comprende tutte le composizioni di livelli nel file PSD e una selezione denominata Ultimo stato documento. L'Ultimo stato documento rappresenta l'ultimo stato in Photoshop prima del salvataggio del file e del suo caricamento in Creative Cloud. Questo stato può o non può essere una composizione di livelli.

Lavorare con le composizioni di livelli in Estrai

Condividere i file

Visualizzando un file PSD nella scheda Estrai, potete condividerlo utilizzando la funzionalità di condivisione di Creative Cloud. Gli utenti con i quali condividete il file possono estrarre le risorse e le misurazioni dal file PSD anche se non hanno effettuato l'accesso a Creative Cloud.

Per dettagli, consultate Condividere file e cartelle.

Fornisci feedback

Se avete altre domande, problemi da comunicare o altro feedback, inviatelo al nostro Forum di Estrai per PSD.

Domande frequenti

Estrai supporta i tag di Photoshop Generator?

Sì. Per quanto possibile, le impostazioni durante l'estrazione di una risorsa di immagine passano, per impostazione predefinita, ai tag Generatore specificati nel nome del livello corrispondente.

Posso modificare un file PSD con Estrai?

No. Estrai è di sola lettura.

Vi sono dei caratteri che non sono supportati nei nomi PSD o nei nomi delle risorse?

I caratteri speciali, |, ", ?, <, >, /, \, ;, * e : non sono supportati nei nomi dei file PSD o nei nomi delle risorse di immagini.

Chi può accedere ai file PSD caricati da me?

Tutti i file caricati in Estrai sono accessibili solo tramite il vostro account Creative Cloud.

Per condividere un file PSD, potete renderlo pubblico e condividere il collegamento. Se durante la condivisione l'opzione Estrai è attivata, tutte le persone che dispongono del collegamento possono visualizzare il file PSD in Estrai ed estrarre le risorse.

Estrai funziona con i file PSD che utilizzano lo spazio cromatico CMYK?

No. Converti i file PSD CMYK nello spazio cromatico RGB prima di caricarli in Estrai.

Sono supportati altri formati file oltre al formato PSD?

No. Al momento sono supportati solo i file PSD.

Esistono limiti relativamente ai file PSD che Estrai è in grado di gestire?

Estrai è progettato per i file PSD creati in Photoshop. L'utilizzo di Estrai con file PSD superiori ai 2 GB o con più di 1000 livelli è sconsigliato.

In che cosa differiscono Estrai e Adobe Generator per Photoshop CC?

Sia Generator che Estrai sono ideati per rimuovere le frizioni tra designer e sviluppatori nel processo da composizione a codice. Generator estrae le risorse di immagini da Photoshop CC, Estrai funziona direttamente nel browser come servizio di Creative Cloud. Estrai non richiede l'installazione o l'esecuzione di Photoshop.

Inoltre in Estrai, potete creare una singola risorsa da più livelli.

Per usare Estrai è richiesto un abbonamento a Creative Cloud?

Chiunque con un account gratuito o a pagamento a Creative Cloud può caricare un file PSD in Risorse di Creative Cloud e utilizzare Estrai.

Se condividete un collegamento di Estrai, al destinatario non è richiesto accedere a Creative Cloud per poter estrarre le risorse e le misurazioni dal file PSD.

Per quale motivo alcuni colori o alcune sfumature non sono incluse nel pannello Stili di Estrai?

Nella maggior parte dei casi, i colori o le sfumature sono riempimenti basati su pixel non supportati da Estrai. Se il file PSD in uso utilizza questo tipo di riempimenti, utilizzare lo strumento Color Picker e aggiungere i campioni colore al pannello Stili.

Esistono limiti nei file CSS che Estrai genera per le sfumature?

Sì, alcuni tipi di sfumature non possono essere generati in CSS senza qualche trucco. Estrai al momento non genera codice CSS accurato per i tipi di sfumature angolare, riflessa, a rombi o esplosione. Sono tuttavia supportate le sfumature lineare e radiale.

Per quale motivo l'anteprima del PSD in Estrai non corrisponde a quella in Photoshop?

Possono esserci delle differenze nel rendering della visualizzazione di Estrai e Photoshop. Se notate tali differenze, desideriamo venirne a conoscenza.

Pubblicate un problema sul nostro forum con la descrizione di quanto notato. Se possibile, pubblicate un'immagine della differenza e proveremo a risolvere il problema.

Estrai può essere utilizzato su dispositivi mobili?

Nei dispositivi mobili, potrete visualizzare un'anteprima del file PSD e visualizzare alcuni stili compresi colori, font e sfumature. Non potrete interagire con il file PSD come dal desktop.

È possibile scaricare tutte le risorse in una volta?

Al momento, Estrai non supporta il download di tutte le risorse in una volta. Le risorse devono essere estratte e scaricare singolarmente.

È possibile scaricare tutto il codice CSS per un progetto in una volta?

Al momento, Estrai non supporta il download di tutto il codice CSS per un progetto in una volta. Il codice CSS può essere copiato nel codice di produzione solo selezionando il singolo elemento.

Se siete interessati a questa funzione, pubblicate nel nostro forum descrivendo come organizzare l'output del codice CSS.

Ho condiviso il file PSD, ma il destinatario non lo vede nella scheda Estrai. Perché?

Se avete condiviso un file PSD prima della release di Estrai alla fine di agosto 2014, nel file PSD non è stata attivata la scheda Estrai. Per attivarla, effettuate le seguenti operazioni:

Questa opzione attiva Estrai senza modificare il vostro URL condiviso pubblicamente.

  1. Aprite Opzioni avanzate nella finestra di dialogo Invia collegamento.
  2. Verificate che Consenti Estrai sia attivato.

Qual è la differenza tra Project Parfait ed Estrai?

Project Parfait è il servizio che Adobe ha presentato come beta per introdurre i flussi di lavoro che sono ora disponibili in Estrai. Estrai dispone delle stesse funzionalità di Project Parfait più altre ancora. Ora che Project Parfait è stato presentato ufficialmente in Creative Cloud, la possibilità di utilizzare il servizio Project Parfait per estrarre informazioni e servizi da un file PSD verrà terminata. 

Che cosa succede ai file PSD caricati in Project Parfait?

Se avete utilizzato Project Parfait e desiderate scaricare i file sui quali avete lavorato, avete tempo fino alla fine del 2014. 

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online