pulsanti rollover vengono utilizzati per i menu, immagini e mappe immagine su pagine web. Quando si posiziona il mouse su un pulsante rollover, cambia. A seconda del suo scopo, potrebbe cambiare colore, il testo, le dimensioni o l'immagine. In questo esercizio, esploreremo come creare pulsanti rollover utilizzando Adobe Image Ready 7.

istruzione

1 Aprite Adobe Image Ready e selezionare "File / Nuovo" dal menu. Nella finestra di dialogo "Nuovo documento", digitare la larghezza e l'altezza (in pixel), e premere OK. Selezionare il colore di primo piano dalla casella degli strumenti, e scegliere un colore dalla finestra di dialogo "Color Picker" per il pulsante. Hit OK.

2 Selezionate lo strumento Rettangolo dalla casella degli strumenti e tirare fuori il pulsante sullo schermo dell'immagine. Il rettangolo creato apparirà su un livello nella palette Livelli. Verificare che sia selezionata la livello del rettangolo, e cliccare sul pulsante "Aggiungi uno stile di livello" nella parte inferiore della palette Livelli. Selezionare "Smusso ed effetto rilievo" per rendere il rettangolo di più simile a un pulsante.

3 Selezionare lo strumento Testo (T) dalla casella degli strumenti. Scegliere un tipo di carattere, dimensione e colore dalla barra delle opzioni di testo per il testo, e aggiungere del testo al pulsante. Selezionate lo strumento Sposta (V) dalla casella degli strumenti per allineare il testo sul pulsante. Il testo creato apparirà sul proprio livello. Assicurarsi che sia al di sopra del livello del rettangolo nella palette Livelli.

4 Creare un secondo pulsante selezionando il livello del rettangolo dalla palette Livelli e trascinandolo al pulsante "creare un nuovo livello". Un duplicato del primo strato apparirà nella palette Livelli. Selezionare il livello per il secondo pulsante, e fare clic sulla miniatura. Cambiare il suo colore nella finestra di dialogo "Color Picker", e premere OK.

5 Selezionate il livello appena duplicato dalla palette Livelli, e fare doppio clic sulla miniatura del livello per il rettangolo duplicato. Scegli un colore diverso per il tuo pulsante rollover dalla finestra di dialogo "Color Picker", e premere OK.

6 Tagliare ogni spazio in più dal vostro immagine selezionando "Immagine> Trim". Nella finestra di dialogo "Trim", selezionare "pixel trasparenti" per "based" e mettere un segno di spunta accanto alto, in basso, a sinistra ea destra. Hit OK. Qualsiasi spazio che circonda il vostro rettangolo dovrebbe essere tagliato. Se non lo è, nascondere il livello di sfondo nella palette Livelli e riprovare.

7 Selezionare "Windows> rollover" dal menu per aprire la palette Rollover. Fare clic sul livello che si desidera aggiungere un effetto di rollover dalla palette Livelli, e fare clic sul pulsante "Crea livello rollover base" dalla palette Rollover.

8 Selezionate il livello "Over Stato" dalla palette Rollover, e assicurarsi che lo strato pulsante rollover è visibile nella palette Livelli. La miniatura del pulsante "Over Stato" nella palette Rollover cambierà l'immagine del rollover selezionato dalla palette Livelli.

9 L'anteprima del lavoro selezionando "anteprima documento" (V) dalla casella degli strumenti. Salvare il file Image Ready (File> Salva) come un psd in caso di necessità di modificare in un secondo momento. Inoltre, salvare il file come una pagina Web selezionando "File / Salva ottimizzato come" dal menu. All'interno del "Salva ottimizzato come" finestra di dialogo, scegliere "HTML e immagini (* .html)" sotto "Salva come". Adobe Image Ready genererà il codice JavaScript per il pulsante rollover.
Hai appena creato un pulsante rollover.