Utilizzare i file Photoshop in Dreamweaver

In Dreamweaver, potete inserire file di immagine Photoshop (in formato PSD) nelle pagine Web, lasciando a Dreamweaver il compito di ottimizzarle per il Web (nei formati GIF, JPEG e PNG). Quando eseguite questa operazione, Dreamweaver inserisce l'immagine sotto forma di oggetto avanzato (Smart Object) e mantiene una connessione attiva con il file PSD originale.

Dreamweaver permette anche di incollare interamente o in parte un'immagine Photoshop multilivello o multiporzione in una pagina Web. Tuttavia, quando copiate o incollate da Photoshop, non viene mantenuta alcuna connessione attiva con il file originale. Per aggiornare l'immagine, apportate le modifiche in Photoshop, quindi copiatela e incollatela nuovamente.

Per un'esercitazione sull'integrazione di Photoshop con Dreamweaver, consultate Integrazione di Dreamweaver con Photoshop.

Gli oggetti avanzati e i flussi di lavoro per Photoshop e Dreamweaver

Esistono due flussi di lavoro principali per lavorare in Dreamweaver con file di Photoshop: mediante l'uso di operazioni Copia e Incolla e mediante l'uso di oggetti avanzati.

Flusso di lavoro con operazioni Copia e Incolla

Il flusso di lavoro con operazioni Copia e Incolla permette di selezionare sezioni o livelli in un file Photoshop, quindi di usare Dreamweaver per inserirli in immagini pronte per il Web. Per aggiornare successivamente il contenuto, tuttavia, sarà necessario aprire il file Photoshop originale, apportarvi le modifiche, copiare la sezione o il livello nuovamente negli Appunti, quindi incollarli in Dreamweaver. Questo flusso di lavoro è consigliato solo per inserire parte di un file Photoshop (ad esempio, una sezione di un'immagine più complessa) come immagine in una pagina Web.

Flusso di lavoro con oggetti avanzati

Quando si lavora con file Photoshop completi, è preferibile ricorrere al flusso di lavoro con oggetti avanzati. Un oggetto avanzato in Dreamweaver è una risorsa immagine inserita in una pagina Web con un collegamento dinamico al file Photoshop (PSD) originale. Nella vista Progettazione di Dreamweaver, un oggetto avanzato è contrassegnato da un'icona nell'angolo in alto a sinistra dell'immagine.

Quando l'immagine Web (cioè l'immagine sulla pagina di Dreamweaver) non è sincronizzata con il file Photoshop originale, in Dreamweaver viene rilevato che il file originale è stato aggiornato e una delle frecce dell'icona dell'oggetto avanzato è visualizzata in rosso. Quando selezionate l'immagine Web in vista Progettazione e fate clic sul pulsante Aggiorna da originale nella finestra di ispezione Proprietà, l'immagine viene aggiornata automaticamente con le modifiche apportate al file Photoshop originale.

Con il flusso di lavoro basato sull'utilizzo di oggetti avanzati, non occorre aprire Photoshop per aggiornare un'immagine Web. Inoltre, eventuali aggiornamenti apportati a un oggetto avanzato in Dreamweaver sono di tipo non distruttivo. Questo significa che potete apportare modifiche alla versione Web dell'immagine presente sulla pagina e lasciare inalterata l'immagine Photoshop originale.

Potete inoltre aggiornare un oggetto avanzato senza selezionare l'immagine Web in vista Progettazione. Dal pannello Risorse è possibile aggiornare tutti gli oggetti avanzati, comprese le immagini che potrebbero non essere selezionabili nella finestra del documento (ad esempio, le immagini di sfondo CSS).

Impostazioni per l'ottimizzazione delle immagini

Per entrambi i flussi di lavoro (mediante Copia e Incolla e mediante oggetti avanzati), potete specificare impostazioni di ottimizzazione nella finestra di dialogo Ottimizzazione immagine. Questa finestra di dialogo permette di specificare la qualità dell'immagine e il formato del file. Se copiate una sezione o un livello oppure inserite un file di Photoshop come oggetto avanzato, Dreamweaver presenta questa finestra di dialogo per facilitare la creazione dell'immagine Web.

Se poi copiate e incollate un aggiornamento di una sezione o di un livello già inserito, le impostazioni iniziali vengono ricordate e applicate nuovamente all'immagine Web. Allo stesso modo, quando aggiornate un oggetto avanzato con la finestra di ispezione Proprietà, in Dreamweaver vengono usate le stesse impostazioni selezionate al momento del primo inserimento della stessa immagine. Potete modificare le impostazioni di un'immagine in qualsiasi momento: selezionate l'immagine Web in vista Progettazione e fate clic sul pulsante Modifica impostazioni immagine, nella finestra di ispezione Proprietà.

Memorizzazione dei file Photoshop

Se avete inserito un'immagine Web e non avete memorizzato il file Photoshop originale nel sito Dreamweaver, il percorso del file originale viene riconosciuto come percorso di file locale assoluto. Questo avviene per i flussi di lavoro sia con operazioni Copia e Incolla, sia con oggetti avanzati. Ad esempio, se il percorso del sito Dreamweaver è C:\Siti\mioSito e il file Photoshop si trova in C:\Immagini\Photoshop, Dreamweaver non riconosce la risorsa originale come appartenente al sito denominato mioSito. Questo può causare problemi se successivamente vorrete condividere il file Photoshop con altri collaboratori, poiché in Dreamweaver il file viene riconosciuto come disponibile solo in quella particolare unità locale.

