Come creare rollover in Photoshop

Un pulsante rollover è un pulsante sul sito web che cambia il suo stato quando il mouse su di esso. Il cambiamento di stato può essere un qualsiasi numero di cambiamenti tra cui colore, font , dimensione o una combinazione di questi. Pulsanti rollover aggiungere smalto e professionalità al tuo sito web e possono essere create facilmente in Adobe Photoshop e ImageReady . Questi passaggi dettaglio come creare un pulsante rollover semplice , ma il processo può essere modificato per la grafica più stilizzata . Cose che ti serviranno
Adobe Photoshop
ImageReady
Show More Istruzioni
creare il pulsante Immagini in Photoshop
1

Andate su File > Nuovo e impostare il dimensioni dell'immagine a 80 da 25 pixel con una risoluzione di 72 pixel per pollice .
2

Fare clic sul campione di colore di primo piano nella parte inferiore della palette degli strumenti sul lato destro dello schermo . Selezionare un colore per il testo sul pulsante . Quindi fare clic sul campione di sfondo e selezionare un colore .
3

Premere " " Control + Backspace per riempire l'area dell'immagine con il colore di sfondo scelto .
4

Selezionare la funzione " Tipo " dalla tavolozza degli strumenti e impostare il tipo di carattere e la dimensione nel menu degli strumenti nella parte superiore dello schermo. Fare clic sull'area del documento e digitare il nome del pulsante , ad esempio " Portfolio" o "casa".
5

Utilizzare lo strumento "Sposta" per allineare il testo a proprio piacimento .

6

Copia sia il background e livello di testo . Creare una copia di un livello facendo clic destro su un livello nella palette dei livelli e selezionando " Duplica ".
7

Unisci lo sfondo originale e livelli di testo tenendo premuto il tasto "Shift" mentre cliccando su entrambi livelli nella palette Livelli. Poi vai a Modifica> Unisci livelli . Rinominate il livello " stato normale. "
8

doppio clic sull'immagine a "T " a sinistra del livello di testo copiato per evidenziare il testo . Fate clic sul campione di colore nel menu degli strumenti nella parte superiore dello schermo , quindi selezionare un colore diverso per il testo quando il mouse passa sopra il pulsante .
9

Cambiare il colore del livello di sfondo , se desiderato .
10

unire i due strati copiati , e rinominare il livello " stato di rollover ". Il file dovrebbe contenere due strati : la "Normale Stato " strato sul fondo e lo " stato di rollover " livello superiore . Potete vedere in anteprima come il cambiamento pulsante apparirà girando la visibilità del livello superiore e si spegne. Clicca sul pulsante occhio grafico a sinistra del livello per mostrare o nascondere.
Creare il pulsante rollover in ImageReady
11

Fare clic su " Vai a ImageReady " . nella parte inferiore della palette degli strumenti con il file del pulsante ancora aperto
12

Vai alla palette aspetto ( in CS o versione successiva) o la palette Rollover ( nelle versioni precedenti ), se non è già aperto , andare al menu Finestra e selezionare la tavolozza dal menu a discesa
13

nascondere il livello " Rollover Stato ."; questo imposterà lo stato normale del pulsante per il " normale " strato .
14

Fare clic su " Crea nuovo Stato " icona nella parte inferiore della "Aspetto" o palette " Rollover " . Accendere la visibilità sul " stato di rollover " strato per impostarlo come stato rollover
15

Vai alla tavolozza fetta , . Se non è già aperto, lo si può trovare nella Finestra menu. Assegnare un URL al pulsante rollover , questa è la pagina web che l'utente saranno adottate per quando si fa clic sul pulsante
16

provare il pulsante rollover con il pulsante " Preview Browser di default in" pulsante . vicino alla parte inferiore della tavolozza degli strumenti .
17

Vai su File > Salva Ottimizzato per salvare il file HTML e cartella di immagini.