Tutorial illustrato su Adobe Illustrator CS. Guida: come creare animazioni SVG usando After Effects CC Come inserire animazioni GIF in Illustrator

Ciao! Oggi proverò a descrivere le funzionalità del programma Adobe Illustratorconfrontandolo con le funzionalità flush. Questa non sarà un'analisi globale del programma da parte di Bones, ma piuttosto una descrizione di alcuni chip interessanti che ho scoperto da solo in questo programma. Ho raccolto informazioni pezzo per pezzo mentre studiavo per mettere tutto in un unico post. Devo ammettere subito che non sono un utente illustratore di grande esperienza, l'ho usato solo nel disegno negli ultimi sei mesi (prima ho disegnato tutto in flash). Molti si lamentano del fatto che l'illustratore sia complesso, intuitivo, non sempre chiaro. In una certa misura, sono d'accordo che dopo un lampo questo programma è complicato. Ma la cosa principale qui non è smettere, ma continuare lo studio. E dopo un paio di settimane appare il pensiero, come potrei fare senza di lui prima!

Quindi, quello che mi è piaciuto di Illustrator e che ho trovato per me qualcosa che non è nel flash.
1. Inizierò con il più semplice, ma allo stesso tempo necessario. Prova a disporre gli oggetti in un lampo in un cerchio. È stato in precedenza Strumento decorativo , ma è stato rimosso, apparentemente considerato non necessario. Abbiamo deciso che le penne lo fanno più divertente. In Illustrator, questa funzione è: Effetto - Distorci e trasforma - Trasforma.

Tutto è rapido e semplice, impostiamo noi stessi i valori (distanza tra oggetti, numero di copie) nelle impostazioni.

2. Zig-zag

Ancora più semplice, ma comunque utile. Sembrerebbe una cosa da poco, ma nel flash devi disegnare a mano, in Illustrator è questione di secondi.

3. Warp Objects (Warp)

Non c'è nulla di simile in un lampo. Nell'esempio seguente, ho mostrato solo 2 modi per deformare forme semplici (Effect - Warp - Arc / Fish). In effetti, ce ne sono 15 nell'ultima versione del programma.

4. Arrotondamento automatico degli angoli (angoli arrotondati)

Puoi farlo manualmente: su un oggetto grafico, quando evidenziato in un angolo (in tutti gli occhi), appaiono un punto bianco e un segno di linea arrotondata. Tirare con il mouse, adattarsi ai propri gusti.

Ma questo vale solo per le forme, con una linea di matita leggermente diversa: applica l'effetto dell'arrotondamento ( Effetto - Stilizzazione - Angoli rotondi) All'uscita otteniamo lo stesso risultato.

5. Sgrossatura (grossolana)

L'effetto è applicato a forme semplici ( Effetto - Distorci e trasforma - Ruvida) All'uscita, otteniamo qualcosa che ricorda i modelli 3D a basso poli. Secondo me, cool :) E, soprattutto, molto semplice.

6. Pucker & Bloat (Retrazione e inflazione)
Un esempio nell'immagine seguente:

7. Estensione del modulo (Offset Path)

C'è una funzione Espandi riempimento nel flash (estensione riempimento), non funziona affatto con le linee della matita, a differenza di Illustrator.

8. Pennelli (pennello artistico, pennello pattern, pennello scatter)
Guardiamo l'immagine qui sotto con esempi:

9. Spazzola per il trattamento

Anche nell'illustratore ci sono molti pennelli per texture di cui ho scritto e come sono apparsi nella nuova versione di Flash -. È stato notato che l'utilizzo dei pennelli in Adobe Animate è terribilmente lento. Questo è tutto:(

10. Non sono sicuro che questo sia un trucco semplice, ma voglio fermarmi su un pennello con un nome divertente macchiaSpazzola. Situato sulla barra degli strumenti, un pennello molto carino da usare. Ha un sacco di impostazioni, mi piace più del solito. È difficile spiegare a parole i suoi vantaggi, è meglio provare una volta.

10.Split to Grid

Utile anche la funzione Dividi alla griglia (Oggetto-Percorso-Dividi alla griglia), che consente di tagliare una forma in segmenti uguali. Cosa ci ricorda questo? Vero - finestre in un grattacielo. Per quanto mi riguarda, una cosa interessante per disegnare, ad esempio, paesaggi di città;)

