Bottone rollover

tutorial photoshop e grafica
Creiamo un nuovo documento 70 x 35 pixel con lo sfondo bianco. Impostiamo i colori di default cliccando la lettera d sulla tastiera quindi dal menù File selezioniamo Nuovo Documento, impostiamo 70 pixel di larghezza, 35 di altezza e il colore del primo livello bianco. Dalla paletta degli strumenti selezioniamo lo Strumento Rettangolo tutorial photoshop e grafica, clicchiamo sull’area di lavoro e trasciniamo la selezione fino a formare un rettangolo della dimensione che desideriamo, quindi rilasciamo il mouse. Sulla paletta dei livelli posizioniamoci sul livello del rettangolo (Anteprima livello) e con un doppio click apriamo la finestra dei colori e selezioniamo quello che preferiamo.
tutorial photoshop e grafica
Dal menù Finestre selezioniamo Rollovers per far apparire l’omonima paletta. Sulla paletta Rollovers clicchiamo due volte il bottone Nuovo Frame, in questo modo verranno generati due nuovi stati per il bottone: Su (Over) e Giù (Down). Selezioniamo lo stato Normale e dalla Paletta stili selezioniamo Plastica Sollevata (Floating Plastic). Aggiustiamo un po’ i parametri dell’ombra discendente dalla paletta dei Livelli per ottenere l’effetto che preferiamo.
tutorial photoshop e grafica
Occupiamoci ora dei due restanti stati del pulsante. Selezioniamo lo stato Sù (Over) e dalla paletta degli Stili lo stile Bottone Sù (Button-Up), poi selezioniamo lo stato Giù (Down) e attribuiamogli lo stile Ritaglio (Cutout); il pulsante è così terminato, non ci resta che vederne l’anteprima cliccando sullo strumento Visualizza nel browser
tutorial photoshop e grafica
tutorial photoshop e grafica
Nella finestra del browser verrà visualizzato il pulsante ed il codice Html con JavaScript che controlla l’effetto di Rollover. Salviamo il pulsante da File -> Salva ottimizzato con nome -> Salva come HTML e Immagini. In questo modo verranno salvate la pagina html e le tre immagini del pulsante per l’effetto Rollover pronte per essere utilizzate su internet.
Utenti on-line 10
© Copyright 2002-2005 Davide Ariata & Ilaria Ferraresso - Tutti i diritti riservati