Come animare un disegno: tutorial fotogramma per fotogramma

Personaggio animato disegnato a mano con più fotogrammi aperti su WigglyPaint

Scopri come animare un disegno gratis su WigglyPaint. Aggiungi fotogrammi, usa l'onion skin e crea la tua animazione GIF in pochi passi.

Vuoi imparare come animare un disegno su WigglyPaint? Tutto si basa su una serie di immagini chiamate fotogrammi (o “frame”). Ogni fotogramma è leggermente diverso da quello prima. Quando WigglyPaint li fa scorrere in ordine, il tuo disegno prende vita!

Sei tu a disegnare ogni singolo fotogramma a mano. WigglyPaint non usa l’intelligenza artificiale per creare l’animazione al posto tuo, non trasforma in automatico una foto in un’animazione e non genera video. Questa guida ti mostrerà ogni singolo clic da fare, dal primo tratto di pennello fino alla tua GIF animata finale.

Inizio rapido: crea un'animazione in un minuto

1. Apri WigglyPaint e clicca su Click to start drawing (Clicca per iniziare a disegnare).
2. Apri il pannello Animation (Animazione) in basso.
3. Fai il tuo primo disegno.
4. Copia il fotogramma e cambia un piccolo dettaglio.
5. Clicca sul pulsante Play per guardare l'animazione che si ripete.
6. Clicca su Export (Esporta) per salvare il tuo lavoro come GIF.

Cos’è l’animazione fotogramma per fotogramma?

Un fotogramma è semplicemente un singolo disegno. L’animazione fotogramma per fotogramma usa tanti disegni messi in fila per creare l’illusione del movimento. Hai presente quei libretti dove fai scorrere le pagine velocemente con il pollice? È la stessa identica cosa.

Per esempio, se disegni degli occhi aperti nel primo fotogramma e degli occhi chiusi in quello dopo, quando li fai scorrere sembrerà che la faccina stia sbattendo le palpebre.

Su WigglyPaint il movimento nasce in due modi:

  1. Le linee che disegni “tremano” (in inglese wiggle) da sole, dando un effetto vivo e naturale.
  2. Il pannello dei fotogrammi fa scorrere i tuoi disegni uno dopo l’altro.

Puoi usare i fotogrammi per far salutare un personaggio, far sbocciare un fiore, far rimbalzare una palla o far sorridere un viso.

Cosa posso creare con WigglyPaint?

WigglyPaint è un sito gratuito per creare animazioni che funziona direttamente nel tuo browser. Non devi scaricare o installare nessun programma sul computer.

Con questo strumento puoi:

  • aggiungere un nuovo fotogramma;
  • copiare un fotogramma;
  • eliminare un fotogramma;
  • vedere il disegno precedente come una traccia grigio chiaro;
  • riprodurre i fotogrammi a ciclo continuo (in loop);
  • esportare il risultato come animazione GIF; e
  • condividere il lavoro finito con la Community di WigglyPaint.

È perfetto per brevi disegni animati, sticker, faccine e semplici test di animazione 2D. Non è pensato per fare film lunghi o progetti complicati con una linea temporale da montare.

Prima di iniziare

  • Usa il computer per seguire questa guida. I pulsanti sono molto più facili da vedere su uno schermo grande.
  • Inizia con una cosa sola e un movimento semplice, come una faccia che sbatte le palpebre o un punto che rimbalza.
  • Usa due o tre colori al massimo. Un disegno semplice è molto più facile da animare.
  • Non preoccuparti di fare linee perfette. Un movimento chiaro è molto più importante della precisione!

Come animare un disegno passo dopo passo

1. Inizia un nuovo disegno

  • Cosa fare: Apri WigglyPaint e clicca su Click to start drawing.
  • Cosa vedrai: Il foglio da disegno bianco e tutti gli strumenti.
  • Passo successivo: Scegli un pennello e un colore.
Pulsante Click to start drawing nell'editor di animazione di WigglyPaint
Clicca sul pulsante di avvio per aprire l'area di disegno.

Disegna qualcosa di grande e semplice. Una faccia, una stella, un fiore o una palla sono ottime scelte per iniziare.

2. Apri il pannello Animation

  • Cosa fare: Clicca sulla barra Animation in fondo allo schermo.
  • Cosa vedrai: Una riga con dei piccoli riquadri (i fotogrammi), un pulsante Play, un pulsante a forma di fantasma (onion skin) e un grande pulsante più.
  • Passo successivo: Assicurati che il primo fotogramma sia selezionato.
Pannello dei fotogrammi di animazione espanso su WigglyPaint
Il pannello Animation contiene i fotogrammi e i comandi per animare.

Il fotogramma con il bordo colorato è quello che stai modificando in questo momento. Se vuoi modificare un altro fotogramma, ti basta cliccarci sopra.

3. Disegna il primo fotogramma

  • Cosa fare: Disegna la posizione di partenza del tuo oggetto o personaggio.
  • Cosa vedrai: Il tuo disegno sul foglio grande e dentro il primo piccolo riquadro in basso.
  • Passo successivo: Finisci bene la forma principale prima di aggiungere un altro fotogramma.

