Come creare rollover in Photoshop

April 1

Come creare rollover in Photoshop


Un pulsante rollover è un pulsante sul sito web che cambia il suo stato quando il mouse passa sopra di esso. Il cambiamento di stato può essere un qualsiasi numero di cambiamenti inclusi colore, font, dimensione o una combinazione di questi. pulsanti rollover aggiungono 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 modificata per la grafica più stilizzata.

istruzione

Creare il pulsante Immagini in Photoshop

1 Andate su File> Nuovo e impostare le 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 sullo sfondo campione e selezionare un colore.

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

4 Selezionate lo strumento "Tipo" dalla tavolozza degli strumenti, e impostare il carattere e la dimensione nel menu degli strumenti nella parte superiore dello schermo. Clicca sulla zona del documento e digitare il nome del pulsante, come ad esempio "Portfolio" o "casa".

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

6 Copiare sia lo sfondo e tipo di livello. Creare una copia di uno strato facendo clic destro su un livello nella palette dei livelli e selezionando "Duplica".

7 Unire i livelli di sfondo e del testo originale tenendo premuto il tasto "Shift" mentre si fa clic entrambi i livelli nella palette Livelli. Poi vai a Modifica> Unisci livelli. Rinomina il livello "normale Stato."

8 Fare doppio clic sull'immagine "T" per la sinistra del livello di testo copiato per evidenziare il testo. Fare clic sul campione di colore nel menu strumenti nella parte superiore dello schermo e selezionare un colore diverso per il testo quando il mouse passa sopra il pulsante.

9 Cambiare il colore nel livello di sfondo, se lo si desidera.

10 Unire i due strati copiati e rinominare il livello "rollover Stato." Il file dovrebbe contenere due strati: lo strato di "Stato normale" sul fondo e lo strato di "rollover Stato" in alto. Potete vedere in anteprima come il cambiamento tasto sarà girando la visibilità del livello superiore e si spegne. Cliccare sul grafico occhio a sinistra del livello per mostrare o nascondere esso.

Creare il pulsante rollover in ImageReady

11 Fare clic sul pulsante "Vai a ImageReady" nella parte inferiore della tavolozza degli strumenti con il file tasto ancora aperto.

12 Vai alla palette aspetto (in CS o più recente) o la tavolozza di rollover (nelle versioni precedenti); se non è già aperto, passare 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 livello "normale".

14 Fare clic sull'icona "Crea Nuovo Stato" nella parte inferiore della "Aspetto" o una tavolozza "rollover". Accendere la visibilità sul layer "rollover Stato" per impostarlo come stato rollover.

15 Vai alla palette fetta; se non è già aperto, si può trovare nel menu Finestra. Assegnare un URL al pulsante rollover; questa è la pagina web che l'utente sarà presa quando si fa clic sul pulsante.

16 Prova il tuo pulsante rollover cliccando sul pulsante "Anteprima nel browser predefinito" pulsante nella parte inferiore della tavolozza degli strumenti.

17 Andare su File> Salva ottimizzato per salvare il file HTML e la cartella delle immagini.

Consigli e avvertenze

  • I passi descritti qui si cammina attraverso la creazione di un semplice pulsante rollover, ma è possibile rendere le immagini normali e rollover elaborati come si desidera.