Un altro strumento utile presentato in Illustrator, probabilmente dalla sua prima versione. Usandolo, puoi creare, ad esempio, trame di alberi:

12. Sposta (a destra - Trasforma - Sposta)

L'offset dell'oggetto a una determinata distanza. Se lo si desidera, è possibile creare immediatamente una copia che verrà posizionata alla distanza desiderata dall'oggetto selezionato in orizzontale / o in verticale. In una versione precedente del flash, c'era un plugin che eseguiva questa funzione. Sfortunatamente, non ricordo il suo nome.

È molto conveniente creare modelli senza soluzione di continuità nell'illustratore ( Modello di oggetti) Ricordo come ero freneticamente sofisticato in flash con la creazione. Nell'illustratore della versione CC 2015, tutto è automatizzato, un sacco di impostazioni aiuteranno a modellare il modello in dozzine di variazioni, avendo solo pochi elementi grafici a portata di mano. Nelle versioni precedenti del programma, tutto doveva essere fatto manualmente, come nel flash finora.

(Nota: un modello può essere reso un oggetto modificabile vettoriale utilizzando la funzione di analisi ( Oggetto - Espandi aspetto).

14. Mosaico di oggetti

Crea una tavolozza di colori basata su un'immagine esistente. Importa l'immagine che ti piace nell'illus (Apri), quindi Oggetto: crea un mosaico di oggetti. Nelle impostazioni indichiamo la frequenza della divisione in altezza e larghezza.

E all'uscita otteniamo:

15. Blend (Miscela)

Utilizzato per creare gradienti. È possibile creare transizioni passo-passo, come ad esempio nella figura. Non dirò che lo uso spesso, ma può tornare utile per qualcuno. Mi sembra che tu possa usarlo per creare semplici immagini di sfondo.

Puoi anche usare lo strumento per clonare oggetti. Posizioniamo due oggetti a distanza l'uno dall'altro e applichiamo le Opzioni di fusione, selezioniamo il numero di passaggi (il numero di oggetti clonati).

16. Strumento Crea forma. Una cosa molto comoda per lavorare con i primitivi. In un lampo, mi è sembrato meno conveniente.

Tenendo premuto Alt e fai clic sui segmenti selezionati - elimina i segmenti. Se trasciniamo semplicemente il mouse su diverse aree selezionate, le connessioni.

Aggiunta - uno strumento che aiuta a tagliare, unire, ecc. Automaticamente forme selezionate. Per quanto mi riguarda, non è molto conveniente, lo uso più spesso CostruireFormaAttrezzo

(tavole da disegno)

18. Pannello strumenti personalizzato

La possibilità di creare la tua barra degli strumenti da solo, scartando quelli non necessari e selezionando solo quelli che usi.

Nelle tavole da disegno flash, vale a dire la scena ( Scena 1,2,3 ..) si trovano separatamente e devi passare da una all'altra (Maiusc + F2). In Illustrator, possono essere tutti posti davanti agli occhi. È conveniente quando si effettuano diverse opzioni per lo stesso disegno, in modo che tutte le opzioni siano davanti ai tuoi occhi per il confronto.

19. Isometria con stili grafici

E l'ultima cosa è creare un'isometria senza usare 1 clic (o più precisamente, 3 clic, perché abbiamo 3 lati;) usando gli stili grafici ( Stili grafici) Come sarà fatto, firmerò la prossima volta.

La cosa comune con il flash di Illustrator è la possibilità di salvare l'oggetto in un simbolo e puoi anche trasferire questo simbolo in un flash senza problemi (apri il file nel file .ai flash, di Importa - Importa sullo stage).
Un simbolo in Illustrator ha le stesse proprietà di un flash.
E alla fine scriverò che nell'illustratore, a mio avviso, inferiore al flash. Sì, sì, e c'è. E questo è lo strumento di riempimento ( Secchio di vernice) Dato che non provo ad abituarmi in illa, in un attimo è più conveniente.
Se le mie note ti sono state utili o se vuoi aggiungere qualcosa da te, sentiti libero di commentare! Buona fortuna a tutti;)

