Creare un rollover con photoshop (tutorial)

imageRollover Creare un rollover con photoshop (tutorial)

Un rollover è un pulsante o un’immagine che cambia aspetto quando il mouse si posa su di esso. Per creare un rollover sono necessarie due immagini: la prima che corrisponde all’originale, e una seconda che corrisponde all’immagine modificata.

Per creare queste immagini potete usare i livelli, differenziando quindi l’immagine in due livelli e modificando colore, tonalità e quant’altro voi vogliate. Per fare ciò trascinate il pulsante su Nuovo Livello oppure potete clikkare sul menù in alto Livello-Duplica Livello.

Usate gli stili dei pulsanti predefiniti  della palette Stili per creare pulsanti rollover con stati normale, mouse sopra e mouse premuto. A questo punto disegnate una forma base con lo strumento rettangolo e applicate uno stile a vostra scelta, ad esempio Smussato normale per trasformarlo automaticamente in un pulsante. Ora copiate il livello e applicate altri stili predefiniti, come Smussato mouse sopra per creare quindi altri stati. Mi raccomando di salvare ogni livello come un’immagine separata in modo da avere un set completo di pulsanti rollover.

Arrivati a questo punto clikkate su File-Salva per il web per far sì che la vostra immagine abbia una dimensione e una risoluzione adatta al web. Potete selezionare le opzioni di ottimizzazione visualizzandole in anteprima.

Dopo aver creato il vostro rollover aprite Dreamweaver per inserire le immagini in una pagine web e aggiungere automaticamente il codice Javascript per l’azione dei rollover.

Lascia un Commento

Rimani Aggiornato via eMail