Integrazione di Photoshop con Dreamweaver. Operazioni con gli oggetti avanzati nei flussi di lavoro di Photoshop - Dreamweaver.

Informazioni sull'integrazione con Photoshop

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.

Nota:

se utilizzate questa funzione frequentemente, può essere consigliabile memorizzare i file Photoshop nel sito di Dreamweaver, in modo da facilitarne l'accesso. Se è così, assicuratevi di applicare a essi la maschera file per evitare l'esposizione delle risorse originali, oltre che i trasferimenti superflui tra il sito locale e il server remoto.

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.

Oggetto avanzato
Oggetto avanzato

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.

  1. In Dreamweaver (vista Progettazione o Codice), posizionate il punto di inserimento nel punto nella pagina in cui desiderate inserire l'immagine.
  2. Selezionate Inserisci > Immagine.

    Nota:

    potete anche trascinare il file PSD nella pagina dal pannello File se memorizzate i file Photoshop nel sito Web. In tal caso, saltate il punto seguente.

  3. Localizzate il file di immagine PSD di Photoshop nella finestra di dialogo Seleziona file di origine immagine facendo clic sul pulsante Sfoglia per cercarla.

  4. Nella finestra di dialogo Ottimizzazione immagine visualizzata, selezionate le impostazioni di ottimizzazione necessarie e fate clic su OK.

  5. Salvate il file di immagine in formato Web in una posizione all'interno della cartella principale del sito Web.

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.

Nota:

se successivamente decidete di modificare le impostazioni di ottimizzazione di un'immagine collocata nelle pagine, potete selezionare l'immagine, fate clic sul pulsante Modifica impostazioni immagine nella finestra di ispezione Proprietà e apportate le modifiche desiderate nella finestra di dialogo Ottimizzazione immagine. Le modifiche apportate nella finestra di dialogo Ottimizzazione immagine vengono applicate in modo non distruttivo. Dreamweaver non modifica mai il file Photoshop originale, ma ricrea sempre l'immagine Web in base ai dati originali.

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.

  1. Per aggiornare un oggetto avanzato con il contenuto corrente del file Photoshop originale, selezionate l'oggetto avanzato nella finestra del documento, quindi fate clic sul pulsante Aggiorna da originale nella finestra di ispezione Proprietà.

Nota:

non è necessario che Photoshop sia installato per effettuare l'aggiornamento da Dreamweaver.

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).

  1. Nel pannello File, fate clic sulla scheda Risorse per visualizzare le risorse del sito.
  2. Assicuratevi che la vista Immagini sia selezionata. In caso contrario, fate clic sul pulsante Immagini.

  3. Selezionate ogni risorsa di immagine nel pannello Risorse. Quando selezionate un oggetto avanzato, viene visualizzata l'icona dell'oggetto avanzato nell'angolo superiore sinistro dell'immagine. Le immagini normali non presentano questa icona.
  4. Per ogni oggetto avanzato che desiderate aggiornare, fate clic con il pulsante destro del mouse sul nome e selezionate Aggiorna da originale. Potete anche fare clic tenendo premuto il tasto Ctrl per selezionare più nomi di file e aggiornarli contemporaneamente.

Nota:

non è necessario che Photoshop sia installato per effettuare l'aggiornamento da Dreamweaver.

Ridimensionare un oggetto avanzato

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

  1. Selezionate l'oggetto avanzato nella finestra del documento e trascinate le maniglie di ridimensionamento per ridimensionare l'immagine. Potete mantenere la proporzione tra larghezza e altezza tenendo premuto il tasto Maiusc mentre trascinate.
  2. Fate clic sul pulsante Aggiorna da originale nella finestra di ispezione Proprietà.

    Quando aggiornate l'oggetto avanzato, l'immagine Web effettua nuovamente il rendering non distruttivo con le nuove dimensioni, basandosi sul contenuto corrente del file originale e sulle impostazioni di ottimizzazione originali.

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.

Nota:

assicuratevi che Photoshop sia impostato come editor di immagini esterno principale.

  1. Selezionate l'oggetto avanzato nella finestra del documento.
  2. Fate clic sul pulsante Modifica nella finestra di ispezione Proprietà.

  3. Apportate le modifiche in Photoshop e salvate il nuovo file PSD.
  4. In Dreamweaver, selezionate nuovamente l'oggetto avanzato e fate clic sul pulsante Aggiorna da originale.

Nota:

se avete modificato le dimensioni dell'immagine in Photoshop, dovete reimpostare le dimensioni dell'immagine Web in Dreamweaver. Dreamweaver aggiorna un oggetto avanzato solamente in base al contenuto del file Photoshop originale e non alle sue dimensioni. Per sincronizzare le dimensioni di un'immagine Web con quelle del file Photoshop originale, fate clic con il pulsante destro del mouse sull'immagine e selezionate Ripristina dimensione originale.

Stati degli oggetti avanzati

La tabella seguente elenca i vari stati degli oggetti avanzati.

