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.