Lavorate con la grafica per il Web

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.

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.

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.

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

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

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