Hai una o due icone che desideri animare con l'animazione. Dove inizieresti? Supponiamo di avere file SVG, Illustrator CC e After Effects CC, ma la soluzione ti sfugge.

In questo articolo, dimostrerò come è possibile animare facilmente un file SVG, inclusa la preparazione di un file SVG in Illustrator e l'importazione in After Effects CC. Spiegherò anche come puoi convertirlo in Shape Layer e aggiungere movimento. E infine, parliamo di esportazione e rendering.

Il risultato finale del lavoro.

Ora passiamo alla parte più interessante: impariamo come animare le immagini.

Preparazione di un file SVG in Illustrator

Iniziamo aprendo il file SVG in Adobe Illustrator CC. Animerò una piccola icona dell'auto che è disponibile gratuitamente su Week Of Icons.

Dopo aver aperto il file, dobbiamo separare e dividere tutti gli oggetti in livelli. Puoi farlo manualmente o usare Rilascio su livelli (sequenza) per accelerare il processo. Prima di importare un file in After Effects, dobbiamo salvarlo in formato file Illustrator.

Possiamo separare gli oggetti usando Rilascio su livelli (sequenza), in modo da non perdere tempo prezioso.

Importa e organizza un file in After Effects CC

Ora tutto è pronto per l'importazione in After Effects CC. Usiamo una scorciatoia da tastiera Ctrl + I (Windows)o Comando + I (Mac)per caricare la finestra di dialogo Importare fileo vai a File\u003e Importa\u003e File ... Nello stesso posto, selezionare il file Illustrator CC che abbiamo preparato e fare clic Importare.Dovrebbe apparire una piccola finestra di dialogo con il nome del file selezionato. Selezionare Composizione dall'elenco a discesa chiamato Tipo di importazione.

Un modo più veloce per importare un file è fare doppio clic su una colonna nel pannello del progetto.

Nel pannello Timeline vedremo una nuova composizione. Fare doppio clic su di esso. Ora dovremmo vedere i livelli di Illustrator CC con icone arancioni a sinistra dei nomi.

Prima di metterci al lavoro, dobbiamo trasformare tutti questi livelli in Strati di forma. Dobbiamo evidenziarli tutti con Ctrl + A / Comando + Ao usando manualmente Maiusc + Mouse sinistro. Successivamente, fai clic con il pulsante destro del mouse sul livello e seleziona Crea\u003e Crea forme dal livello vettoriale.

Ora che i nuovi livelli sono selezionati, trascinali nella parte superiore del pannello sopra i livelli di Illustrator CC, quindi rimuovi i livelli di Illustrator CC in modo che non interferiscano.

Converti i livelli di Illustrator CC in Shape Shape in After Effects CC

Sebbene ciò non sia necessario, è importante assegnare a ciascun livello un nome corrispondente e / o etichettarlo con il colore. Questo ci consentirà di lavorare in modo più efficiente, poiché ci concentreremo sul personale chiave. Nell'esempio seguente, i colori delle etichette corrispondono più o meno al riempimento dei rispettivi strati.

Contrassegnare i livelli forma con nomi, colori, etichette e layout appropriati è molto pratico.

Utilizzare la scorciatoia da tastiera per configurare le impostazioni. Ctrl + K / Comando + K o Composizione\u003e Impostazioni composizione ... Da Impostazioni composizione dobbiamo scegliere la larghezza, l'altezza, la frequenza dei fotogrammi e la durata (larghezza, altezza, frequenza dei fotogrammi e durata). Per questo progetto, ho scelto 60 fotogrammi al secondo in modo che l'animazione sia fluida.

Al momento, sembra che tutto sia pronto per funzionare, ma c'è ancora un'altra cosa da fare. Dobbiamo raggruppare alcuni livelli in modo che i loro movimenti siano sincronizzati con il livello principale, che possiamo controllare. Questo metodo è chiamato Parenting.

Usa Pick Whip per assegnare un livello genitore a più livelli.

Nel nostro esempio, ho assegnato livelli meno significativi (livelli figlio), come un parabrezza, parti del corpo, legno e corde allo strato principale del corpo (livello padre). Questo mi ha permesso di controllare la posizione e la rotazione di tutta la macchina (ad eccezione delle ruote) usando lo strato principale.