Per una faccia che sbatte le palpebre, disegna il viso con entrambi gli occhi aperti. Per una palla che rimbalza, disegna la palla in alto, prima che cada.

4. Copia un fotogramma o aggiungine uno vuoto

Se il disegno successivo è molto simile, ti conviene copiare il fotogramma attuale. Poi usi la gomma per cancellare e ridisegnare solo la parte che si muove.

  • Cosa fare: Clicca sul simbolo per copiare che si trova di fianco al riquadro del fotogramma.
  • Cosa vedrai: Un secondo fotogramma con lo stesso identico disegno.
  • Passo successivo: Cambia un piccolo dettaglio, come gli occhi, una mano o la posizione della palla.
Controlli per copiare ed eliminare accanto a un fotogramma di animazione su WigglyPaint
Copia un fotogramma per mantenere lo stesso disegno, oppure elimina un fotogramma se hai sbagliato.

Usa invece il grande pulsante più quando vuoi un fotogramma completamente vuoto. È utile quando l’immagine successiva sarà molto diversa dalla precedente.

Aggiungere un nuovo fotogramma di animazione con il pulsante più su WigglyPaint
Clicca sul grande pulsante più per aggiungere un fotogramma vuoto.

5. Attiva l’onion skin

L’onion skin (che in inglese significa “buccia di cipolla”) ti fa vedere il disegno precedente in grigio chiaro, come se fosse un fantasma. Ti aiuta a capire dove si trovava il vecchio disegno per fare quello nuovo al posto giusto. Questa traccia grigia serve solo a te e non si vedrà nella tua GIF finale.

  • Cosa fare: Clicca sul pulsante a forma di fantasma (onion skin).
  • Cosa vedrai: Il fotogramma precedente appare in grigio dietro al tuo disegno attuale.
  • Passo successivo: Disegna la nuova posizione vicino alla traccia grigia per ottenere un movimento fluido.
Guida di animazione onion skin che mostra il fotogramma precedente di WigglyPaint in grigio
Il disegno grigio è il fotogramma precedente. Usalo come guida.

Fai un piccolo cambiamento tra un fotogramma e l’altro se vuoi un movimento morbido. Fai un cambiamento più grande se vuoi che il movimento sembri molto veloce.

6. Riproduci l’animazione

  • Cosa fare: Clicca sul pulsante Play (quello a forma di triangolo).
  • Cosa vedrai: I fotogrammi scorrono in ordine e ricominciano da capo all’infinito.
  • Passo successivo: Osserva bene il passaggio dall’ultimo fotogramma di nuovo al primo.
Pulsante Play per visualizzare in anteprima un'animazione in loop su WigglyPaint
Clicca su Play e guarda l'animazione scorrere più di una volta.

Se il movimento ti sembra a scatti, confronta l’ultimo disegno con il primo. Sposta l’ultimo disegno un po’ più vicino al primo, oppure aggiungi un altro fotogramma in mezzo per ammorbidire il passaggio.

7. Fai durare un fotogramma più a lungo

Al momento WigglyPaint non ha un comando per decidere quanto dura ogni singolo fotogramma. Per mantenere un disegno sullo schermo più a lungo, ti basta semplicemente copiarlo.

  • Cosa fare: Seleziona il fotogramma che vuoi far durare di più, poi copialo una o più volte.
  • Cosa vedrai: Due o più riquadri con lo stesso disegno.
  • Passo successivo: Clicca su Play e controlla se la pausa ti sembra giusta.

Per esempio, copia il fotogramma con gli occhi aperti due o tre volte. Tieni il fotogramma con gli occhi chiusi una volta sola. Così la faccina terrà gli occhi aperti più a lungo e sbatterà le palpebre velocemente.

È un trucco semplicissimo per controllare il ritmo senza impazzire con impostazioni difficili come gli FPS (i fotogrammi al secondo).

8. Esporta la tua animazione

  • Cosa fare: Clicca su Export quando il risultato ti piace.
  • Cosa vedrai: Le opzioni per salvare o condividere il tuo lavoro.
  • Passo successivo: Salva l’animazione come GIF, oppure condividila con la WigglyPaint Community.
Pulsante Export per salvare un disegno animato di WigglyPaint come GIF
Esporta l'animazione finita come GIF.

Apri la GIF salvata sul tuo computer almeno una volta. Controlla che il disegno si veda bene e che il movimento non faccia salti strani.

Esempio pratico: far sbattere le palpebre a una faccina

Far sbattere le palpebre a un viso è un ottimo primo progetto, perché quasi tutto il disegno resta fermo e devi muovere solo gli occhi.

  1. Disegna una faccia con entrambi gli occhi aperti.
  2. Copia il fotogramma.
  3. Nel nuovo fotogramma, cancella gli occhi e disegnali socchiusi (mezzi chiusi).
  4. Copia quel fotogramma e disegna gli occhi completamente chiusi.
  5. Copia il fotogramma con gli occhi socchiusi e mettilo dopo quello con gli occhi chiusi.
  6. Clicca su Play. L’ordine dovrebbe essere: aperti, socchiusi, chiusi, socchiusi.
  7. Copia il fotogramma con gli occhi aperti un paio di volte se la faccia sbatte le palpebre troppo spesso.

