Come Creare Icone Animate in Adobe Illustrator e Photoshop

L'animazione vettoriale di icone e disegni è piuttosto facile con Adobe Illustrator e Adobe Photoshop. Semplicemente crea semplici icone piatte e importale in Photoshop per la semplice creazione di GIF. Creeremo tre icone animate ed esploreremo un paio tecniche per la creazione di animazioni facili.

1. Disegna la Busta

Step 1

Creare un Nuovo Documento in Adobe Illustrator. Utilizzerò Adobe Illustrator CC, ma tu puoi facilmente adattare queste tecniche e disegni a versioni precedenti.

Con lo Strumento Rettangolo (M), disegna un rettangolo blu-chiaro. Seleziona i due punti di ancoraggio in fondo con lo strumento di Selezione Diretta (A) e trascina verso l'interno gli Angoli Attivi per arrotondarli. Utilizza lo Strumento Penna (P) per disegnare una linea tratteggiata in blu medio che definisce l'apertura della busta.

Step 2

Disegna due linee con lo Strumento Penna o lo strumento Segmento Linea (/) che si incontrano al centro della busta. Espandi i tratti attraverso la voce Oggetto e utilizzare lo strumento Crea Forme (Shift-M) per selezionare le porzioni non intersecanti delle linee dal rettangolo al fine di eliminarle. Questa è la nostra busta di base.

Step 3

Copia (CTRL-C) e incolla (CTRL-V) il disegno della busta. Disegna un triangolo da angolo superiore all'altro per l'apertura della busta. Seleziona il triangolo tenendo premuto Alt e trascina fuori un duplicato del triangolo. Ruota (R) questo per creare l'apertura della busta e imposta il colore di riempimento di un blu più scuro. Per il bene di questa dimostrazione le mie linee mancano nel disegno qui sotto, ma verranno utilizzate nella versione finale.

Step 4

Ora dovresti avere due buste: una aperta e una chiusa. Il nostro obiettivo è quello di creare diverse iterazioni di buste che colmano il divario tra la busta chiusa e la busta aperta per la nostra animazione finale. Raggruppa (CTRL-G) insieme ciascuno dei componenti la busta.

2. Crea Forme Diverse della Busta

Step 1

Duplica la busta aperta. Utilizza lo Strumento Selezione Diretta per afferrare il punto di ancoraggio superiore del triangolo e trascinarlo verso il basso fino a coprire quasi completamente il triangolo scuro. Duplica questo gruppo di buste e tira il punto inferiore del triangolo più chiaro un po' verso l'alto così sembra che la busta si stia aprendo più. Continueremo duplicando ogni busta e spostando il triangolo verso l'alto fino a quando torna di nuovo al punto di partenza.

Step 2

Alla fine, tra le buste chiuse e aperte, ho nove buste per mia icona animata. È possibile controllare il posizionamento dei triangoli e relativi punti di ancoraggio qui sotto. Assicurati che ogni busta sia raggruppata separatamente in modo da essere facile da importare in Adobe Photoshop più tardi.

3. Crea la Lettera

Step 1

Disegna un rettangolo di colore giallo chiaro e Copia e Incolla sopra ogni busta. L'obiettivo è di avere il rettangolo che si sposti verso l'alto mentre si sta aprendo. Ho deciso di andare avanti con sette rettangoli totale per il mio progetto.

Step 2

Seleziona la prima busta e il relativo rettangolo sovrapposto. Utilizzando lo Strumento Crea Forma, seleziona la parte del rettangolo giallo che si interseca con l'interno della busta. Elimina la parte non intersecanti del rettangolo giallo così rimane solo con un piccolo triangolo del rettangolo giallo. Ripeti questa tecnica sulle altre buste.

Step 3

Continua a definire la forma di lettera gialla per ogni busta. Puoi vedere come appaiono le mie lettere con la loro busta corrispondente qui sotto.

Step 4

Disegna diversi rettangoli sottili per simulare linee scritte sulla lettera. Allinea e Distribuisci i rettangoli nel pannello Allinea. Quindi, Unisci nel pannello Elaborazione tracciati.

Step 5

Posizionare più insiemi di rettangoli su ogni busta. Notare come alcune lettere mostrano linee più di altri. Ho messo insiemi di rettangoli su sei delle mie nove buste.

Step 6

Seleziona la forma della lettera e i rettangoli. Utilizzando lo Strumento Crea forme, seleziona la porzione non intersecante di ciascun rettangolo ed eliminala. Ripeti questo passo per tutte le buste.

Step 7

Raggruppa insieme ogni busta e i suoi componenti così da avere nove gruppi separati in totale. Ora siamo pronti per animare il nostro design!

4. Anima la Busta

Step 1

