• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Creare una scritta animata con effetto "macchina da scrivere"

ebello

Redattore onorario
Autore del topic
Redattore
22 Aprile 2007
53.266
162
Miglior risposta
0
Ciao ragazzi, oggi volevo spiegarvi come creare una semplice scritta animata con effetto "macchina da scrivere". Scusate il nome strano ma non sapevo come chiamarlo... seguendo la guida capirete di cosa sto parlando, iniziamo!

- Apriamo photoshop e creiamo un documento con dimensioni a nostro piacere, possibilmente con sfondo bianco/nero o quello che preferiamo

- Inseriamo una scritta tramite il tasto
afcf91dc1a836597008113888f53b068.png
, scegliendo il font, il colore e tutti gli effetti che vogliamo applicare su di essa

- Una volta creata la scritta, creiamo un nuovo livello e coloriamolo dello stesso colore dello sfondo, nel mio caso bianco
42f579f4123a11abedbb167a96f2d31a.gif


- Dirigiamoci sulla timeline che troviamo in basso
8fcc23386077519d0221f2d260fde923.png
, clicchiamo su "Crea timeline video"... nel caso non avete attivata la timeline basta andare su Finestra > Timeline

- Accertiamoci di cliccare qui:
642d2d1f63605d4eb771f6064f5959b0.png
per visualizzare qualcosa del genere nella timeline:
e76d1b3c856e3a9e93c3dbf27279abc6.png


- Impostiamo il ritardo del primo fotogramma su 0,01 sec.
da9a1326c6b799f5e847b8d7eb3242e6.gif


- Creiamo un nuovo fotogramma tramite questo tasto:
6f891a3621fe819b3e5857091fc1b695.png
, che troviamo sempre sulla timeline

- Selezioniamo il secondo fotogramma appena creato e muoviamo il livello bianco che copre la scritta in modo da far vedere la prima lettera (mentre spostate il livello tenete premuto il tasto "shift"):
df1acceb6564234f61ef8960cda8fb59.gif


- Creiamo un nuovo fotogramma e facciamo la stessa cosa, in modo da mostrare anche la seconda lettera:
0a6df4e10306b8f25ec9cf16e67316fe.gif


- Facciamo la stessa cosa per le altre lettere

- Per salvare l'immagine dirigiamoci su File > Salva per il web e scegliamo il tipo di gif (qualità) che vogliamo

- Ecco il risultato:
si6nd4C.gif


(Come sempre ricordo di impostare le opzioni di ciclo su "Sempre", così da ottenere l'animazione infinita)
 
  • Like
Reactions: 2 people
Ti ringrazio igny, la scritta ovviamente si può fare anche con sfondo trasparente... in quel caso però bisogna creare un livello per ogni lettera e nascondere i livelli nei vari fotogrammi
 
Molto carino il risultato. Bella guida, sei stato preciso in ogni dettaglio.

Mio lavoro (Grazie! :emoji_slight_smile: )
o0xk3r.jpg

Ottima scelta del font, in questo caso si adatta perfettamente al tipo di animazione... sono contento che ti piaccia :emoji_slight_smile:
 
  • Like
Reactions: 1 person