Potete generare risorse di immagini JPEG, PNG o GIF dai contenuti di un livello o gruppo di livelli di un file PSD. Le risorse vengono generate automaticamente quando aggiungete l’estensione di un formato immagine supportato al nome di un livello o gruppo di livelli. Facoltativamente, potete anche specificare i parametri di qualità e dimensione da applicare alle risorse di immagini generate.

La generazione delle risorse di immagini da un file PSD è utile in particolare per la progettazione Web per dispositivi diversi.

Video: generare risorse Web in Photoshop CC

Video: generare risorse Web in Photoshop CC
Questo video descrive i diversi modi in cui è possibile utilizzare la funzione Generatore di Photoshop CC per generare immagini in diverse dimensioni e risoluzioni, da usare in altri progetti.
Chris Converse

Per informazioni su come creare e generare grafica per il Web con Adobe Generator, consultate Estrarre le risorse per il Web.

Generare risorse di immagini da livelli o gruppi di livelli

Per comprendere meglio il funzionamento del generatore di immagini, potete esaminare un semplice file PSD (che potete scaricare da questo collegamento) contenente la seguente gerarchia di livelli:

Generare le risorse di immagini in Photoshop
Esempio di file PSD con struttura di livelli

Questo file ha due gruppi di livelli: Rounded_rectangles e Ellipses. Ciascun gruppo contiene cinque livelli.

Per generare risorse di immagini da questo file PSD, effettuate i passaggi seguenti:

  1. Con il file PSD aperto, selezionate File > Genera > Risorse immagine.
  2. Aggiungete l’estensione del formato desiderato (.jpg, .png o .gif) al nome del livello o gruppo di livelli da cui desiderate generare le risorse di immagini. Ad esempio, modificate il nome dei gruppi di livelli Rounded_rectangles e Ellipses in Rounded_rectangles.jpg e Ellipses.png e quello del livello Ellipse_4 in Ellipse_4.gif.

Nota:

I nomi di livelli non possono contenere i caratteri speciali :*.

Photoshop genera le risorse di immagini e le salva in una sottocartella nella cartella del file PSD originale. Se il file PSD originale non era ancora stato salvato, Photoshop salva le risorse generate in una sottocartella nella cartella Desktop.

Nomi delle risorse di immagini in Photoshop
I nomi delle risorse di immagini vengono generati dal nome del relativo livello o gruppo di livelli

Nota:

La generazione delle risorse di immagini è abilitata per il documento corrente. Una volta abilitata, resta disponibile anche se il documento viene chiuso e riaperto. Per disabilitare la generazione delle risorse di immagini per il documento corrente, deselezionate File > > Genera > Risorse immagine.

Generare più risorse da un livello o gruppo di livelli

Per generare più risorse da un livello o gruppo di livelli, separate con una virgola i nomi delle risorse. Ad esempio, il nome del livello di seguito genera tre risorse:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Salvare le risorse in una sottocartella

Potete scegliere di salvare le risorse grafiche generate da particolari livelli o gruppi di livelli in una sottocartella diretta della cartella delle risorse del documento. Includete il nome della sottocartella nel nome del livello/gruppo di livelli; ad esempio:

[sottocartella]/Ellipse_4.jpg 

Esempio di utilizzo per un lavoro di progettazione Web

La generazione delle risorse di immagini da un file PSD è utile in particolare per la progettazione Web per dispositivi diversi. Considerate la seguente progettazione Web e la relativa struttura di livelli:

Progettazione Web con struttura di livelli
Progettazione Web con struttura di livelli

Per estrarre l’icona in alto e la riga superiore della griglia di immagini Global Hotspots come risorse di immagini:

  • Aggiungete le estensioni del formato immagine ai nomi dei relativi livelli.
Rinominare i livelli o gruppi di livelli in Photoshop
Rinominare i livelli o gruppi di livelli in Photoshop

Rinominare i livelli o gruppi di livelli

Nota:

Dal contenuto di un livello o gruppo di livello viene generata una singola risorsa di immagine. Ad esempio, il gruppo di livelli AdventureCo Logo dell’immagine qui sopra contiene un livello forma e un livello di testo dinamico. Quando da questo gruppo viene generata una risorsa di immagine, tali livelli vengono rasterizzati.

Photoshop genera le risorse di immagini e le salva nello stesso percorso del file PSD originale.

Risorse di immagini generate in Photoshop
Risorse di immagini generate

Specificare i parametri di qualità e dimensione

Per impostazione predefinita, le risorse JPG vengono generate con qualità 90%. Per impostazione predefinita, le risorse PNG vengono generate come immagini a 32 bit. Le risorse GIF vengono generate con trasparenza alfa di base.

Quando si rinominano i livelli o gruppi di livelli per la generazione di risorse, è possibile specificare i parametri di qualità e dimensione.

Parametri per risorse JPEG

  • Per specificare la qualità di output desiderata, aggiungete un suffisso al nome della risorsa: .jpg(1-10) o .jpg(1-100%). Ad esempio:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Per aggiungere le dimensioni di output desiderate (relative o in una delle unità di misura supportate: px, in, cm e mm), aggiungete un prefisso al nome della risorsa. Photoshop ridimensiona di conseguenza l’immagine. Ad esempio:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Nota: ricordate di aggiungere uno spazio tra il prefisso e il nome della risorsa. Per specificare le dimensioni in pixel, è possibile omettere l’unità. Ad esempio, 300 x 200.

Nota:

Come illustrato, nelle dimensioni di output specificate potete utilizzare unità di misura diverse e pixel. Ad esempio, 4in x 100 Rounded_rectangle_3.jpg è un nome di livello valido per la generazione di risorse.

