Home page - www.alphacentauri.it    
  alphacentauri.it - tecnologie didattiche  
 

Paint Shop Pro
Iniziare con PSP
Formati grafici
Filtri
Maschere
Testo 1
Testo 2
Pulsanti rollover
Creare un'interfaccia



 

Pulsanti rollover

Home Tutorial & download Paint Shop Pro Pulsanti rollover

Le possibilit di realizzare, con PSP, pulsanti da inserire in un ipertesto o in un sito sono numerose. Si va dal pi semplice e immediato al pi macchinoso e sofisticato.

Vediamo il pi semplice, che in PSP viene realizzato grazie all'apposito comando Buttonize. E' generalmente utilizzato per ottenere pulsanti partendo da immagini.

Nell'esempio che segue si applicato l'effetto aprendo un'immagine, riducendola opportunamente alle dimensioni di un pulsante (Image/Resize) e applicando infine l'effetto pulsante (Effects/Buttonize):

EgittoEgitto "Buttonized"

Quando per i pulsanti che si desidera realizzare non contengono immagini ma testi (come quelli sulla sinistra di questa pagina), con PSP possono essere realizzati facilmente in altri modi. Vediamo allora alcuni esempi di pulsanti cosiddetti rollover (pulsanti che cambiano aspetto al passaggio del mouse).

Per ottenere l'effetto rollover necessario realizzare due pulsanti, uno normale, visualizzato al caricamento della pagina, e un altro che una variante del primo e viene visualizzato quando il mouse vi passa sopra.

Questi sono all'incirca i passaggi da eseguire:

Aprire Paint Shop Pro, impostare il colore di sfondo dell'area di lavoro (clic nella zona contrassegnata dalla "S" dell'immagine qui a destra).
Assegnare un colore RGB (red-green-blue) 0-0-128 e fare clic su OK. Aprire un nuovo foglio (File/New) di dimensione 140x40 punti (impostare Width 140, Height 40).






Strumento Selection

Attivare lo strumento Selection.


 

Tavolozza dei colori

 

Nelle opzioni dello strumento di selezione (Tools Options - Selection) scegliere la forma ellittica (Ellipse).





Visualizza/nasconde le opzioni degli strumenti

Nel caso la scheda Tool Options - Selection non fosse visibile, visualizzarla facendo clic sul pulsante Toggle Tool Options Window.

 

Opzioni dello strumento Selection

 

Posizionare il cursore al centro dell'area di lavoro, tenere premuto il tasto sinistro del mouse e trascinare fino a realizzare una forma geometrica simile a quella dell'immagine qui accanto.

 

A questo punto prima di applicare l'effetto consigliabile salvare la selezione appena effettuata in modo da poterla richiamare successivamente per riutilizzarla pi volte, anche a distanza di tempo. Salvare la selezione per mezzo di Selection/Save to disk...

 

Possiamo ora applicare alla selezione l'effetto che realizza un pulsante a rilievo. Scegliamo Effects/3D effects/Outer bevel..., selezioniamo l'effetto Angled nella casella Presets e impostiamo Width 4. Otterremo un risultato simile a quello mostrato qui a destra. Riduciamo il numero dei colori a 256 (Colors/Decrease color depth/256 colors ) e salviamo il pulsante in formato *.Gif (File/Save as, Salva come Compuserve Graphics Interchange GIF) e assegnamogli il nome pulsante_off.

 

Il passo successivo la realizzazione della variante del pulsante che comparir al passaggio del mouse (la chiameremo "pulsante_on" e rappresenter un pulsante non pi in rilievo bens incassato). Dobbiamo allora aprire una nuova immagine (File/New) di dimensione 140x40 punti (impostare Width 140, Height 40) che, come per il pulsante "pulsante_off" appena creato, abbia lo sfondo blu (colore RGB (red-green-blue) 0-0-128).

Carichiamo la selezione che abbiamo salvato in precedenza (Selections/Load from disk...)



Applichiamo alla selezione l'effetto che realizza un pulsante incassato. Scegliamo Effects/3D effects/Outer bevel..., selezioniamo l'effetto Angled nella casella Presets e impostiamo Width 4.
Andremo a cambiare, rispetto a pulsante_off, solo l'angolo di incidenza della luce nella sezione Light: imposteremo un valore Angle di 135 (l'opposto di pulsante_off, che era 315).
Otterremo un risultato simile a quello mostrato qui a destra. Riduciamo il numero dei colori a 256 (Colors/Decrease color depth/256 colors ) e salviamo il pulsante in formato *.Gif (File/Save as, Salva come Compuserve Graphics Interchange GIF) e assegnamogli il nome "pulsante_on".

Ora che il pulsante pronto (sia nella versione statica che in quella al passaggio del mouse) possiamo utilizzare l'effetto rollover. Il risultato lo possiamo inserire sia in un ipermedia utilizzando un software autore tipo Amico o Incomedia, oppure in una pagina web (la realizzazione di un effetto rollover abbastanza semplice con programmi come FrontPage o con DreamWeaver).

Il risultato finale sar il seguente:

Passare con il mouse
sopra il pulsante
-------------->

Effetto ROLLOVER

Variando i parametri in Effects/3D effects/Outer bevel... le possibilit e gli effetti che si possono ottenere sono infiniti. Abbiamo presentato qui solo un semplice esempio.

 

 

 

 

Leggimi - note legali