nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
Dreamweaver
___________________
prima parte
___________________
 

 

Dreamweaver - Tabelle e Layer
Prima parte: tutto Photoshop per realizzare la cornice.


Allora, mi ero creato un problema.
M'ero incaponito a modificare il sito con una nuovo lay-out per la presentazione delle nius.
Il problema era di quelli semplici, solo un po' lunghetti nella realizzazione della grafica quale contenitore di bottoni ed immagini.
Stabilito che flash non mi andava di usarlo, la soluzione era tutta html: tabelle e layers.
E spiego l'arcano: è possibile attivare una zona (chiamiamola bottone) contenente un'immagine (gif, jpg, png) che sia sensibile al passaggio del mouse. Fin li roba solita.
Ma fra i comandi a disposizione esiste quello di rendere visibile un layer (una specie di contenitore di testo e/o immagini), e rendere invisibili gli altri.
Quindi, immaginando una serie di layers sovrapposti, ed una serie di immagini-bottone, possiamo dire al browser di rendere visibile un layer collegato ad uno speficico bottone, quando il mouse passa (o ci si clicca, etc) sull'immagine-bottone.

Arabo, si?. Beh, poco alla volta me lo rispiego.
Passiamo alla praticaccia: Photoshop per realizzare le basi grafiche, con la solita avvertenza: è tutta roba semplice, niente che abbia pretese di alta cucina, solo che a volte anche una boiata può servire a tirarsi via da qualche impaccio e qualch'altro impiccio.

 
1
 

Qui sotto c'è il lay-out di quello che volevo realizzare. Nel riquadro centrale dovrebbero essere sistemati i layers, uno per ogni immagine-bottone, contenenti un'animazione, anzi l'animazione corrispondente al bottone.
Nella parte inferiore ci sono le immagini/bottone. E' solo lo schema, quindi non succede niente a passarci col mouse

Photoshop
 
 

 
2
    Facciamo la cornice.

Un po' di numeri. Che potremmo anche parlarne dopo, ma meglio prima. Sul mio posto (sito) ho dei limiti in orizzontale. Quindi l'immagine finale non doveva superare i 750 pixel di larghezza.
Ho aperto un nuovo file di 750 x 430 pixel.

Ho creato un nuovo livello.
Ho selezionato lo strumento sfumatura e l'ho modificato mettendo nero-bianco-nero-bianco-nero ma proprio a caso.
Ho tracciato in diagonale col mouse la direzione dello riempimento, ottenendo una roba orribile come quella qui sotto.