Apri Adobe Photoshop e crea un Nuovo Documento. Poiché stiamo creando una semplice grafica web, ho impostato la mia dimensione documento a 72 dpi (non c'è motivo per una risoluzione più elevata, poiché non dobbiamo stampare il nostro lavoro), 250 px di larghezza e 300 px di altezza. Puoi creare un file più grande o più piccolo se lo desideri,e puoi anche ritagliare il tuo documento.

In Adobe Illustrator Copia ogni gruppo di busta e Incolla in un documento di Adobe Photoshop. Se desideri ridimensionare l'immagine senza perdita di qualità, è possibile incollare ogni gruppo come Oggetto Avanzato. Se sei soddisfatto con la dimensione, Incollali in un nuovo livello come Pixel.

Step 2

Assicurati che ogni oggetto sia diviso in livelli in modo sequenziale. Inoltre, ti consiglio di selezionare tutti i nove livelli e Allinearli ai loro centri e al bordo inferiore.

Step 3

Apri il pannello Timeline e crea una Nuova Animazione Frame. A partire dal livello di busta chiusa (nascondi gli altri), creare un Nuovo Frame e imposta il ritardo del frame per 0,1 secondi. Per ciascun fotogramma, visualizza il livello successivo e nascondi lo strato precedente fino a quando la busta è aperta. Quindi, imposta il ritardo a 0,2 – 0,5 secondi.

Ripeti la stessa operazione mostrando e nascondendo livelli, ma questa volta vai in ordine inverso per chiudere di nuovo la busta. Assicurati che di avere in loop "Forever" così l'animazione continua ad aprire e chiudere.

Step 4

Premere Play sul pannello Timeline per guardare il tuo ciclo di gif. Puoi regolare i ritardi di frame per un gif più lento o più veloce, nonché modificare quanto tempo la busta rimane chiusa o aperta nel pannello Timeline. Passiamo alle altre icone e altre tecniche per l'animazione.

5. Disegnare un'icona Chat

Step 1

Torna in Adobe Illustrator, in un nuovo documento o su un nuovo livello, disegna un cerchio utilizzando lo Strumento Ellisse (L). Quindi, sovrapponi il cerchio con un piccolo triangolo e Unisci insieme le due forme: questa è la tua bolla di chat di base. Disegna tre cerchi per ellissi da utilizzarsi nell'animazione più tardi.

Step 2

Copia e Incolla la bolla della chat e Riflettila sopra un Asse Verticale. Modifica il colore della seconda bolla di una tonalità più scura. Riduci le ellissi in modo da adattarsi alla bolla di chat. Ora aggiungeremo del testo.

Step 3

Disegna o digita semplici parole come "hey" e "Hi", o usando un font stile scritto a mano che ti piace o disegnando ogni lettera con lo Strumento Pennello (B) utilizzando un pennello calligrafico predefinito. Assicurati che qualsiasi testo o tratto venga convertito in oggetti e che ogni lettera sia un oggetto separato.

Step 4

Digita o disegna faccine testo semplice all'interno delle le bolle chat. In alternativa, è possibile disegnare invece emoji. È la tua icona chat e lo stile complessivo lo decidi tu. In totale ci sono 14 componenti separati qui sotto: tre ellissi, cinque lettere, due bolle chat e quattro oggetti emoticon. Ognuno sarà Copiato e Incollato in un nuovo documento in Adobe Photoshop come livello separato.

6. Animare l'icona della Chat

Step 1

In Adobe Photoshop, incolla ciascuno dei componenti 14 in un documento come un nuovo livello. Raggruppali insieme i componenti come oggetti, come ho fatto qui sotto nel pannello Livelli: per ogni parola, emoticon, ellissi e bolle chat. Questo consente di mantenere il tuo documento organizzato e animare le GIF più facilmente.

Step 2

Per iniziare, voglio che la mia prima bolla di chat entri dal lato sinistro. Ho nascosto tutti i componenti tranne la prima bolla di chat e ho posizionato fuori dalla mia cornice di documento per il primo fotogramma della Timeline. All'interno di sette cornici, ho spostato la mia bolla di chat al centro del documento dal lato sinistro. È possibile spostare e modificare un livello per ogni nuovo frame senza intaccare il frame precedente.

Una volta che la bolla di chat è in vista, comincio l'effetto "digitazione". Ogni ellisse è visibile uno alla volta all'interno della prima bolla di chat, seguita dal primo messaggio di "Ciao". Poi comincio a far scorrere la seconda bolla di chat nel frame, mentre il primo messaggio di chat (raggruppato nel pannello Livelli come "Hi") è ridotto opacità (20% per fotogramma) nel pannello Livelli. 

Step 3

Ecco un'occhiata al mio pannello Timeline per l'intera immagine GIF. Ho oltre 30 fotogrammi in totale e la maggior parte di questi hanno 0,1 secondo di ritardo. Alcuni componenti, come le ellissi e i puntini di sospensione, "dot, dot, dot" vanno ad un 0.3 secondi di ritardo, mentre la dissolvenza delle parole o la digitazione di lettere ed emoticon è più veloce quando possibile. Puoi regolare il ritardo come preferisci finchè non va bene. Fai in modo che la digitazione sia liscia e leggibile senza essere troppo lenta e instabile.

Step 4

Puoi controllare la mia animazione finale qui sotto: la prima bolla di chat entra e inizia a digitare, la seconda bolla risponde, ed entrambe inviano emoticon e quindi si spostano di nuovo fuori dall'inquadratura. Dobbiamo fare un'ultima icona animata che unisce le idee e le tecniche utilizzate in precedenza.

7. Disegna la Fotocamera

Step 1

In Adobe Illustrator, disegna un rettangolo. Seleziona i due punti di ancoraggio superiori con lo Strumento Selezione Diretta e tirare gli Angoli Attivi verso l'interno. Disegna un secondo rettangolo più scuro sotto il primo e arrotonda gli angoli inferiori. Si noti che il secondo rettangolo è più piccolo del primo, ma entrambi condividono la stessa misura in larghezza.

Step 2

In grigio scuro, disegna un rettangolo sottile per la pellicola istantanea che si apre verso il basso a metà della fotocamera. Disegna rettangoli con angoli arrotondati e un cerchio per la lente della fotocamera, e altri disegni supplementari sulla facciata della fotocamera.

Step 3

Aggiungi un cerchio rosso e un cerchio grigio scuro per il pulsante della fotocamera. Per le lenti, crea cerchi grigi e blu in cima ad ognuna, alternando tra chiaro e scuro. Utilizza lo Strumento Selezione Diretta per spingere verso il basso il punto di ancoraggio superiore del cerchio interno così che l'obiettivo sembia lucido (Vedi disegno sottostante).

8. Crea i Componenti di Animazione della Macchina Fotografica

Step 1

Per l'animazione dell'otturatore volevo una semplice animazione di apertura e chiusura. Naturalmente, è possibile creare forme più complesse, se si desidera. Per mio scatto ho disegnato un cerchio di colore grigio scuro. Copia e incolla il cerchio e taglialo a metà (sovrapponi il centro orizzontale del cerchio con un segmento linea e poi dividi le due forme nel pannello Elaborazione tracciati).

Copia e incolla le due metà del cerchio. Sposta ogni metà lontano dal centro e utilizza lo Strumento Selezione Diretta per spostare i due punti di ancoraggio inferiori per schiacciare ogni metà del cerchio leggermente. Ripeti per sei volte in totale tanto da portare l'otturatore da chiuso ad aperto. Tutti e sei di questi gruppi saranno Copiati e Incollati nel documento di Photoshop durante la fase di animazione.

Step 2

Ora possiamo lavorare sulla pellicola istantanea. Essenzialmente devi disegnare una serie di rettangoli sempre più grandi. Inizia con un rettangolo sottile, grigio chiaro al centro della metà inferiore dell'icona della macchina fotografica. Dopo un paio di rettangoli, aggiungi un rettangolo grigio scuro a quello grigio chiaro. Nota come entrambi si allungano sempre di più.

Step 3

Ecco un'occhiata finale di tutti i componenti della fotocamera: la fotocamera, le sei forme dell' otturatore e le otto (compresa quella sulla fotocamera) forme di film. In totale copierò e incollerò 15 componenti nel documento di Photoshop nella sezione successiva. Cerchiamo di animare questa fotocamera!

9. Animare la Fotocamera

Step 1

Come con le icone di prima, Copia e Incolla ogni componente nel documento di Photoshop. Mi è sembrato più semplice per ogni icona avere il proprio documento all'interno di Photoshop, in modo da concentrarmi su un'animazione alla volta.

Raggruppa i livelli dell'otturatore e gli strati di pellicola nel pannello Livelli sopra lo strato di fotocamera. Ho iniziato con l'animazione dell'otturatore: chiudere e aprire l'otturatore, in modo che la lente sembri lampeggiante.

Step 2

Quindi, ti consiglio di animare il film muovendolo dentro e fuori lo slot della pellicola (in alternativa, può cadere fuori dalla macchina fotografica, come sarebbe in realtà). Ancora una volta potrai scorrere ogni componente della pellicola, uno dopo l'altro e quindi creare un frame per ciascuno in senso inverso.

Step 3

Infine, una breve nota su come salvare i file GIF. Vai su File > Esporta > Salva per Web (Legacy) (Alt-Shift-Ctrl-S) e seleziona GIF dal menu a discesa. Limita la GIF a 32 colori o meno, se possibile. È possibile visualizzare in anteprima l'animazione, ridimensionare il tuo file e decidere la qualità del file prima di cliccare Salva.

Step 4

Ecco un'occhiata alla mia icona finale della fotocamera in azione!

Ottimo lavoro, hai finito!

Se stai creando un'immagine gif con ogni frame disegnato in Adobe Illustrator, modificando dei componenti in fase di creazione della GIF o un mix di entrambe le tecniche, l'animazione di grafica vettoriale è semplice e divertente. Condividi le tue creazioni nella sezione commenti qui sotto, o spingere queste idee ai loro limiti e crea tutta una serie di icone animate o anche scene pronte per la pubblicazione sul web e altro ancora!