Stato oggetto avanzato

Descrizione

Azione consigliata

Immagini sincronizzate

L'immagine Web è sincronizzata con il contenuto corrente del file Photoshop originale. Gli attributi width (larghezza) e height (altezza) nel codice HTML corrispondono alle dimensioni dell'immagine Web.

Nessuno

Risorsa originale modificata

Il file Photoshop originale è stato modificato dopo la creazione dell'immagine web in Dreamweaver.

Utilizzate il pulsante Aggiorna da originale nella finestra di ispezione Proprietà per sincronizzare le due immagini.

Le dimensioni dell'immagine web sono diverse dai valori HTML di larghezza e altezza

Gli attributi width e height nel codice HTML sono diversi dalle dimensioni di larghezza e altezza dell'immagine Web che Dreamweaver ha creato al momento dell'inserimento. Se le dimensioni dell'immagine Web sono inferiori ai valori HTML width e height selezionati, l'immagine Web può apparire pixelata.

Utilizzate il pulsante Aggiorna da originale nella finestra di ispezione Proprietà per ricreare l'immagine Web dal file Photoshop originale. Dreamweaver utilizza le dimensioni HTML width e height correntemente specificate quando ricrea l'immagine.

Le dimensioni della risorsa originale sono troppo ridotte per il valori HTML di larghezza e altezza selezionati

Gli attributi width e height nel codice HTML sono maggiori rispetto alle dimensioni di larghezza e altezza del file Photoshop originale. L'immagine Web può apparire pixelata.

Evitate di creare immagini web con dimensioni superiori a quelle del file Photoshop originale.

Risorsa originale non trovata

Dreamweaver non è in grado di individuare il file Photoshop originale nella casella di testo Originale della finestra di ispezione Proprietà.

Correggete il percorso del file nella casella di testo Originale nella finestra di ispezione Proprietà, oppure spostate il file Photoshop nella posizione correntemente specificata.

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.

Nota:

anche se la funzionalità Aggiorna da originale non è disponibile per le immagini incollate, potete comunque aprire e modificare il file Photoshop originale selezionando l'immagine incollata e facendo clic sul pulsante Modifica nella finestra di ispezione Proprietà.

  1. In Photoshop, effettuate una delle seguenti operazioni:
    • Copiate interamente o in parte un singolo livello utilizzando lo strumento Selezione per selezionare la porzione da copiare e scegliendo quindi Modifica > Copia. Questa operazione copia negli Appunti solamente il livello attivo dell'area selezionata. Eventuali effetti basati sui livelli non vengono copiati.
    • Copiate e unite più livelli utilizzando lo strumento Selezione per selezionare la porzione da copiare, quindi scegliete Modifica > Copia elementi uniti. Questa operazione unisce e copia negli Appunti tutti i livelli dell'area selezionata (attivi e non attivi). Vengono copiati anche gli eventuali effetti basati sui livelli associati a questi livelli.
    • Copiate una porzione utilizzando lo strumento Selezione porzione per selezionare la porzione, quindi scegliete Modifica > Copia. Questa operazione unisce e copia negli Appunti tutti i livelli della porzione (attivi e non attivi).

    Nota:

    potete scegliere Seleziona > Tutti per selezionare rapidamente l'intera immagine da copiare.

  2. In Dreamweaver (vista Progettazione o Codice), posizionate il punto di inserimento nel punto nella pagina in cui desiderate inserire l'immagine.
  3. Selezionate Modifica > Incolla.

  4. Nella finestra di dialogo Ottimizzazione immagine, modificate le impostazioni di ottimizzazione, se necessario, e fate clic su OK.

  5. Salvate il file di immagine in formato Web in una posizione all'interno della cartella principale del sito Web.

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.

Nota:

verificate che Photoshop sia impostato come editor grafico principale per le immagini esterne sul tipo di file che volete modificare.

  1. In Dreamweaver, selezionate un'immagine in formato Web originariamente creata in Photoshop, quindi effettuate una delle seguenti operazioni:
    • Fate clic sul pulsante Modifica nella finestra di ispezione Proprietà dell'immagine.
    • Tenendo premuto il tasto Ctrl (Windows) o Comando (Macintosh), fate doppio clic sul file.
    • Fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh) su un'immagine, selezionate Modifica origine con dal menu di scelta rapida, quindi scegliete Photoshop.

    Nota:

    quanto segue presuppone che Photoshop sia impostato come editor di immagini esterne principale per i file di immagine PSD. Può anche essere necessario impostare Photoshop come editor predefinito per i tipi di file JPEG, GIF e PNG.

  2. Modificate il file in Photoshop.
  3. Tornate a Dreamweaver e incollate l'immagine o la selezione aggiornata nella pagina.

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.

Nota:

qualsiasi esse siano, le impostazioni selezionate hanno effetto solamente sulla versione importata del file di immagine. Il file PSD di Photoshop o PNG di Fireworks originale rimane sempre inalterato.

Preimpostazione

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.

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