|
|
 |
|
|
|
|
|
|
Tutorial |
|
|
|
|
|
Creare un banner Web con effetti di rollover |
|
|
|
|
|
|
Per ottenere degli effetti rollover ben riusciti, è fondamentale organizzarsi bene fin dall'inizio. In questa esercitazione imparerete ad organizzare i livelli di Adobe® Photoshop® 7.0 e Adobe ImageReady® 7.0 per creare un banner Web con effetti di rollover primari e secondari. Ecco come realizzare il banner.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. Creare il banner
Create un'immagine per il corpo del banner in Photoshop. Con lo strumento rettangolo create i pulsanti di navigazione; con lo strumento testo aggiungete il testo ai pulsanti. Una volta creato il banner, fate clic sul pulsante Crea un nuovo set nella palette Livelli e trascinate tutti i livelli del banner nel set. Per poter creare gli effetti di rollover, è essenziale collocare ogni elemento del banner in un livello a parte. La nostra immagine è organizzata in quattro livelli forma (uno per ogni pulsante), quattro livelli testo e un livello immagine. |
| |
|
| |
|
|
|
2. Creare la grafica per gli stati di rollover
Come prima cosa, create un nuovo set di livelli per ogni pulsante del banner. Quindi duplicate tutti i livelli dei pulsanti e del testo presenti nel set originale e trascinate i duplicati nei set di livelli corrispondenti. Fate doppio clic sulle miniature dei livelli duplicati dei pulsanti e scegliete un nuovo colore. Questo è il colore che apparirà quando il mouse passerà sopra al pulsante nel banner. Poiché l'effetto ha luogo all'interno dell'area del pulsante, viene definito effetto primario. Per ogni pulsante, create un'immagine diversa per il corpo del banner. Trascinate l'immagine nel set di livelli che corrisponde al pulsante. Questa è l'immagine che appare quando un utente fa clic sul pulsante nel banner. Poiché l'effetto ha luogo all'esterno dell'area del pulsante, viene definito effetto secondario. |
| |
|
| |
|
|
|
3. Passare a ImageReady
Prima di passare a ImageReady, disattivate la visibilità dei livelli per tutti i nuovi set (devono restare visibili nella finestra del documento solo i livelli del set originale). Fate clic sul pulsante Passa a ImageReady nella finestra degli strumenti. |
| |
|
| |
|
|
|
4. Creare un rollover basato sul livello
Selezionate uno dei livelli dei pulsanti nel set originale in ImageReady. Quindi fate clic sul pulsante Crea rollover in base al livello nella palette Rollover (se la palette Rollover non è visibile, scegliete Finestra > Rollover). Quando fate clic sul pulsante Crea rollover in base al livello, ImageReady crea automaticamente una sezione a partire dal livello. Quindi aggiunge lo stato Sopra, che appare sotto il nome della sezione nella palette Rollover. |
| |
|
| |
|
|
|
5. Aggiungere un effetto di rollover primario
Ora verranno usati i livelli creati al punto 2. Dopo avere selezionato lo stato Sopra nella palette Rollover, attivate la visibilità del set di livelli corrispondente al pulsante. Il pulsante cambia colore nella finestra del documento. Disattivate la visibilità del livello contenente l'immagine del corpo del banner. Questo livello sarà usato nel prossimo passaggio. Notate che non abbiamo disattivato la visibilità del pulsante d'origine Storia, in quanto tale pulsante si trova in fondo nell'ordine di sovrapposizione della palette Livelli. |
| |
|
| |
|
|
|
6. Aggiungere un effetto di rollover secondario
Fate clic sul pulsante Crea stato rollover nella palette Rollover. Nella palette Rollover appare lo stato Premuto sotto allo stato Sopra. Dopo avere selezionato lo stato Premuto, attivate la visibilità del livello contenente l'immagine del corpo del banner. A questo punto ripetete le operazioni descritte dal punto 4 al punto 6 per gli altri pulsanti del banner. Poiché avevate già creato tutti i set di livelli, è facile creare altri effetti di rollover. |
| |
|
| |
|
|
|
7. Anteprima del banner
Per verificare il funzionamento dei rollover, fate clic sul pulsante Anteprima documento nella finestra degli strumenti e fate scorrere il puntatore sopra un pulsante. Quindi fate clic sul pulsante. Dopo avere visualizzato l'anteprima del banner, fate nuovamente clic sul pulsante Anteprima documento per tornare in modalità di modifica. |
| |
|
| |
|