Utilizzando lo strumento "rettangolo arrotondato" con un valore di 25 pixel di raggio ho tracciato un rettangolo.
Il livello che si è generato ha una maschera inclusa, che non mi serve, ma non si puo' farne a meno, con quello strumento.
CTRL+T (che vuol dire trasformazione libera): ho stirato il rettangolo stondato portandolo quasi a pieno schermo, come nella figura qui sotto (qui il rettangolo è trasparente al 50% per vedere qualcosa della sfumatura al di sotto.
   
 

 
3
    Duplico il livello della sfumatura. E spiego: ho intenzione di usarla almeno due volte, e vediamo come.
Seleziono la trasparenza di livello del rettangolo stondato.
Inverto la selezione, così catturo tutto il "fuori" dall'area del rettangolo.
Seleziono il livello di una sfumatura e cancello (CTRL+CANC)

In questo modo ho ottenuto il primo perimetro esterno della cornice. Quello indicato dalla freccia nera.
Non fate caso al fondo, che si raccorda completamente col ritaglio: è la copia della sfumatura che useremo poi.
   
 

 
4
    Riseleziono la trasparenza di livello del rettangolo stondato (o inverto la selezione attuale, ma meglio ripartire, che dopo un paio di inversionio uno finisce che perde la strada).
Riduco la selezione di un 2 pixel (selezione > modifica > contrai). Questo valore può essere aumentato, per avere una cornice più spessa.
Creo un nuovo livello e lo riempio di nero.

Questo per il secondo perimetro esterno della cornice. Quello indicato dalla freccia nera.

Una cosa che non ho detto: lasciate un po' di "aria" all'esterno del rettangolo stondato: se siete a filo dell'immagine, la riduzione dei pixel della selezione non sarà corretta: è come se i bordi avessero la calamita: non si smuoverà di lì (vedi figura qui sotto: il laccetto non si smuove dalla base orizzontale).

   
 

 
5
   

Vado sul livello della sfumatura, quella a pieno schermo: ribalto il livello sia in orizzontale che in verticale.

Riseleziono la trasparenza di livello del rettangolo stondato
Riduco la selezione di un 4-5 pixel (selezione > modifica > contrai).
Inverto la selezione.
Torno sul livello sfumato che ho appera ribaltato e cancello (CTRL + CANC)

Questo il terzo perimetro esterno della cornice. Quello indicato dalla freccia nera.

   
 

 
6
    Riseleziono la trasparenza di livello del rettangolo stondato
Riduco la selezione di un 8-9 pixel (selezione > modifica > contrai).

Creo un nuovo livello r lo riempio di nero. Poi lo definisco opaco all'80%
   
 

 
7
    Riseleziono la trasparenza di livello del rettangolo stondato
Riduco la selezione di un 13-14 pixel (selezione > modifica > contrai).

Creo un nuovo livello e lo riempio di nero.
Questo livello in realtà rappresenta il "quadro".
Servirà anche da registro per alcuni abbellimenti che ora facciamo.
Così, per riconoscerlo, lo chiamo: quadro.
E con questo, fine della cornice.
Questo è un modo per farla, non l'unico. Si può ricorrere alle opzioni di fusione, si può ridurre di volta in volta il rettangolo stondato (utilizzando i numeri % di riduzione), ma questo è quello che ho fatto e questo ho raccontato.
   
 

 
8
    Di qui in poi è solo abbellimento, maquillage.

Per prima cosa riduco il quadro. Ai limiti della cornice. Per farlo o uso i righelli o lavoro a riduzioni graduali fino al punto finale. Dopo un po' mi sono stancato e, raggiunti i bordi verticali ho lasciato perdere quei pochi pixel in eccesso in orizzontale. Tanto fa lo stesso: devo comunque scaricare dei PNG in quanto la stondatura deve essere trasparente, e quindi quella parte di immagine "inutile" non mi dà fastidio.

Seleziono la trasparenza di livello del livello quadro.
Creo un nuovo livello (lo chiamo sfumatura) e traccio una sfumatura dall'azzurro al nero, in diagonale verso destra in alto:
   
 

 
9
    Altro colpo d'ombretto.

Creo un nuovo livello, al di sopra di tutti gli altri.
Con lo strumento lazo poligonale disegno un'onda. Parto dall'alto e la chiudo in basso. Ho in mente di separare il quadro in due sezioni: una sopra, l'altra in basso, a circa 2/5 dell'altezza totale.

Riempio la selezione di un azzurro medio e la dichiaro opaca al 30%.

Tutta la parte che eccede il quadro poi la tolgo alla fine.
   
 

 
10
    Duplico il livello appena creato e lo deformo (ho usato filtro > distorsione > distorsione curvilinea).
Non mi chiedete come: ho leggermente spostato i punti sulla finestra per il controllo della distorsione. E se mancavano ne ho aggiunti alcuni. Fate riferimento all'immagine, ma cum grano salis, nel senso di fare come vi piace di più. Che questa è democrazia, e che azz.

Duplico il nuovo livello e lo discorco o utilizzando la stessa definizione o modificando qualcosa nella curva.
Insomma, ne faccio un 5 copie.
   
 

 
11
 

Ora seleziono la trasparenza di livello del livello quadro (quello di registro). Inverto la selezione e, uno ad uno, seleziono i livelli con le onde azzurre e cancello il di troppo.
Poi creo un Set (chiamiamolo onde) e trascino nel set i 5 livelli. Lo faccio per fare sì un po' d' ordine, ma anche perchè mi serve per dopo.

 
 

 
12
    Qui si fa complicato se non rispiego.
E si fa complicato anche perchè sto seguendo Germania-Utuguay e sto tifando in modo smodato per gli Uruguagi. Per fortuna è fine primo tempo e di corsa metto il resto della prima parte in bella copia.

Due zone distinte: la superiore, più alta di parecchio, per contenere le animazioni. L'inferiore per contenere i bottoni.
Penso di dividerle anche graficamente con un bel taglio netto nei colori.

Traccio un rettangolo a coprire circa a 3/4 dell'immagine ...
   
 

 
13
    Duplico il livello quadro, lo chiamo quadro_inferiore, inverto la selezione e cancello la parte superiore.
Sposto il livello quadro al di sopra di tutti gli altri livelli. E non mollo la selezione, ma manco morto.

In pratica ho copiato il pezzo inferiore del quadro e l'ho sistemato sopra a tutto il resto.
   
 

 
14
    Creo un nuovo livello, inverto di nuovo la selezione e lo riempio di nero.
Mi servirà, questo livello, per avere la dimensione di una delle due sezioni; l'altra la otterrò per differenza.
Nell'immagine il nero l'ho reso trasparente al 30%, per vederci qualcosa.

   
 

 
15
   

Seleziono la trasparenza di livello di quadro_inferiore, creo un nuovo livello (quadro_sfumato) appena sopra allo stesso e lo sfumo da nero a bianco, come nell'immagine qui sotto

   
 

 
16
    Devo fare in fretta ... sta per finire l'intervallo ...
Seleziono la trasparenza di livello del livello quadro_inferiore.
Duplico il livello sfumatura (punto 8). Inverto la selezione e cancello. Porto il nuovo livello sopra
al livello quadro_sfumato e lo dichiaro opaco al 30%.
In pratica ho copiato quel tanto di sfumatura che coincide con l'area di quadro_inferiore.
   
 

 
 
   

Urca. Al pelo. Sta ricominciando la partita. Smetto qui, ma riprendo appena possibile, cioè domani. Con i bottoni. Ormai abbiamo due belle zone definite, ed anche i registri per un bel taglio netto.
Alla prox, que viva uruguayyyyyyyyyyyyyyyyyyyyyyy.

P.S.: avete notato che fra l'immagine iniziale e quest'ultima ci sono delle differenze? Beh il motivo è il solito: quando ho fatto la prima non ho preso appunti, poi sconsideratamente ho collegato ed unito qualche livello di troppo, insomma non avevo più il materiale originale e ho rifatto tutto da capo, e nel rifarlo non mi sono preoccupato più di tanto della fedeltà. La cornice no, quella è fedele, è la parte interna che va per le trippe. Sempre per un fatto di democrazia, no?

 

   

la guida prosegue

 
 


Non ho Copyright © poichè non so l'inglese. Il sito è fatto da nebbiaenuvole.com Tutti i diritti sono diritti, che se fossero storti ....
Marchi registrati e segni distintivi sono di proprietà dei rispettivi titolari.
 
Creative Commons License