La realizzazione di un ipermedia implica una serie di considerazioni
riguardanti la sua struttura, i contenuti, la modalit di consultazione
e, non ultima, la realizzazione dell'interfaccia.
E' molto frequente imbattersi in lavori che dal punto di vista
dei contenuti sono abbastanza ben fatti mentre sono meno curati
nell'aspetto grafico: alla realizzazione dell'interfaccia, per questioni
di capacit, mezzi, tempo a disposizione o altro, non stata dedicata
particolare attenzione. Tutto questo pu compromettere il risultato
di mesi di duro lavoro facendolo sembrare meno impegnativo di quanto
stato in realt.
Vediamo come con PSP si possono creare in modo semplice cornici
e pulsanti che andranno poi a costituire un'interfaccia di un ipermedia
curata e, soprattutto, originale.
Il risultato finale sar all'incirca il seguente (questa immagine,
come molto delle successive, una miniatura di un'immagine di dimensioni
640x480 pixel):
Iniziamo aprendo Paint Shop Pro e impostando
il colore di sfondo dell'area di lavoro (clic nella zona contrassegnata
dalla "S" dell'immagine qui a destra).
Assegniamo un colore RGB (red-green-blue) 128-0-128
e facciamo clic su OK. Apriamo un nuovo foglio (File/New)
di dimensione 640x480 punti (impostare Width 640, Height
480).
Ora che lo sfondo del nuovo foglio pronto dobbiamo selezionare
le aree a cui applicare l'effetto che ci dar per risultato l'immagine
che ci proponiamo di inserire come sfondo del nostro ipermedia.
La selezione che effettueremo non una forma geometrica semplice
(cerchio, ellisse, quadrato, ecc.) bens una selezione multipla,
cio una forma complessa che dobbiamo costruire con una sequenza
di passaggi nel corso dei quali aggiungeremo o sottrarremo aree
alla figura fino ad ottenere come risultato una selezione complessa
simile a questa:
Vediamo come fare. Attiviamo lo strumento
Selection.
Assicuriamoci di avere come strumento
di selezione il rettangolo, in caso contrario correggiamo
le caratteristiche dello strumento per mezzo della tavolozza
Tool options - Selection che visualizzabile facendo
clic sul pulsante Toggle Control Palette (visibile
qui a sinistra).
Qualora quindi la forma dello strumento
Selection non dovesse essere il rettangolo attiviamo
quest'ultimo selezionando Rectangle nella casella Selection
type.
Posizioniamoci nella parte superiore sinistra dell'immagine,
all'incirca nel punto 14,14 (le coordinate sono visibili
nella parte inferiore sinistra dello schermo), teniamo premuto il
tasto sinistro del mouse e trasciniamo spostandoci verso il bordo
inferiore destro fino a definire una selezione come questa:
In questo modo abbiamo selezionato tutta la zona centrale
dell'immagine tralasciando solo un sottile bordo esterno. Ora delimiteremo
la cornice esterna escludendo una buona parte dell'area centrale
dell'immagine.
Per sottrarre un'area ad una selezione
bisogna trascinare il mouse sull'area da escludere tenendo
nello stesso tempo premuto il tasto CTRL. Nel nostro
caso quindi eseguiamo un "CTRL+trascinamento"
sulla zona da deselezionare (notare la comparsa del segno
"meno" nella parte destra del puntatore).
Ecco il risultato:
Dobbiamo ora aggiungere una selezione.
Abbiamo visto che per sottrarre un'area
ad una selezione il mouse deve essere trascinato sull'area
da escludere tenendo nello stesso tempo premuto il tasto CTRL.
Per aggiungere un'area ad una selezione va invece tenuto
premuto il tasto Maiuscolo (SHIFT) durante il
trascinamento (notare la comparsa del segno "pi"
nella parte destra del puntatore).
Aggiungiamo alla selezione la zona in cui andremo in seguito a
collocare i pulsanti di navigazione. Posizioniamoci nel punto 300,415
(come gi detto le coordinate sono visibili nella parte inferiore
sinistra dello schermo) e, tenendo premuto il tasto Maiuscolo,
trasciniamo fino al punto 615,450:
Aggiungiamo il riquadro che conterr il titolo (tenendo premuto
il tasto Maiuscolo):
Poi il box di sinistra, quello in cui inseriremo l'immagine di
un'opera del pittore Kandinski, sempre tenendo premuto il tasto
Maiuscolo:
Definiamo il box di destra, che conterr il testo, tenendo premuto
il tasto Maiuscolo:
Si consiglia di salvare la selezione multipla appena realizzata
in modo da poterla riutilizzare anche a distanza di tempo. A tale
scopo, selezionare la voce di menu Selections/Save to disk...
chiamandola, ad esempio, "sfondo.sel". La selezione
salvata potr essere riutilizzata in seguito tramite la voce di
menu Selections/Load from disk...
Possiamo ora applicare l'effetto di PSP che d rilievo all'interfaccia.
Andiamo in Effects/Outer bevel... (oppure Image/Effects/Outer
bevel... in base alla versione di PSP), per applicare un effetto
"smusso". Selezioniamo l'opzione Angled nella sezione
Presets e proviamo ad applicare l'effetto con i seguenti
valori:
Facciamo clic su OK. Dovremmo ottenere, dopo aver disattivato
la selezione per mezzo della voce di menu Selections/Select None,
qualcosa di simile:
Siamo quasi al termine: mancano solo i pulsanti di navigazione
nella parte inferiore destra. Realizzeremo un pulsante in un nuovo
file e poi lo replicheremo all'interno dell'interfaccia incollandolo
ripetutamente.
Apriamo dunque un nuovo file che abbia come sfondo lo stesso colore
dell'interfaccia (nel nostro esempio un viola red-green-blue 128-0-128)
tramite la voce di menu File/New..., e impostiamo una dimensione
40x40 punti (valori Width 40, Height 40), poi facciamo
clic su OK.
Il pulsante avr una forma circolare e quindi lo strumento di selezione
che attiveremo il cerchio (Circle):
Selezioniamo Circle nella casella
Selection type.
Posizioniamo il cursore nel punto 20,20
(come gi detto le coordinate sono visibili nella parte inferiore
sinistra dello schermo) e, tenendo premuto il tasto sinistro
del mouse tracciamo una selezione di dimensioni 32,32
(controllare nella parte inferiore sinistra dello schermo).
Applicare ora l'effetto di PSP che crea
il pulsante. Andiamo in Effects/Inner bevel... (oppure
Image/Effects/Inner bevel... in base alla versione
di PSP), per ottenere un effetto "smusso". Selezioniamo
l'opzione Round nella sezione Presets, lasciamo
invariati tutti i valori predefiniti tranne la larghezza del
margine del pulsante (impostiamo su 6 il valore Width).
Al termine facciamo clic su OK per applicare l'effetto;
qui a destra vediamo il risultato finale dopo aver deselezionato
(voce di menu Selections/Select None).
Non resta che copiare e incollare pi volte il pulsante nell'immagine
dell'interfaccia. Per creare la copia del pulsante richiamiamo la
voce di menu Edit/Copy, poi passiamo all'immagine di destinazione
(facciamo un clic su quest'ultima) e incolliamo in modalit "incolla
come nuova selezione" (Edit/Paste/As New Selection).
Comparir una copia fluttuante del pulsante che, dopo essere stata
posizionata accuratamente potr essere fissata con un clic del mouse:
L'operazione (Edit/Paste/As New Selection) va ripetuta tante
volte quanti sono i pulsanti da inserire nell'interfaccia fino ad
ottenere il prodotto finale da importare nell'ipermedia. Va posta
molta cura nel posizionare i pulsanti in modo che risultino perfettamente
allineati:
L'interfaccia cos terminata, pronta per essere importata nell'ipermedia
che stiamo realizzando con un software autore (Neobook, Toolbook,
Incomedia...) e completata con le immagini, i testi, i suoni:
Abbiamo visto solo un esempio. Le varianti, per quanto riguarda
forme e colori, possono essere infinite. Ci che qui interessava
mostrare era solo il funzionamento di alcuni strumenti grafici che,
una volta compresi, ci permettono di dare spazio alla fantasia.