Crea animazione

Volevo che la macchina colpisse un sasso e penzolasse un po 'in aria. Volevo anche che l'albero si muovesse su e giù e il tronco si aprisse. Ho iniziato creando pietre, macchine e ruote. Poi è arrivato il momento di superare il più grande ostacolo: applicare un'azione all'albero di Natale. Fatto ciò, ho raccolto piccoli dettagli come il baule e le corde.

Schizzo di animazione

Il primo passo è stato quello di creare l'elemento o il livello sotto forma di una pietra, ma invece di tornare ad Illustrator CC per aggiungere un altro livello, ho appena usato lo strumento Penna in After Effects CC. Questo mi ha permesso di progettare rapidamente una piccola pietra.

Oh potente strumento penna!

Il bagagliaio era un compito relativamente semplice. L'ho installato sul retro dell'auto e ho creato un punto di riferimento nel vertice in basso a sinistra. Usando Pick Whip, l'ho assegnato al livello del corpo genitore. Il penultimo passo è stato quello di dare l'effetto di rotazione, che a sua volta ha reso più realistico il momento di far rimbalzare la macchina, Bodymovin in combinazione con la libreria mobile Lottie.

Post scriptum Puoi trovare i miei file Illustrator CC e After Effects CC.

Un set di icone è disponibile per il download gratuito all'indirizzo.

Oggi abbiamo una lezione insolita di Adobe Illustrator. Perché questa volta non realizzeremo un'immagine statica, ma una vera animazione. Immagina, si scopre che usando Adobe Illustrator puoi anche disegnare cartoni animati :)

E non abbiamo bisogno di nulla per questo. Organizza correttamente i livelli ed esporta il lavoro finale in formato swf, dove ogni livello viene convertito in un frame di animazione. Nella lezione di oggi, disegneremo un'animazione del conto alla rovescia nello stile di un film retrò. L'output dovrebbe essere un filmato flash con lo stesso conto alla rovescia.

La prima cosa da fare è disegnare tutti gli elementi necessari per l'animazione futura. Per fare questo, in un documento separato, ho creato due posizioni della cornice del film, un cerchio per il conteggio, che viene tagliato in settori separati, trama e graffio verticale per aggiungere l'effetto dell'antichità, nonché tutti i numeri e le iscrizioni.

Quando tutte le parti del nostro fumetto sono pronte, puoi iniziare a creare l'animazione stessa. Per comodità, è meglio farlo in un nuovo documento. In questo caso, i livelli con cui interpreteremo il ruolo dei frame di animazione. E nel primo strato basta copiare il fotogramma del film. Posizionalo al centro dell'area di lavoro.

Ora crea un secondo strato e copia la cornice del film in esso, in cui i fori lungo i bordi sono realizzati con uno spostamento. Deve anche essere centrato.

Da questi due livelli è già possibile ottenere un'animazione di un film in movimento. Ma dopo abbiamo bisogno di molti più strati. Pertanto, selezionare i primi due livelli, andare alle opzioni del pannello ed effettuare una copia dei livelli.

Allo stesso modo, dobbiamo accumulare 12 strati con fotogrammi di pellicola che ne specificano il movimento.

Ora abbiamo un sacco di strati e sono tutti visibili. Nel senso che gli strati superiori sono ostruiti da quelli inferiori, il che non è molto conveniente per il lavoro. Pertanto, è possibile disattivare alcuni livelli facendo clic sull'icona a forma di occhio a sinistra del nome del livello. Per disattivare o accendere tutti i livelli contemporaneamente, tieni premuto il tasto Alt mentre fai clic sull'icona a forma di occhio. Attivando e disattivando i livelli, puoi vedere esattamente cosa si trova in un determinato fotogramma della nostra futura animazione. E ora, per aggiungere un leggero tremore al movimento del film, dobbiamo spostare leggermente i frame ricevuti in diverse direzioni. Per fare ciò, includi solo il livello con cui lavorerai al momento, quindi sposta la cornice di un paio di pixel in qualsiasi direzione.

Quando hai attraversato tutti i livelli e hai aggiunto un piccolo spostamento, puoi iniziare a creare animazioni del cerchio in movimento. Per fare questo, copia il cerchio costituito da settori del documento con le parti del fumetto e posizionalo sul primo strato sopra il fotogramma del film.

