Nwlapcug.com


Come creare un pulsante Rollover

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

Istruzioni

1

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

2

Selezionare lo strumento rettangolo nella casella degli strumenti e disegnare il pulsante sullo schermo di immagine. Il rettangolo creato verrà visualizzato su un proprio livello nella palette livelli. Controllare che il livello di rettangolo è selezionata e fare clic sul pulsante "Aggiungi uno stile di livello" nella parte inferiore della palette livelli. Selezionare "Smusso ed effetto rilievo" per rendere il vostro rettangolo 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 che è stato creato verrà visualizzato su un proprio livello. Assicurarsi che è sopra il livello del rettangolo nella palette livelli.

4

Creare un secondo pulsante di selezione del livello di rettangolo dalla palette livelli e trascinandolo sul pulsante "Crea un nuovo livello". Un duplicato del tuo primo livello verrà visualizzato nella palette livelli. Selezionate 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

Seleziona il livello appena duplicato dalla palette livelli e fare doppio clic sulla miniatura del livello per il rettangolo di duplicati. Scegliere un colore diverso per il tuo pulsante rollover nella finestra di dialogo "Color Picker" e premere OK.

6

Tagliare qualsiasi spazio aggiuntivo dall'immagine selezionando "Image > Trim." Nella finestra di dialogo "Trim", selezionare "Pixel trasparenti" per "Base" e inserire un segno di spunta al lato superiore, inferiore, sinistro e destro. Premere OK. Qualsiasi spazio aggiuntivo che circonda il rettangolo ora deve 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 "Creare Layer base Rollover" dalla palette rollover.

8

Selezionate il livello di "Stato sopra" dalla palette rollover e assicurarsi che il livello di pulsante rollover è visibile nella palette livelli. La miniatura del pulsante "Stato sopra" nella tavolozza rollover cambierà l'immagine di rollover selezionato dalla palette livelli.

9

Visualizzare in anteprima il vostro lavoro selezionando "Anteprima del documento" (V) dalla casella degli strumenti. Salvare il file Image Ready (File > Salva) come un PSD in caso hai bisogno di modificarla in seguito. Inoltre, salvare il file come pagina web selezionando "File/Salva ottimizzato come" dal menu. All'interno della finestra di dialogo "Salva ottimizzato come", selezionare "HTML e immagini (*. html)" in "Salva come tipo". Adobe Image Ready genererà il codice JavaScript per il pulsante rollover.
Hai appena creato un pulsante rollover.