Parametri per risorse PNG

  • Per specificare la qualità di output desiderata, aggiungete un suffisso al nome della risorsa: .8, 24 o 32. Ad esempio:
    • Ellipse_4.png24
  • Per aggiungere le dimensioni di output desiderate (relative o in una delle unità di misura supportate: px, in, cm e mm), aggiungete un prefisso al nome della risorsa. Photoshop ridimensiona di conseguenza l’immagine. Ad esempio:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

Nota: ricordate di aggiungere uno spazio tra il prefisso e il nome della risorsa. Per specificare le dimensioni in pixel, è possibile omettere l’unità. Ad esempio, 300 x 200.

Nota:

Come illustrato, nelle dimensioni di output specificate potete utilizzare unità di misura diverse e pixel. Ad esempio, 4in x 100 Rounded_rectangle_3.png è un nome di livello valido per la generazione di risorse.

Parametri per risorse GIF

  • Per aggiungere le dimensioni di output desiderate (relative o in una delle unità di misura supportate: px, in, cm e mm), aggiungete un prefisso al nome della risorsa. Ad esempio:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

Nota: ricordate di aggiungere uno spazio tra il prefisso e il nome della risorsa. Per specificare le dimensioni in pixel, è possibile omettere l’unità. Ad esempio, 300 x 200.

Nota:

Come illustrato, nelle dimensioni di output specificate potete utilizzare unità di misura diverse e pixel. Ad esempio, 4in x 100 Rounded_rectangle_3.gif è un nome di livello valido per la generazione di risorse.

I parametri di qualità non sono disponibili per le risorse GIF.

Specificare nomi di livelli complessi

Utilizzando i parametri nei nomi dei livelli per la generazione delle risorse, potete specificare nomi di risorse complessi. Ad esempio:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Da questo livello vengono generate le seguenti risorse:

  • Delicious.jpg (immagine JPG con qualità 8 ridimensionata al 120%)
  • Delicious.png (immagine PNG a 24 bit ridimensionata al 42%)
  • Delicious_2.jpg (Immagine JPG con qualità 90% e dimensione assoluta di 100x100 px)
  • Delicious.gif (immagine GIF ridimensionata al 250%)

Specificare impostazioni predefinite per le risorse

Potete specificare impostazioni predefinite a livello di documento per le risorse generate. Effettuate le seguenti operazioni:

  1. Selezionate un livello vuoto nel documento.
  2. Iniziate il nome del livello con la parola chiave default. Poi, specificate le impostazioni che desiderate applicare a tutte le risorse grafiche generate dal documento. Ad esempio:

default hi-res/

Genera tutte le risorse di immagine in una sottocartella denominata hi-res. Ad esempio, [cartella_risorse]/hi-res/Delicious.jpg.

default hi-res/@2x

Genera tutte le risorse di immagine in una sottocartella denominata hi-res. Inoltre, aggiunge il suffisso @2x ai nomi delle risorse. Ad esempio, [cartella_risorse]/hi-res/Delicious@2x.jpg.

default 50% lo-res/

Salva le risorse di immagine con dimensioni ridotte del 50% nella sottocartella lo-res sotto la cartella delle risorse del documento.

default hi-res/@2x + 50% lo-res/

Genera due risorse di immagine da un livello:

  • Nella sottocartella hi-res, una risorsa con il suffisso @2x aggiunto al nome
  • Nella sottocartella lo-res, una risorsa con dimensioni ridotte del 50%

Nota:

I fattori di ridimensionamento predefiniti vengono sostituiti da quelli specificati per i singoli livelli.

Disattivare la generazione di risorse di immagini per tutti i documenti

Potete disattivare la generazione delle risorse di immagini globalmente per tutti i documenti Photoshop modificando le Preferenze.

  1. Scegliete Modifica > Preferenze > Plug-in.
  2. Deselezionate Abilita Generatore.
  3. Fate clic su OK.

Nota:

Quando la generazione delle risorse di immagini viene disabilitata dalle Preferenze, il comando di menu File > Genera non è più disponibile finché tale funzione non venga nuovamente abilitata nella finestra di dialogo Preferenze.

Domande frequenti

È necessario specificare nomi di risorsa univoci?

I nomi delle risorse devono essere univoci per ogni singolo documento.

Con quale livello di qualità vengono generate le risorse di immagini?

Per impostazione predefinita, le risorse JPG vengono generate con qualità 90%. Per impostazione predefinita, le risorse PNG vengono generate come immagini a 32 bit. Le risorse GIF vengono generate con trasparenza alfa di base.

È possibile generare le risorse di immagini da livelli con trasparenza e altri effetti?

Sì. La trasparenza e altri effetti applicati a un livello vengono mantenuti nelle risorse generate dal livello. Tuttavia, tali effetti potrebbero risultare rasterizzati nella risorsa generata.

Come vengono generate le risorse di immagini dai livelli con contenuti che fuoriescono sul quadro?

Le risorse vengono ritagliate in base ai limiti del documento. Se un’immagine non rientra nei limiti del documento, Generator non crea le relative risorse di immagini.

La virgola è l’unico separatore ammesso nei nomi delle risorse immagine?

Oltre alla virgola, è possibile usare come separatore il simbolo più (+). Ad esempio:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

è equivalente a:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Video: come creare un progetto Edge Reflow dal Generatore di Photoshop

Video: come creare un progetto Edge Reflow dal Generatore di Photoshop
Questo video mostra come creare un layout Web che reagisce a dimensioni di schermo da 320 pixel a più di 1000 Pixel in orizzontale.
Chris Converse

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