Se rimuovi la selezione dal cerchio, sembrerà un singolo intero. Questo è quello che ci serve.

Ma poiché è costituito da settori separati, è possibile, modificando il loro colore, creare animazioni molto rapidamente e facilmente. Per fare questo, copia questo cerchio sul secondo livello e rendi il primo settore più luminoso. Ricordi che il nostro film trema durante il movimento, quindi non è necessario posizionare il cerchio esattamente al centro dell'inquadratura. Posizionalo ad occhio.

Allo stesso modo, devi copiare il cerchio in ogni livello successivo, mentre dipingi un altro settore con un colore più chiaro rispetto alla volta precedente. Insieme, questi 12 strati formano un'animazione del movimento del film con un cerchio di riempimento.

Successivamente è necessario aggiungere texture ai nostri livelli. Attiva il primo livello e copia lì la trama dal file di origine con pezzi di ricambio.

Quindi, a sua volta, attiva i seguenti livelli e copia lì la stessa trama. Per renderlo diverso su ogni fotogramma, basta ruotarlo di 90 gradi. Come avrai intuito, dobbiamo aggiungere una trama a tutti e 12 i fotogrammi.

Se sei già stanco di copiare in ordine, posso farti piacere - rimane ben poco. La parte più difficile è finita. Resta da aggiungere graffi verticali e quasi tutto. Per fare questo, di nuovo, copia lo scratch originale e mettilo in un posto arbitrario in più livelli. Nel mio caso, i graffi appaiono solo in due strati.

Ora che il ciclo principale con l'animazione del film è pronto, resta da aggiungere i numeri. Poiché il conto alla rovescia va da 3 a 1, più la parola Vai !!!, abbiamo bisogno di ancora più livelli. Non 12, ma ben 48. Per fare questo, devi fare altre tre copie di livelli già pronti con l'animazione del film.

E poi tutto è semplice. Attiva il primo livello e inserisci lì il numero tre.

Quindi è necessario copiare questa figura nei livelli successivi fino al termine dell'animazione del cerchio. Quando si arriva alla copia successiva dei livelli, in cui il cerchio verrà nuovamente riempito completamente, è necessario inserire già il numero due. Allo stesso modo, copia il numero uno nei livelli desiderati. E quando arrivi agli strati finali previsti per l'iscrizione Vai !!!, allora elimina semplicemente il cerchio prima di copiare l'iscrizione sul livello desiderato.

Questo è tutto con l'animazione. La cosa principale qui non è confondersi. Puoi dare ai livelli qualsiasi nome comodo, ma ero in qualche modo pigro :) Eppure, quando finisci il lavoro, assicurati di riattivare tutti i livelli facendo clic sull'icona dell'occhio.

Nella finestra con le impostazioni di esportazione, assicurati di impostare Esporta come: livelli AI su frame SWF. È questa opzione che trasforma i livelli di Illustrator in frame di animazione. Quindi, fai clic sul pulsante Avanzate.

Si apriranno le impostazioni avanzate. Qui è necessario impostare la frequenza dei fotogrammi. Ho 12 fotogrammi al secondo. Il segno di spunta Looping è responsabile del ciclo di animazione. Grazie al suo video verrà riprodotto in cerchio. E l'opzione Layer Order: Bottom Up riproduce i livelli di Illustrator dal basso verso l'alto nel pannello. È esattamente così che abbiamo costruito la nostra animazione.

All'uscita, otteniamo un filmato in flash con la nostra animazione.

Ora vedi che realizzare semplici animazioni in Adobe Illustrator non è così difficile come sembra a prima vista.

Ma per creare video lunghi o applicazioni interattive, è ancora meglio usare Adobe Flash o altri editor di flash. Ad esempio, ho realizzato questo gatto in un vecchio Macromedia Flash, che ho scavato nel mio posto di lavoro.

Anche recentemente HTML5 e CSS3 sono usati sempre più spesso per creare animazioni. Questo codice è supportato dai browser moderni e non richiede l'uso di un flash player.

Roman aka dacascas appositamente per il blog Microstock Illustrator Notes

Iscriviti alla nostra newsletter per non perdere nulla di nuovo: