Come creare un pulsante rollover in CS2

August 3

Come creare un pulsante rollover in CS2


Adobe Photoshop CS2 e il suo programma ImageReady compagna sono strumenti potenti per gli utenti che desiderano adottare un approccio visivo alla progettazione Web. Gli utenti possono creare rollover JavaScript, senza mai dover inserire alcun codice combinando le funzionalità di design grafico di Photoshop e l'impostazione di capacità di ImageReady comportamento. La chiave di rollover di successo sta nel capire i livelli in Photoshop.

istruzione

Creazione di un pulsante

1 Aprire Photoshop e creare un nuovo documento selezionando "File> Nuovo" dal menu delle applicazioni. Impostare le dimensioni del documento e fare clic su "OK".

2 Selezionare il "Tipo di strumento" dal pannello Strumenti a sinistra della vostra tela e cliccare ovunque sulla tela per creare un testo punto per il pulsante ( "su" o "portafoglio", per esempio). Impostare le impostazioni dei caratteri desiderata nel pannello Opzioni strumenti sopra la tela e digitare il vostro testo del pulsante. È possibile scorrere il testo attorno muovendo il cursore dal testo stesso e quindi facendo clic e trascinando nella direzione che si desidera spostarlo.

3 Duplicare il livello di testo facendo clic e trascinandola sull'icona "Crea nuovo livello" nella palette "Livelli" a destra della tela. L'icona si presenta come una pagina di piazza, con le orecchie.

4 Selezionate il livello "copia" appena creata e destro del mouse (Ctrl + clic su un Mac) sul titolo livello nella palette "Livelli". Seleziona "Opzioni di fusione" dal menu a comparsa risultante. Si aprirà una finestra di dialogo "Stile livello".

5 Fare clic sulla parola "Ombra" nella colonna "stili" a sinistra della finestra di dialogo. Fare clic sulla casella "Anteprima" in alto a destra della finestra di dialogo e regolare le impostazioni del ombra, se lo desideri.

Impostazione rollover in ImageReady

6 Selezionare l'icona ImageReady sul fondo del pannello Strumenti. Questo lancia un programma separato da Photoshop che viene con esso per ottimizzare le immagini di Photoshop per il Web.

7 Selezionare l'opzione "Strumento Slice" dal pannello Strumenti a sinistra dello schermo e fare clic e trascinare una fetta attorno al pulsante dall'alto a sinistra al basso a destra.

8 Selezionare la tavolozza "Web Content" in alto a destra dello schermo e cliccare sul pulsante.

9 Il mouse verso il basso per la palette "Livelli", dove sono esposti i diversi strati del tuo pulsante. Fare clic sull'icona occhio accanto al livello superiore, che contiene l'ombra del pulsante. Questo disabiliterà la visibilità di tale livello in modo da visualizzare solo la versione ombra non-drop del pulsante nella pagina Web quando il mouse non è in bilico su di esso.

10 Ritorna alla tavolozza "Web Content" e fare clic sull'icona della pagina cane dalle orecchie in basso per creare un nuovo stato rollover. La parola "over" apparirà accanto al nuovo stato, il che significa che l'aspetto selezionato per questo verrà visualizzato quando il mouse passa su di esso nella pagina Web.

11 Ritorna alla palette "Livelli" e disattivare la visibilità del livello dell'ombra non-drop cliccando sull'icona occhio a sinistra. Attivare la visibilità del livello ombra.

Il collegamento del tuo Rollover

12 Selezionare "Finestra> Slice" per visualizzare la palette "fetta" in alto a destra dello schermo. Selezionare questa palette.

13 Inserire un nome per il pulsante nel campo "Nome" e immettere un indirizzo URL per il ribaltamento di un collegamento a quando gli utenti fanno clic su di esso.

14 Selezionare "File> Salva ottimizzato come" dal menu dell'applicazione e creare un nome per il rollover. Selezionare "HTML e immagini" dal menu a discesa "Formato" e fare clic su "Salva".