Gli strumenti per il Web di Photoshop semplificano la realizzazione delle singole parti di una pagina Web o di pagine Web complete in un formato predefinito o personalizzato.

  • Usate livelli e sezioni per progettare le pagine Web e gli elementi di interfaccia. Consultate Livelli e Sezioni delle pagine Web.

  • Usate le composizioni di livelli per provare varie composizioni per una pagina o per esportare varianti di una pagina. Consultate Composizioni di livelli.

  • Create testo rollover o grafica per i pulsanti da importare in Dreamweaver o Flash.

  • Create animazioni per il Web con il pannello Animazione, quindi esportatele come immagini GIF animate o file QuickTime. Consultate Creazione di animazioni di fotogrammi.

  • Usate Adobe Bridge per creare una galleria di foto per Web, trasformando rapidamente una serie di immagini in un sito Web interattivo grazie a un’ampia gamma di modelli di aspetto professionale.

Per un video sulla progettazione di siti Web con Photoshop e Dreamweaver, consultate Accesso a Photoshop da Dreamweaver per migliorare l'immagine Web.

Creazione di immagini con rollover

Un rollover è un pulsante o un’immagine di una pagina Web che cambia quando il mouse è su di esso. Per creare un rollover, sono necessarie almeno due immagini: un’immagine primaria per lo stato normale e un’immagine secondaria per lo stato modificato.

Photoshop include vari utili strumenti per creare immagini rollover:

  • Usate i livelli per creare immagini primarie e secondarie. Create il contenuto su un livello, quindi duplicatelo e modificatelo in modo da creare un contenuto simile mantenendo l’allineamento tra i livelli. Quando create un effetto rollover, potete cambiare lo stile, la visibilità e la posizione del livello, variare i colori e le tonalità e applicare gli effetti dei filtri. Consultate Duplicare i livelli.

  • Potete anche modificare gli stili dei livelli per applicare al livello primario effetti quali sovrapposizioni di colore, ombre esterne, bagliori o effetti rilievo. Per creare una coppia di rollover, attivare e/o disattivare lo stile di livello e salvare l’immagine nei due stati. Consultate Stili ed effetti di livello.

  • Usate gli stili di pulsanti predefiniti del pannello Stili per creare pulsanti di rollover con stati normale, mouse sopra e mouse premuto. Disegnate una forma di base con lo strumento rettangolo e applicate uno stile, ad esempio Smussato normale, per trasformare automaticamente il rettangolo in un pulsante. Quindi copiate il livello e applicate altri stili predefiniti, come Smussato mouse sopra, per creare altri stati per i pulsanti. Salvate ogni livello come un’immagine separata per creare un set completo di pulsanti di rollover.

  • Usate la finestra di dialogo Salva per Web e dispositivi per salvare le immagini rollover con un formato e una dimensione ottimizzati per il Web. Consultate Ottimizzazione immagini.

Nota:

quando salvate le immagini rollover, usate una convenzione di nomi per distinguere l’immagine primaria (stato non rollover) dall’immagine secondaria (stato rollover).

Dopo avere creato un’immagine rollover con Photoshop, usate Dreamweaver per inserire le immagini in una pagina Web e aggiungere automaticamente il codice JavaScript per l’azione di rollover.

Esportare nel formato Zoomify

È possibile pubblicare sul Web immagini ad alta risoluzione che gli utenti possono scorrere e ingrandire per visualizzare i dettagli. Il download di un’immagine con dimensioni base ha una durata pari a quello di un file JPEG di dimensioni equivalenti. Photoshop esporta i file JPEG e il file HTML, che è poi possibile caricare sul server Web.

  1. Scegliete File > Esporta > Zoomify e impostate le opzioni di esportazione.

    Modello

    Imposta lo sfondo e le funzioni di navigazione per l’immagine visualizzata nel browser.

    Posizione di output

    Specifica la posizione e il nome del file.

    Opzioni porzione immagine

    Specifica la qualità dell'immagine.

    Opzioni browser

    Imposta la larghezza e l’altezza in pixel dell’immagine di base quando visualizzata nel browser.

  2. Caricate i file HTML e di immagine sul server Web.

Lavorare con valori esadecimali dei colori

Photoshop può visualizzare i valori esadecimali dei colori dell’immagine o copiare il valore esadecimale di un colore da usare in un file HTML.

Visualizzare i valori esadecimali dei colori nel pannello Info

  1. Scegliete Finestra > Info o fate clic sulla linguetta del pannello Info per visualizzare il pannello.
  2. Scegliete Opzioni pannello dal menu del pannello. In Primo rilevamento colore o Secondo rilevamento colore, scegliete Colore Web nel menu Metodo e fate clic su OK.
  3. Posizionate il puntatore sul colore di cui desiderate visualizzare i valori esadecimali.

Copiare un colore come valore esadecimale

Photoshop copia i colori come attributo HTML COLOR contenente il valore esadecimale (color=#xxyyzz) oppure come solo valore esadecimale.

  1. Effettuate una delle seguenti operazioni:
    • Con lo strumento contagocce, portate il cursore sul colore che desiderate copiare. Fate clic con il pulsante destro del mouse (Windows) o tenendo premuto Control (Mac OS) e scegliete Copia colori in formato HTML oppure Copia codice esa colore.

    • Impostate il colore di primo piano usando il pannello Colore o Campioni o il Selettore colore di Adobe. Dal menu del pannello Colore, scegliete Copia colori in formato HTML oppure Copia codice esa colore.

    • Nella finestra di dialogo Salva per Web, fate clic sul campione colore o scegliete Alone > Altro In Selettore colore, fate clic con il pulsante destro del mouse sul valore esadecimale e scegliete Copia.

  2. Aprite il file desiderato in un’applicazione di modifica HTML e scegliete Modifica > Incolla.

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