Puoi usare la stessa tecnica per un fiore che si apre, una stella che brilla o un personaggio che respira.

Consigli d’oro per un’animazione fluida

  • Muovi solo una cosa alla volta.
  • Tieni ferme nello stesso posto le parti che non si muovono.
  • Attiva sempre l’onion skin prima di disegnare il fotogramma successivo.
  • Clicca su Play dopo aver fatto due o tre fotogrammi. Non aspettare la fine per controllare!
  • Copia un fotogramma quando vuoi che l’azione faccia una piccola pausa.
  • Usa forme semplici, così il disegno si capirà bene anche se visto in piccolo.

Se qualcosa va storto

Non riesco a trovare il pannello Animation

Prima devi cliccare su Click to start drawing. Poi cerca la barra Animation in basso e cliccala per aprire i riquadri dei fotogrammi.

L’animazione è troppo veloce

Copia il fotogramma che vuoi far vedere più a lungo. Due o tre copie di fila creano una breve pausa.

Il disegno si sposta troppo tra un fotogramma e l’altro

Attiva l’onion skin (il pulsante a forma di fantasma). Usa la traccia grigia dell’ultimo fotogramma come guida e disegna la nuova posizione un po’ più vicina a quella vecchia.

L’animazione salta alla fine

Confronta l’ultimo fotogramma con il primo. Rendi i due disegni più simili tra loro, oppure aggiungi un fotogramma extra in mezzo per collegarli meglio.

Vedo solo un disegno quando premo Play

Aggiungi o copia un altro fotogramma, poi cambia una parte del nuovo disegno. L’animazione ha bisogno di almeno due disegni diversi per mostrare il movimento.

Cosa puoi fare oggi su WigglyPaint

FunzioneDisponibile ora?
Disegnare ogni fotogramma a manoSì
Aggiungere, copiare ed eliminare fotogrammiSì
Vedere l’ultimo fotogramma come guida grigiaSì
Riprodurre un loop continuoSì
Esportare una GIFSì
Condividere con la CommunitySì
L’intelligenza artificiale crea l’animazioneNo
Trasformare una foto o un video in animazioneNo
Impostare un tempo diverso per ogni fotogrammaNon ancora; copia un fotogramma invece
Cambiare gli FPSNon ancora
Esportare un videoNon ancora
Modificare i fotogrammi nell’app per telefonoQuesta guida spiega la versione web

Domande frequenti su come animare un disegno

Come animare un disegno?

Disegna la prima immagine, copia o aggiungi un fotogramma e cambia una parte del nuovo disegno. Aggiungi altri fotogrammi se serve. Clicca su Play per controllare il movimento, poi esporta tutto come GIF.

WigglyPaint è un’app gratuita per l’animazione fotogramma per fotogramma?

WigglyPaint è uno strumento gratuito di disegno e animazione che funziona direttamente nel browser web. Puoi creare una breve animazione senza installare nessuna app sul computer.

Devo scaricare un programma per creare animazioni?

No. Puoi disegnare e animare direttamente sul sito di WigglyPaint. Quando hai finito, scarichi la tua animazione come file GIF.

Posso usare un riferimento per disegnare i fotogrammi?

Sì. L’onion skin mostra il fotogramma precedente in grigio chiaro. Usa questo disegno grigio come riferimento per capire dove disegnare il fotogramma successivo.

WigglyPaint usa l’intelligenza artificiale per creare l’animazione?

No. Sei tu a disegnare ogni fotogramma. WigglyPaint ti aiuta con pennelli che si muovono da soli, controlli per i fotogrammi, onion skin, anteprima in loop ed esportazione in GIF.

Quanti fotogrammi dovrebbe usare un principiante?

Inizia con tre o cinque fotogrammi diversi. Sono più che sufficienti per un battito di ciglia, un piccolo rimbalzo o un altro movimento semplice.

Posso cambiare la velocità dell’animazione?

Non c’è ancora un comando per gli FPS o per il tempo dei singoli fotogrammi. Se vuoi mantenere un disegno sullo schermo più a lungo, ti basta copiarlo.

L’animazione si ripete all’infinito?

Sì. L’anteprima ripete i fotogrammi a ciclo continuo (in loop), così puoi controllare bene il passaggio dall’ultimo fotogramma di nuovo al primo.

Che tipo di file posso esportare?

WigglyPaint esporta il tuo disegno animato come GIF. Se vuoi creare una GIF animata partendo da zero, questo è esattamente il metodo giusto. Ricorda però che da qui non puoi esportare un video.

Crea il tuo primo disegno animato

Ora che sai come animare un disegno, inizia con tre fotogrammi e un piccolo cambiamento. Disegna una faccia, copiala, cambia gli occhi e clicca su Play. Quando funziona, aggiungi un altro fotogramma o copiane uno per migliorare il ritmo.

Disegna un'idea e falla muovere

Apri il pannello Animation, crea una breve animazione ed esporta il tuo disegno come GIF.

Inizia a disegnare gratis