Document

FIREWORKS 4:
fuochi d’artificio sul Web
a.a. 2003-2004
Viviana Patti
A cosa serve Macromedia Fireworks? È un programma di grafica
orientato allo sviluppo di immagini e animazioni per il web. In particolare
rispetto ad altri programmi come ad esempio Photoshop offre la possibilità di
manipolare grafica vettoriale ad un livello avanzato, la possibilità di
realizzare GIF animate, e strumenti per la creazione di effetti web (ad
esempio pulsanti con rollover, mappe, etc). Tuttavia Fireworks non è un
programma per creare pagine web: esso manipola solo oggetti grafici ed è
possibile creare da esso una pagina web solo se essa contiene
esclusivamente grafica (ad es. una schermata iniziale con un’animazione). È
comunque molto utile per creare parti di pagine web come ad esempio una
barra di navigazione. Trattandosi di un prodotto Macromedia può essere
facilmente integrato con Dreamweaver per realizzare un sito web completo.
1
Grafica Vettoriale
Grafica Bitmap
1
2
3
Fireworks distingue due tipi di oggetti: oggetti vettoriali e oggetti
bitmap. Che differenza c’è?
Un oggetto vettoriale è costituito da una sequenza di segmenti, che
vengono memorizzati registrando le coordinate delle estremità di ciascun
segmento. Tali segmenti possono essere dritti o curvi, e possono essere uniti
a formare una linea spezzata, aperta o chiusa. Un oggetto vettoriale ha
inoltre degli attributi, come ad esempio il colore e lo spessore della linea, il
riempimento se si tratta di una figura chiusa (ad es. un rettangolo), etc. Gli
attributi sono memorizzati separatamente dalle coordinate, per cui una
volta creato l’oggetto è possibile modificare le coordinate (vedi passaggi 1, 2
e 3) lasciando inalterati gli attributi, oppure modificare gli attributi senza
cambiare la forma dell’oggetto.
Un oggetto bitmap è invece memorizzato semplicemente come una griglia
di pixel a ciascuno dei quali è associato un colore. Una volta disegnata una
linea, essa non è più una “linea” ma solo un insieme di pixel sullo schermo,
pertanto non è più possibile modificarne le coordinate. Le manipolazioni che
si possono fare su un oggetto bitmap sono molto differenti da quelle che si
possono fare su un oggetto vettoriale, perché si basano sul concetto di pixel.
Ad esempio i filtri possono essere applicati solo ad oggetti bitmap.
Photoshop è un programma specializzato nella manipolazione di bitmap:
permette anche di creare oggetti vettoriali ma non offre strumenti sofisticati
per manipolarli. Per quanto riguarda Fireworks siamo un po’ nella situazione
opposta.
La grafica vettoriale è molto usata dai grafici professionisti, e esistono molti
altri prodotti che la utilizzano (ad es. CorelDraw).
2
L’ambiente di lavoro
barra degli strumenti
finestrella a schede
La schermata principale di Fireworks è molto simile a quella di altri software di
grafica.
Sulla sinistra si trova la barra degli strumenti, molto simile a quella di Photoshop.
Le varie opzioni e informazioni sono raggruppate in schede, a loro volta raggruppate
in piccole finestre, visibili sul lato destro dello schermo.
È possibile spostare le schede da una finestrella ad un’altra. Il raggruppamento
proposto inizialmente da Fireworks cerca di emulare quello di altri programmi per
grafica, in modo da risultare familiare. Queste finestrelle possono essere chiuse; è
possibile riaprirle dal menu Window.
3
Esercizio 1:
Disegnare oggetti vettoriali
Esercizio 1: Disegnare oggetti vettoriali.
Passo 1: aprire un nuovo documento dal menu File->New… e impostare le
dimensioni del foglio di lavoro a 400 x 400.
Passo 2: scegliere dalla barra degli strumenti lo strumento Ovale.
Spostando il cursore sul foglio di lavoro si può notare che esso assume la
forma di una croce.
Passo 3: disegnare un ovale (premendo contemporaneamente Shift viene
disegnato un cerchio) trascinando il mouse sul foglio di lavoro.
Passo 4: salvare l’immagine dal menu File->Save As… chiamandola ad
esempio cerchio. Fireworks salva le immagini nel formato PNG (Portable
Network Graphics). Altri programmi di grafica (ad es. Photoshop) sono in
grado di leggere questo formato; tuttavia non è detto che riescano a
riconoscere i diversi oggetti vettoriali (ad es. Photoshop non ci riesce).
Vedremo in seguito come è possibile esportare immagini in formati diversi.
4
Esercizio 1:
Disegnare oggetti vettoriali
Fig. 2
Selezione dell’oggetto
con il Puntatore Nero
Fig. 1
I due Puntatori
Fig. 3
Selezione e spostamento
di un punto con il
Puntatore Bianco
Vediamo ora come è possibile modificare la forma di un oggetto vettoriale
disegnato. Prima di tutto un po’ di terminologia.
I Puntatori: in Fireworks ci sono due strumenti Puntatore: un Puntatore
Nero e un Puntatore Bianco (Fig.1). Essi funzionano in modo leggermente
diverso. Per ora diciamo che il Puntatore Nero si può usare per selezionare un
oggetto vettoriale intero e spostarlo. Il Puntatore Bianco permette di
selezionare i singoli punti che compongono il tracciato vettoriale, e di
spostarli modificando quindi la forma dell’oggetto.
Selezione dell’oggetto con il Puntatore Nero: il tracciato vettoriale
dell’oggetto viene evidenziato in azzurro (Fig. 2). I punti che compongono il
tracciato sono visualizzati come quadratini pieni.
Selezione di un punto del tracciato con il Puntatore Bianco: cliccando
con il Puntatore Bianco sul tracciato esso viene visualizzato sempre in
azzurro, ma i punti sono visualizzati come quadratini vuoti. Per selezionare
un punto si può cliccare su di esso con il puntatore. Una volta selezionato il
punto appare come un quadratino pieno, ed inoltre viene visualizzato un
bilanciere che rappresenta la curvatura dei segmenti collegati al punto
(Fig. 3). Trascinando il mouse dopo aver cliccato su un punto, si sposta il
punto.
Proseguiamo l’esercizio…
Passo 5: selezionare il Puntatore Bianco e modificare il cerchio come in
figura.
Passo 6: salvare l’immagine ottenuta con il nome Uovo.png
5
Esercizio 1:
Disegnare oggetti vettoriali
A. Utilizzo dei bilancieri per modificare la curvatura dei segmenti.
B. Uso dei bilancieri premendo il tasto ALT
A. Utilizzo dei bilancieri per modificare la curvatura di un segmento
I bilancieri compaiono quando si seleziona un punto del tracciato vettoriale con il
Puntatore Bianco, e servono a modificare la curvatura dei segmenti. Per utilizzare i
bilancieri è necessario cliccare con il Puntatore Bianco su una delle estremità e
trascinarla come desiderato. È possibile cambiare:
• l’orientamento del bilanciere (in questo caso viene modifcato
contemporaneamente l’orientamento di entrambe le braccia del bilanciere, che
restano sempre allineate)
• la lunghezza di un braccio del bilanciere; la lunghezza dei due bracci può essere
diversa.
B. Uso dei bilancieri premendo il tasto ALT
Se si tiene premuto il tasto ALT mentre si trascina il braccio di un blianciere, è possibile
modificare l’orientamento di un solo braccio del bilanciere, ottenendo così una
forma tipo punta o cuspide (si veda la fig. B)
Proseguiamo l’esercizio…
Passo 7: modificare la forma del tracciato utilizzando il bilanciere come in figura A.
Passo 8: annullare la modifica con il menu Edit->Undo (o alternativamente
premendo i tasti CTRL+Z)
Passo 9: modificare la forma del tracciato utilizzando i bilancieri insieme al tasto ALT.
Per realizzare l’ultima immagine in Fig. B a forma di goccia è necessario spostare
separatamente i due bracci.
Passo 10: salvare l’immagine ottenuta con il nome Goccia.png
6
Esercizio 2:
Attributi di un tracciato vettoriale
A. Il Tratto (Stroke)
Categoria e Tipo di tratto
Colore
Pressione della Punta
Dimensione della Punta
Texture di Sfondo
Visibilità della Texture
Gli attributi principali di un tracciato vettoriale sono:
• il Tratto (Stroke)
• il Riempimento (Fill)
• gli Effetti (Effect)
Esaminiamo ora il Tratto. Fireworks mette a disposizione diverse categorie
di pennelli con cui realizzare il tratto. Ci sono ad esempio carboncino
(charcoal), gessetto (crayon), acquerello (watercolour), pennello ad olio
(oil), penna stilografica (calligraphy) e molti altri. Inoltre per ciascuna
categoria è possibile scegliere un tipo di tratto. Ad esempio il carboncino
può essere di tipo cremoso (creamy), pastello (pastel), leggero (soft) e
texturizzato (textured).
È inoltre possibile impostare:
• la pressione della punta (ossia quanto è marcato il tratto);
• la dimensione della punta (lo spessore del tratto);
• il colore del tratto
• la texture di sfondo (che corrisponde alla grana del foglio);
• la visibilità della texture (che determina quanto la grana emerge da
sotto il tratto, un po’ come in un foglio più o meno ruvido).
7
Esercizio 2:
Attributi di un tracciato vettoriale
A. Il Tratto (Stroke)
Tavolozza Completa
Modifica del tratto dell’immagine
Esercizio 2: Attributi di un tracciato vettoriale
Passo 1: se è stata modificata, ricaricare l’immagine Goccia.png
Passo 2: modificare il tratto della goccia come visualizzato in figura.
Osservazione: la finestra per la scelta dei colori propone inizialmente solo i
colori sicuri per il web, ossia quei colori che tutti i browser sono in gradi
di riprodurre. Volendo scegliere altri colori, si può cliccare sul pulsante
apposito, evidenziato nell’immagine.
8
Esercizio 2:
Attributi di un tracciato vettoriale
B. Il Riempimento (Fill)
Tipo di Riempimento
Colore
Bordi del Riempimento
Texture di Sfondo
Visibilità della Texture
Vediamo ora il Riempimento. Abbiamo i tipi di riempimento standard: tinta
unita (solid), sfumatura (linear, radial, ellipse, etc.) e motivo (pattern).
Inoltre c’è il tipo di riempimento web dither che permette di visualizzare
un colore non-sicuro (per quanto riguarda il web) tramite una griglia di
punti di colori sicuri. Se si sceglie questa opzione la finestra Fill cambia
sensibilmente, visualizzando un editor per la griglia.
È inoltre possibile impostare:
• il tipo di bordo del riempimento (sgranato (hard), arrotondato (antialias) o sfumato (feather));
• il colore del riempimento
• la texture di sfondo (che corrisponde alla grana del foglio);
• la visibilità della texture (che determina quanto la grana emerge da
sotto il tratto, un po’ come in un foglio più o meno ruvido).
9
Esercizio 2:
Attributi di un tracciato vettoriale
B. Il Riempimento (Fill)
Fig. 1
Il riempimento a sfumatura lineare
Fig. 3
Cambiare l’orientamento
della sfumatura.
Fig. 2
Modificare la combinazione di colori
Fig. 4
Lo strumento Riempimento
Proseguiamo con l’esercizio…
Passo 3: scegliere come riempimento la sfumatura lineare (linear) che di
default ha orientamento orizzontale (evidenziato dal segmento orizzontale
con due quadratini agli estremi che appare sulla figura).
Passo 4: per modificare i colori della sfumatura è possibile scegliere una
combinazione predefinita o premere il pulsante edit. In questo caso si
scelga la seconda opzione. Appare una finestra in cui è possibile impostare
la combinazione di colori che compongono la sfumatura in modo analogo a
Photoshop. Si scelgano due colori.
Passo 5: modificare l’orientamento della sfumatura trascinando uno degli
estremi dell’apposito segmento.
Osservazione: se si compie qualche altra operazione il segmento che
definisce l’orientamento della sfumatura scompare. Per farlo ricomparire si
può cliccare sullo strumento riempimento (vedi Fig. 3)
10
Esercizio 2:
Attributi di un tracciato vettoriale
B. Il Riempimento (Fill)
Tratto interno al tracciato
Tratto centrato sul tracciato
Tratto esterno al tracciato
Opzione Riempimento
Opaco sul Tratto
Fig. 1
Tratto interno ed esterno
Fig. 2
Riempimento trasparente od opaco
Fireworks offre la possibilità di regolare la posizione del tratto sull’oggetto
e l’opacità del riempimento rispetto al tratto.
La finestrella Object(Path) che permette di regolare questi attributi
compare solo a oggetto selezionato. Ad esempio in figura
vedete la finestrella Object associata alla goccia che stiamo disegnando.
In generale è possibile impostare:
• la posizione del tratto rispetto al tracciato che delimita l’oggetto. Si può
scegliere fra tratto interno al tracciato (draw stroke inside path),tratto
centrato sul tracciato (draw stroke centered on path) oppure tratto
esterno al tracciato (draw stroke outside path). In Fig. 1 è possibile
vedere la differenza fra tratto interno ed esterno.
• l’opacità del riempimento rispetto al tratto. Quando l’opzione di
riempimento opaco è selezionata, il riempimento copre le porzioni di
tratto che cadono all’interno del tracciato dell’oggetto. Quando l’opzione
non è selezionata (come nel caso della nostra goccia), abbiamo un
riempimento parzialmente trasparente che si mescola al tratto interno
all’oggetto. In Fig. 2 il tratto è centrato rispetto al tracciato, e si può
vedere la differenza fra riempimento trasparente ed opaco.
11
Esercizio 2:
Attributi di un tracciato vettoriale
C. Gli Effetti (Effect)
Fig. 1:
Impostare i parametri di
un effetto.
Fig. 2:
L’elenco degli effetti
applicati al tracciato
vettoriale.
Per concludere, è possibile assegnare ad un tracciato vettoriale degli effetti.
Gli effetti sono sostanzialmente gli stessi presenti in Photoshop.
Proseguiamo con l’esercizio…
Passo 6: andare nella finestrella Stroke e scegliere “None” (nessuno).
Quindi spostarsi sulla finestrella Effect. Inizialmente anche qui compare
“None” (nessuno).
Passo 7: cliccare sul menu a tendina per far comparire l’elenco degli effetti,
e scegliere ad esempio Shadow and Glow->Drop Shadow.
Passo 8: impostare i parametri dell’effetto come visualizzato in Fig. 1.
Passo 9: gli effetti applicati vengono elencati nella finestrella. È possibile
disabilitarli cliccando sulla check-box, cambiarne i parametri cliccando sul
simbolo con la lettera “i”, oppure eliminarli trascinandoli nel cestino. Si
provi ad inserire un altro effetto (in Fig. 2 è stato aggiunto EyeCandy
4000 LE->Bevel Boss…), e quindi ad eliminarlo.
12
Esercizio 3:
Fig. 1:
Utilizzo del Pennello
Utilizzo della Penna
Fig. 2:
Utilizzo della Penna
Gli strumenti Penna e Pennello permettono di disegnare tracciati vettoriali
in modo più libero. In particolare:
• lo strumento Pennello permette di disegnare un tracciato a mano libera (e,
a meno di non possedere una penna grafica, è molto difficile da usare). In
Fig. 1 è visualizzato il tipo di tracciato ottenibile con il pennello.
• lo strumento Penna permette di specificare uno per volta i punti che
compongono il tracciato; un esempio è visualizzato in Fig. 2.
13
Esercizio 3:
Fig. 1a:
Linea aperta formata da segmenti
dritti
Utilizzo della Penna
Fig. 1b:
Linea chiusa formata da segmenti
dritti e curvi
Fig. 2:
Eliminare punti da un tracciato vettoriale.
Ci concentreremo ora sulla Penna che nasconde alcuni “segreti”: infatti lo strumento si
comporta diversamente a seconda di come viene utilizzato.
Per cominciare vediamo come creare un tracciato. Per impostare i punti appartenenti al
tracciato è sufficiente cliccare sull’area di lavoro dove si desidera che essi compaiano.
Mentre si aggiungono i punti, Fireworks traccia i segmenti che li congiungono. Questi
segmenti possono essere linee rette oppure avere una curvatura. Questo dipende da
come si rilascia il pulsante del mouse dopo aver premuto per aggiungere un punto.
Se lo si rilascia immediatamente il segmento sarà retto. Se lo si trascina prima di
rilasciarlo si vedrà che questo movimento permette di dare una curvatura al segmento.
Per terminare il tracciato ci sono due possibilità: o si chiude il tracciato cliccando di nuovo
sul punto di partenza, oppure quando si vuole inserire l’ultimo punto si fa un doppio
click. Se a questo punto si riutilizza la penna si creerà un nuovo tracciato.
Esercizio 3: Utilizzo della Penna
Passo 1: aprire un nuovo documento.
Passo 2: si provi ad utilizzare la penna per creare la linea spezzata in Fig. 1a: qui ci sono
solo segmenti dritti, senza curvatura. Inoltre la linea viene terminata con un doppio click.
Passo 3: si provi ora ad utilizzare la penna per creare la forma di fungo in Fig. 1b: qualche
segmento è dritto, qualcuno è curvo. Il tracciato viene terminato automaticamente
cliccando di nuovo sul punto di partenza.
Passo 4: vediamo ora come eliminare un punto da un tracciato. Se ci posizioniamo con la
Penna su un punto esistente nel tracciato del fungo dopo averlo selezionato,
possiamo osservare che compare un segno “–” accanto al puntatore. Infatti se
clicchiamo con la penna su un punto esistente del tracciato lo eliminiamo (Fig. 2)
14
Esercizio 3:
Utilizzo della Penna
Fig. 1:
Aggiungere punti ad un tracciato vettoriale.
Fig. 2a:
il Taglierino
Fig. 2b:
Il tracciato viene aperto nel punto di taglio.
Proseguiamo con l’esercizio…
Passo 5: adesso vediamo come aggiungere un punto da un tracciato. Se ci
posizioniamo con la Penna su un segmento del fungo (quindi non su di
un punto del tracciato, ma su una porzione di linea) dopo averlo
selezionato, possiamo osservare che compare un segno “+” accanto al
puntatore. Infatti se clicchiamo con la penna su un segmento del
tracciato vi aggiungiamo un punto (Fig. 1). Possiamo poi spostare il
punto aggiunto usando il Puntatore Bianco.
Passo 6: infine vediamo come aprire un tracciato. A questo scopo si deve
innanzitutto selezionare il tracciato da aprire.
Passo 7: si scelga ora lo strumento Taglierino (Fig. 2a) e si tracci una linea
di taglio nel punto desiderato: si vedrà che sulla figura è comparso un
nuovo punto.
Passo 8: spostando il nuovo punto ci si accorgerà che il tracciato è stato
aperto (Fig. 2b). È sempre possibile “continuare” il disegno di un tracciato
aperto partendo da uno dei suoi estremi (mentre un tracciato chiuso non
può più essere proseguito).
Passo 9: se si desidera conservare l’immagine, la si salvi.
15
Esercizio 4:
Livelli e Raggruppamento
Fig. 1a:
lo strumento Poligono
Fig. 2a:
Un pentagono
Fig. 1b:
la scheda Tool Options
Fig. 2b:
Una stella a 5 punte
Fig. 2c:
Pentagono e stella
sovrapposti
Esercizio 4: Livelli e Raggruppamento
Passo1: aprire un nuovo documento di dimensioni 400x400.
Passo 2: selezionare lo strumento Poligono (Fig. 1a). Tale strumento
permette di disegnare sia poligoni regolari di un numero arbitrario di lati,
sia stelle di un numero arbitrario di punti. Le impostazioni si trovano nella
scheda Tool Options (Fig. 1b). Da tale scheda è possibile scegliere:
• il tipo di forma (shape), ossia stella (star) o poligono (polygon);
• il numero di punte/lati (sides) che la forma deve avere;
• nel caso di una stella, l’angolo (angle) tra le punte che può essere
impostato su automatico (automatic).
Passo 3: disegnare un pentagono (poligono con 5 lati) come in Fig. 2a.
Passo 4: disegnare una stella a 5 punti come in Fig. 2b.
Passo 5: posizionare (con il Puntatore Nero) la stella al di sopra del
pentagono come in Fig. 2c.
Passo 6: salvare l’immagine con il nome Stella.png. Questa immagine sarà
il punto di partenza per i prossimi esercizi, quindi converrà salvare
eventuali modifiche in file dal diverso nome.
16
Esercizio 4:
Livelli e Raggruppamento
Fig. 2a:
Cambiare
l’ordine
dalla
scheda
Layers.
Fig. 1:
La scheda Layers
Fig. 2b:
Cambiare l’ordine dal
menu di tasto destro.
I Livelli
Osserviamo ora la scheda Layers (Fig. 1): vediamo che sebbene la stella e il
pentagono si trovino in uno stesso livello, essi sono separati. In Fireworks
ogni tracciato vettoriale viene mantenuto separato, indipendentemente
dal livello in cui si trova. Mentre in Photoshop per gestire separatamente
due parti di un’immagine è necessario inserirle su due livelli diversi, in
Fireworks questo non accade, perché due tracciati vettoriali vengono
sempre gestiti separatamente. Ciascuno di essi, sebbene si trovino in uno
stesso livello, ha le sue impostazioni di visibilità (l’icona dell’occhio),
trasparenza, etc. In Fireworks creare diversi livelli ha pertanto il significato
di suddividere logicamente i diversi oggetti, in modo da gestirli più
comodamente. Si tratta tuttavia di una possibilità in più utilizzabile per
maggiore comodità, ma non di qualcosa di assolutamente necessario per
ottenere determinati risultati. È possibile notare che oltre al livello in cui si
trovano la stella e il pentagono è presente un altro livello, vuoto, che si
chiama Web Layer. Si tratta di un livello particolare di cui vedremo più
avanti la funzionalità.
Proseguiamo con l’esercizio…
Passo 7: è possibile cambiare l’ordine di sovrapposizione degli oggetti
trascinando, nella scheda Layers, il sottolivello di un oggetto nella
posizione desiderata. Si provi a spostare la stella sotto il pentagono come
in Fig. 2a.
Passo 8: c’è un secondo modo per cambiare l’ordine di sovrapposizione degli
oggetti. Si clicchi con il tasto destro sulla stella e si scelga Arrange>Bring to Front (ossia Riordina -> Porta in primo piano). La stella
ritornerà davanti al pentagono.
17
Esercizio 4:
Livelli e Raggruppamento
Fig. 2a:
Come cambiare
il tratto.
Fig. 2b:
Il tratto cambia
in entrambi gli
oggetti.
Fig. 1:
L’oggetto-gruppo.
Raggruppamento di più oggetti
È possibile raggruppare più oggetti, creando un unico oggetto-gruppo.
Vediamo come.
Proseguiamo con l’esercizio…
Passo 9: si selezionino contemporaneamente la stella e il pentagono
utilizzando il Puntatore Nero. Per selezionare più oggetti si tenga premuto
il tasto SHIFT mentre si clicca sugli oggetti da selezionare.
Passo 10: si selezioni il menu Modify->Group, oppure si scelga la voce
Group dal menu del tasto destro.
Passo 11: si osservi che nella scheda Layers il gruppo è raffigurato come un
unico oggetto-gruppo. Inoltre quando il gruppo è selezionato, esso è
evidenziato con quattro quadratini azzurri che ne delimitano l’area (Fig.
2). Selezionando il gruppo con il Puntatore Nero non vengono più
visualizzati i tracciati degli oggetti presenti nel gruppo. Quando un
oggetto-gruppo è selezionato è possibile cambiare gli attributi a tutti gli
oggetti del gruppo con una singola azione.
Passo 11: si cambi l’attributo Tratto come mostrato in Fig. 2a (categoria
Unnatural, tipo Outline, presisone massima, dimensione 20, visibilità
della texture 0%): il Tratto viene cambiato ad entrambi gli oggetti. Il
risultato dovrebbe essere quello di Fig. 2b.
18
Esercizio 4:
Livelli e Raggruppamento
Fig. 2:
Ora è possibile
spostare la stella e
anche cambiarne la
forma.
Fig. 1:
Usare il Puntatore
Bianco per
selezionare un
singolo oggetto
all’interno di un
gruppo
Fig. 3:
Alcuni attributi
possono essere
impostati solo per
tracciati singoli, non
per gruppi.
Alcuni attributi non possono essere impostati su tutti gli oggetti di un gruppo
allo stesso tempo. Inoltre si potrebbe desiderare, dopo aver creato un
gruppo, di cambiare la forma o la posizione relativa di uno solo degli
oggetti del gruppo. Naturalmente è possibile separare gli oggetti di un
gruppo (menu Modify->Ungroup o voce Ungroup nel menu di tasto
destro), ma in realtà non è necessario. Infatti il Puntatore Bianco
permette di selezionare i singoli oggetti all’interno di un gruppo. In altri
termini, il Puntatore Bianco si comporta come se gli oggetti non fossero
raggruppati.
Proseguiamo con l’esercizio…
Passo 11: si selezioni il Puntatore Bianco. Per selezionare uno dei tracciati
del gruppo – ad esempio la stella – si clicchi con il mouse mentre il
tracciato della stella è evidenziato in rosso (Fig. 1). Si provi a spostare la
stella e a modificarne la forma trascinando uno dei punti (Fig. 2).
Passo 12: si imposti dalla scheda Object l’opzione Fill over Stroke
(riempimento opaco sul tracciato). Questa opzione non può essere
impostata per tutti gli oggetti di un gruppo simultaneamente. La si imposti
per la stella e il pentagono separatamente (Fig. 3).
Passo 13: se si desidera conservare l’immagine, la si salvi in un file dal
nome diverso. Quindi si ricarichi l’originale Stelle.png.
19
Esercizio 5:
Trasformazioni
Fig. 1a:
Lo strumento
Ridimensionare
Fig. 2a:
Lo strumento
Stortare
Fig. 3a:
Lo strumento
Distorcere
Fig. 2b:
I due oggetti in
prospettiva
Fig. 3b:
Distorsione
Fig. 1b:
La stella
rimpicciolita
Fig. 1c:
La stella
ruotata
Le trasformazioni possibili su un oggetto sono ridimensionare (scale), ruotare (rotate),
stortare (skew) e distorcere (distort). È possibile effettuare queste trasformazioni sia in
modo manuale, attraverso gli appositi strumenti, sia impostando dei valori numerici (ad
es. l’angolo di rotazione) dal menu Modify->Transform->Numeric Transform.
Per ridimensionamento, obliquità e distorsione ci sono tre strumenti separati. Tutti e tre
permettono di ruotare l’oggetto.
Esercizio 5: Trasformazioni
Passo 1: se non lo si è già fatto, caricare l’immagine Stelle.png e selezionare la stella (la
stella e il pentagono non dovrebbero essere raggruppati e pertanto la stella dovrebbe
essere selezionata con il Puntatore Nero.
Passo 2: selezionare lo strumento Ridimensionare (Fig. 1a). Per ridimensionare si
trascinino i quadratini neri: i quadratini agli angoli mantengono le proporzioni
dell’immagine, mentre quelli ai lati permettono di modificare la larghezza e l’altezza
indipendentemente. Si rimpicciolisca un poco la stella, in modo che sia completamente
contenuta nel pentagono, e la si posizioni come in Fig. 1b.
Passo 3: per ruotare la stella, si sposti il puntatore del mouse all’esterno del riquadro
delimitato dai quadratini neri. Il puntatore prenderà la forma di una freccia che ruota. A
questo punto, trascinando il mouse, si può far ruotare l’oggetto selezionato. Si ruoti la
stella in modo da ottenere la Fig. 1c.
Passo 4: lo strumento Stortare (Fig. 2a) permette di realizzare un’immagine in
prospettiva. Si raggruppino i due oggetti come visto nell’esercizio precedente, e si
selezioni lo strumento. Quindi si trascinino i quadratini agli angoli per ottenere
l’immagine in Fig. 2b.
Passo 5: lo strumento Distorcere (Fig. 3a) permette trasformazioni più libere. Si selezioni
lo strumento e si trascini uno dei quadratini agli angoli per ottenere l’immagine in Fig.
3b.
20
Esercizio 6:
Combinare più tracciati
Fig. 2:
L’unione dei tre oggetti
Fig. 1:
L’immagine di partenza
Fig. 3:
L’intersezione dei tre oggetti
Vediamo ora come combinare due o più tracciati vettoriali. Le operazioni
di combinazione sono l’unione (union), l’intersezione (intersection), il
ritaglio esterno (punch) e il ritaglio interno (crop).
Esercizio 6: Combinare più tracciati
Passo 1: ricaricare l’immagine Stelle.png e aggiungere una stella in
modo da ottenere la Fig. 1. La stella è stata ottenuta impostando
l’angolo delle punte a 20°. Questa sarà l’immagine di partenza per le
successive trasformazioni, quindi la si salvi.
Passo 2: selezionare tutti e tre gli oggetti (ad es. tenendo premuto il
tasto SHIFT); aprire il menu Modify->Combine e scegliere la voce
Union. Il risultato è visualizzato in Fig. 2. Il tracciato risultante è per
l’appunto quello la cui area interna corrisponde all’unione dei tre oggetti
precedentemente selezionati. Si può osservare che gli attributi del
tracciato risultante sono quelli dell’oggetto che si trovava sotto tutti
gli altri, ossia del pentagono.
Passo 3: ricaricare l’immagine di partenza, o annullare l’unione degli
oggetti tramite il menu Edit->Undo. Quindi provare ad applicare
l’operazione di intersezione, aprendo il menu Modify->Combine e
scegliendo Intersect. Il risultato è visualizzato in Fig. 3: il tracciato è
quello la cui area interna corrisponde all’intersezione degli oggetti
precedentemente selezionati. Di nuovo, gli attributi del tracciato
risultante sono quelli dell’oggetto sottostante gli altri.
Osservazione: il tracciato risultante da unione o intersezione non
dipende dall’ordine degli oggetti selezionati. Solo gli attributi del
tracciato dipendono dall’ordine.
21
Esercizio 6:
Combinare più tracciati
Fig. 2:
Il ritaglio esterno
Fig. 1:
L’immagine di partenza
Fig. 3:
Il ritaglio interno
Proseguiamo l’esercizio…
Passo 4: ricaricare l’immagine di partenza, e portare il pentagono in primo
piano in modo che si trovi sopra le due stelle (Fig. 1).
Passo 5: selezionare tutti e tre gli oggetti, aprire il menu Modify>Combine e scegliere la voce Punch. Il risultato è visualizzato in Fig.
2. L’oggetto che si trova sopra tutti gli altri (il pentagono) viene usato
per ritagliare gli oggetti sottoatanti; vengono conservate solo le parti
esterne ad esso. Le parti rimaste conservano gli attributi che avevano
prima del ritaglio.
Passo 3: ricaricare l’immagine di partenza, o annullare il ritaglio esterno
tramite il menu Edit->Undo. Quindi provare ad applicare l’operazione
di ritaglio interno, aprendo il menu Modify->Combine e scegliendo
Crop. Il risultato è visualizzato in Fig. 3: l’oggetto soprastante viene
usato per ritagliare gli oggetti sottostanti, ma questa volta vengono
conservate le parti interne. Di nuovo, gli attributi delle parti restanti
sono quelli che esse avevano prima del ritaglio.
Osservazione: Il ritaglio (interno od esterno che sia) non produce un
unico tracciato, ma produce un tracciato per ciascuna figura che viene
ritagliata. Nel nostro esempio, il pentagono viene usato per ritagliare,
mentre le due stelle vengono ritagliate. Per ciascuna di esse viene
prodotto un diverso tracciato vettoriale risultante dall’operazione di
ritaglio. Il tracciato risultante da ritaglio esterno o interno dipende
dall’ordine degli oggetti selezionati in quanto l’oggetto soprastante
è quello che fornisce la linea di taglio.
22
Esercizio 7:
Immagini Bitmap
Fig. 2:
Disegno…
Fig. 3:
…e cancello.
Fig. 1a:
L’immagine
Paesaggio.bmp
Fig. 1b:
L’oggetto bitmap
Fireworks permette anche di creare ed importare immagini Bitmap e di
combinarle con i tracciati vettoriali.
Esercizio 7: Immagini Bitmap
Passo 1: creare un nuovo documento di dimensioni 400x400.
Passo 2: selezionare il menu Insert->Image… e nella finestra che si
apre aprire l’immagine Paesaggio.bmp, visualizzata in piccolo in Fig.
1a.
Passo 3: cliccare ora nella posizione in cui si vuole situare l’angolo
superiore sinistro dell’immagine.
Fireworks inserisce l’immagine come un oggetto bitmap. Esso compare
come un nuovo oggetto nella scheda Layers (Fig. 1b), per cui può
essere messo sopra/sotto altri oggetti, può essere spostato, può essere
reso invisibile o parzialmente trasparente. Rispetto ad un tracciato
vettoriale però cambia il modo di modificarlo. Per modificare un
oggetto bitmap è infatti necessario per prima cosa selezionarlo, e in
secondo luogo entrare in modalità di modifica bitmap. Questo può
essere fatto o selezionando il menu Modify->Edit Bitmap oppure
facendo doppio click sull’oggetto bitmap. Quando si è nella modalità di
modifica bitmap l’immagine compare in un riquadro bicolore, e gli
strumenti di disegno cambiano leggermente (ad esempio al posto del
taglierino compare una gomma da cancellare). Ora gli strumenti di
disegno funzionano come quelli ad esempio di Photoshop, ossia non
creano un tracciato vettoriale, ma semplicemente “colorano”
diversamente i pixel dell’immagine (Fig. 2 e 3). Per uscire dalla
modalità di modifica bitmap si può selezionare il menu Modify->Exit
Bitmap Mode.
23
Esercizio 7:
Immagini Bitmap
Fig. 2a:
La bitmap
incollata dentro
il rettangolo.
Fig. 1a:
Lo strumento
Rettangolo Smussato.
Fig. 1b:
Il rettangolo smussato.
Fig. 2b:
La bitmap e il
rettangolo
sono
incatenati.
Vediamo ora come è possibile combinare in modo non del tutto ovvio la
bitmap con un tracciato vettoriale.
Proseguiamo con l’esercizio…
Passo 4: Per prima cosa ci si assicuri di essere usciti dalla modalità di
modifica bitmap. Quindi si crei un tracciato vettoriale a forma di
rettangolo smussato, con l’apposito strumento (Fig. 1a). Il rettangolo si
viene a trovare al di sopra della bitmap importata.
Passo 5: impostare gli attributi del rettangolo nel modo seguente: tratto:
nessuno; riempimento: lineare dal nero al bianco. Il risultato dovrebbe
essere simile alla Fig. 1b.
Passo 6: si selezioni l’oggetto bitmap e lo si tagli con il menu Edit->Cut
oppure con la combinazione di tasti CTRL+X.
Passo 7: si selezioni ora il rettangolo smussato e si scelga dal menu Edit
la voce Paste Inside. La bitmap verrà incollata dentro al rettangolo
(Fig. 2a), e dunque solo una parte di essa sarà visibile. Il rettangolo è
diventato una maschera vettoriale per la bitmap, nascondendo la
parte di bitmap esterna ad esso. Si osservi inoltre la scheda Layers
(Fig. 2b): la bitmap e il rettangolo sono ora visualizzati nello stesso
sottolivello, e sono “incatenati” (simbolo della catena): ciò significa che
spostando uno si sposta anche l’altro.
24
Esercizio 7:
Immagini Bitmap
Fig. 2a:
Le opzioni per
la maschera.
Fig. 1a:
La catenella è scomparsa.
Fig. 2b:
Un paesaggio
evanescente…
Fig. 1b:
Una nuova veduta sul
paesaggio.
Proseguiamo con l’esercizio…
Passo 8: è possibile rimuovere il simbolo della catenella semplicemente cliccandoci
sopra. Quando la catenella non è presente è possibile spostare il rettangolo
indipendentemente dalla bitmap. Si rimuova dunque la catenella, e si selezioni il
rettangolo cliccando sulla sua icona nella scheda Layers (Fig. 1a).
Passo 9: si provi a spostare il rettangolo: esso apparirà come una “finestra” che si
sposta sul paesaggio (Fig. 1b).
Osserviamo ora la scheda Object: essa presente eventuali impostazioni per l’oggetto
correntemente selezionato. Poiché ora abbiamo selezionato una maschera vettoriale
(il rettangolo) essa apparirà come in Fig. 2a.
Vediamo che ci sono due alternative; quella correntemente selezionata è Path Outline.
Questo significa che la maschera viene applicata utilizzando semplicemente il tracciato
vettoriale. C’è un’opzione – Show Fill and Stroke – che se contrassegnata permette
di visualizzare il tratto dell’oggetto maschera (nel nostro caso il rettangolo non ha
alcun tratto, quindi non cambia nulla).
La seconda alternativa è Grayscale Appearance. Selezionando questa alternativa la
maschera viene applicata usando la scala di grigi dell’oggetto maschera: in altre
parole la bitmap sarà completamente visibile laddove l’oggetto maschera è nero,
completamente invisibile laddove è bianco. Nelle zone in cui l’oggetto maschera è
grigio la bitmap è parzialmente visibile, con un’intensità variabile a seconda della
luminosità del grigio. In questo caso vengono considerati sia il tratto che il
riempimento dell’oggetto maschera.
Proseguiamo con l’esercizio…
Passo 10: si selezioni l’opzione Grayscale Appearance: il funzionamento è reso molto
evidente dal fatto che il rettangolo maschera ha un riempimento in scala di grigi (Fig.
2b).
25
Esercizio 7:
Immagini Bitmap
Fig. 1a:
Trascinare l’oggetto maschera…
Fig 2a:
La bitmap selezionata.
Fig. 1b:
…per rimuovere la maschera.
Fig. 2b:
Il risultato della applicazione
della maschera.
Proseguiamo con l’esercizio…
Passo 11: è possibile rimuovere la maschera trascinando l’icona
dell’oggetto maschera (il rettangolo) su un livello diverso da
quello della bitmap (Fig. 1a e 1b).
Passo 12: si annulli la rimozione della maschera con Edit->Undo (o,
alternativamente, si riapplichi la maschera tagliando la bitmap e
incollandola dentro il rettangolo).
Passo 13: è anche possibile applicare definitivamente la maschera,
creando un nuovo oggetto bitmap dalla combinazione della bitmap e
della maschera. Per fare questo si selezioni la bitmap cliccando sulla
sua icona nella scheda Layers come in Fig. 2a (attenzione: se non si
effettua questo passaggio non si otterrà il risultato desiderato!). Quindi
si scelga dal menu Modify la voce Convert to Bitmap. Mentre
l’aspetto dell’immagine non è cambiato, nella scheda Layers si può
vedere che ora c’è un’unica bitmap (Fig. 2b).
26