nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
cuori come bolle
___________________
prima parte
___________________
 

 

Cuori come bolle di sapone.
Prima parte.


Io questa guida proprio non avevo voglia di farla.
Capita anche a voi che qualcosa non vi vada, che proprio anche se vi ci sforzate a farvela andare, proprio non va?
Poi mi sono fatto forza, ma si vede che proprio non ne avevo voglia: ho scritto il minimo indispensabile (che forse è anche un vantaggio per chi la legge) per poterla definire una guida, ma proprio di striscio.


1
   

Qui sotto si vede il cuore di base.
Le specifiche per realizzarlo si trovano in altra guida: cuore batticuore

E questo livello lo chiameremo cuore-base.
Creo un set di livelli che chiamo Set-1
Duplico il livello cuore-base lo rinomino cuore e lo trascino nel set.

Photoshop

Costruzione
della bolla
di sapone
   

 
2
   

Con il lazo (indicando un valore di sfumatura di 25 px) traccio alla buona un perimetro all'interno del cuore

   

3
   

Inverto la selezione

   

 
4
   

E cancello la parte esterna.

   

5
   

Seleziono la trasparenza di livello dl livello cuore-base


All'interno del set cuore creo un nuovo livello (lo chiamo bordino).
Traccio il profilo spesso 2 px, bianco

   

6
   

Applico un po' di opzioni di fusione al livello bordino
(per vederne i valori passate con il mouse sui tasti dell'immagine qui sotto).

   

7
   


All'interno del set cuore creo un nuovo livello (lo chiamo luce).

Traccio un cerchio come nella figura qui sotto

   

8
   

Riduco la selezione (uso l'opzione contrai, di 10 pixel).
Cosa più precisa sarebbe ricorrere alla modifica, che vi consiglio. Ma in questo caso il risultato lo sfocheremo al punto da non notare le imperfezioni del tratto.

Cancello la zona interna, quella in selezione.

   

9
   

Riduco nuovamente la selezione di 10 pixel, poi riempio di bianco la zona selezionata.

   


10
   

Ultimo colpetto.
Riduco nuovamente la selezione di 10 pixel, poi cancello la zona selezionata.

   

11
    Prima di procedere mi faccio una copia del livello luce, rinominandolo lucegrande.

Torno sul livello luce e traccio una zona che comprenda tutto il livello, lasciando libera una parte triangolare, tipo una fetta di torta.
   

 
12
   

Cancello tutto i lresto della torta.

   

 
13
   

Traccio un triangolino in centro a quel che resta del livello.

 
   

14
   

E cancello.

   

 
15
    Duplico il livello luce, lo chiamo luce2
Lo ribalto in orizzontale e verticale (o lo ruoto ad occhio) e lo sistemo dalla parte opposta, in alto a sinistra del cuore.

Sfoco di un 4-5% i livello luce e luce2
   

 
16
   

Definisco i livelli luce e luce2 come luce soffusa, opaco al 100%.

   

 
17
   

Ora mi serve il livello lucegrande.

Se me lo sono perso (e questo è il motivo del suggerimento su quale strumento usare allo scopo) , rifaccio tutto da capo e sistemo il nuovo livello come nella figura.

   


18
   

Sfoco il livello lucegrande di un 4-5%

 


 
19
   

Seleziono la trasparenza di livello del livello cuore-base (vedi punto 1)
Inverto la selezione.
Vado sul livello lucegrande e cancello il di più all'esterno della sagoma del cuore.


Poi sistemo i livelli nel set come indicato qui sotto a destra.

 



Livelli all'interno
del Set



bordino
lucegrande
luce2
luce
bordino
cuore
20
   

Ora si tratta di movimentare un pochetto la nostra bolla di sapone.

Io ho fatto in questo modo:
Ho duplicato il set cuore (cuore-2)

Ho selezionato tutto il set cuore-2
Ho deformato leggermente TUTTO il set (Modifica > Trasformazione > Deforma)
come si evince ... ops, come non detto, volevo dire: come si vede qui sotto

La sagoma del cuore al di sotto è quelal del set
cuore. Serve come riferimento per dosare le deformazioni.

 



21
   

Mi sono fatto un po' di copie del set cuore, graduando oppure accentuando le deformazioni. Un po' quel che si vede in alto in cima alla pagina.
La cosa buffa di queste guide è che finisco col produrre più animazioni in corso d'opera di quante siano quella (o quella, in caso di varianti) finale.
E la cosa anche più buffa è che spesso quelle lungo il tragitto sono meglio di quella conclusiva.
Accidentaccio di un boia crin (*)

Poi ho salvato i png trasparenti per l'animazione con SwishMax.

Si fa in questo modo:

Si rende tutto invisibile, compreso il fondo.
Si rende visibile un set alla volta.
Lo si salva per Web (File > Salva per web > png 24 trasparente)
Naturalmente i png li ho chiamati in sequenza, B1, B2, B3 ... Bn, dove B sta per Bolla.

 

 
22
   

Mi serve un cuore di riserva.
Lo recupero da una guida precedente: Cuore.
Lo salvo come cuore2.png.

 


 
23
   

Poi mi serve un fondino.

Qui sotto c'è la descrizione (simbolica) di come realizzarlo.
Io l'ho fatto in modo meno professionale, roba principianti, ma voi seguite l'istinto: ci serve un fondo rosso chiaro in centro, poi degradante verso lo scuro, e poi degradante di nuovo verso un chiaro meno chiaro. Chiaro?
Non ho indicato i valori cromatici, ma se importate in Photoshop l'immagine potete succhiare il colore ed usarlo.

Quando avete fatto, salvate un jpg col nome: fondo.jpg.

 


 
24
   

Infine m iserve un altro fondino.
Uso quello precedente, creo un livello, ci disegno sopra un cerchio, lo riempio di bianco che poi sfoco di quanto basta.
Rifatevi all'immagine che si fa prima.

Alla fine salviamo il tutto (salva per web) come jpg: fondo2.jpg.

 


 
   

 

Con tutti gli elementi pronti possiamo passare all'animazione.
Nella seconda parte della guida.
Orevuàr

 

(*) Boia crin. Variante del classico boia fauss.
Sta per "boia maiale", mentre boia fauss sta per "boia falso".
Boia sta per "boia".
Se poi la boia è quella che vive in mezzo alla farina fa: boia panatèra (panettiera).

 

fine prima parte

 
altre guide
cuore
 


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