Se memorizzate il file Photoshop nel sito stesso, invece, Dreamweaver può impostare un percorso relativo al sito. Qualsiasi utente che possa accedere al sito potrà ottenere il percorso corretto al file, purché il file originale sia stato reso disponibile per il download.

Per un'esercitazione video sulla modifica roundtrip con Photoshop, consultate Modifica roundtrip con Photoshop.

Creare un oggetto avanzato

Quando inserite un'immagine Photoshop (file PSD) nella pagina, Dreamweaver crea un oggetto avanzato. Un oggetto avanzato (Smart Object) è un'immagine in formato Web che mantiene una connessione attiva con l'immagine Photoshop originale. Ogni volta che aggiornate l'immagine originale in Photoshop, Dreamweaver vi fornisce la possibilità di aggiornare l'immagine in Dreamweaver con la semplice selezione di un pulsante.

Dreamweaver crea l'oggetto avanzato in base alle impostazioni di ottimizzazione selezionate e colloca nella pagina una versione in formato Web dell'immagine. L'oggetto avanzato mantiene una connessione attiva con il file originale e vi informa se i due non sono sincronizzati.

Per un'esercitazione video sulla modifica roundtrip con Photoshop, consultate Modifica roundtrip con Photoshop.

Aggiornare un oggetto avanzato

Se modificate il file Photoshop a cui è collegato l'oggetto avanzato, Dreamweaver vi avverte che l'immagine in formato Web non è sincronizzata con l'originale. In Dreamweaver, gli oggetti avanzati sono caratterizzati da un'icona presente nell'angolo superiore sinistro dell'immagine. Quando l'immagine in formato Web in Dreamweaver è sincronizzata con il file Photoshop originale, entrambe le frecce nell'icona sono di colore verde. Quando l'immagine in formato Web non è sincronizzata con il file Photoshop originale, una delle frecce è di colore rosso.

Aggiornare più oggetti avanzati

Potete aggiornare più oggetti avanzati contemporaneamente utilizzando il pannello Risorse. Il pannello Risorse consente anche di visualizzare quegli oggetti avanzati che potrebbero non essere selezionabili nella finestra del documento (ad esempio, le immagini di sfondo CSS).

Ridimensionare un oggetto avanzato

Potete ridimensionare un oggetto avanzato nella finestra del documento allo stesso modo di qualsiasi altra immagine.

Modificare il file di Photoshop originale di un oggetto avanzato

Una volta creato l'oggetto avanzato nella pagina di Dreamweaver, potete modificare il file PSD originale in Photoshop. Una volta apportate le modifiche in Photoshop, potete successivamente aggiornare l'immagine Web in Dreamweaver.

Stati degli oggetti avanzati

La tabella seguente elenca i vari stati degli oggetti avanzati.

Copiare e incollare una selezione da Photoshop

Potete copiare interamente o in parte un'immagine Photoshop, quindi incollare la selezione nella pagina Dreamweaver come immagine in formato Web. Potete copiare un singolo livello, oppure un insieme di livelli dell'area selezionata dell'immagine, oppure ancora copiare una sua porzione. Quando effettuate questa operazione, Dreamweaver non crea un oggetto avanzato.

Dreamweaver definisce l'immagine in base alle impostazioni di ottimizzazione e ne inserisce nella pagina una versione in formato Web. Le informazioni sull'immagine, ad esempio la posizione del file PSD originale, vengono memorizzate in una Design Note, indipendentemente dall'abilitazione dell'uso di Design Notes nel sito. La Design Note consente di tornare a modificare il file Photoshop originale da Dreamweaver.

Modificare immagini incollate

Una volta incollate le immagini Photoshop nelle pagine Dreamweaver, potete modificare il file PSD originale in Photoshop. Quando utilizzate il flusso di lavoro copia/incolla, Adobe consiglia di apportare sempre le modifiche al file PSD originale (anziché all'immagine in formato Web) e di reincollare l'immagine per mantenere l'origine unica.

Se in qualsiasi momento desiderate riottimizzare l'immagine, potete selezionarla e fare clic sul pulsante Modifica impostazioni immagine nella finestra di ispezione Proprietà.

Impostazione della finestra di dialogo Ottimizzazione immagine

Quando create un oggetto avanzato o incollate una selezione da Photoshop, Dreamweaver visualizza la finestra di dialogo Ottimizzazione immagine. (Dreamweaver visualizza questa finestra di dialogo anche per qualunque altro tipo di immagine se selezionate un'immagine e fate clic sul pulsante Modifica impostazioni immagine nella finestra di ispezione Proprietà.) Questa finestra di dialogo consente di definire e visualizzare un'anteprima delle impostazioni delle immagini in formato Web mediante il giusto equilibrio di colore, compressione e qualità.

Si definisce in formato Web un'immagine che può essere visualizzata da tutti i browser Web attuali e che mantiene un aspetto costante, indipendentemente dal sistema o dal browser utilizzati per visualizzarla. In generale, le impostazioni comportano un compromesso tra qualità e dimensioni del file.

Scegliete una preimpostazione adatta alle vostre esigenze. Le dimensioni del file dell'immagine cambiano a seconda della preimpostazione scelta. Un'anteprima istantanea dell'immagine con l'impostazione applicata viene visualizzata sullo sfondo.

Ad esempio, per le immagini che devono essere visualizzate con un elevato grado di chiarezza, scegliete PNG24 per le foto (particolari netti).  Selezionate GIF per le immagini di sfondo (modelli) se inserite un modello che verrà utilizzato come sfondo della pagina.

Quando selezionate una preimpostazione, vengono visualizzate le relative opzioni configurabili.  Se desiderate personalizzare ulteriormente le impostazioni di ottimizzazione, modificate i valori di queste opzioni.