Adobe Illustrator e After Effects
Importa I. animazione semplice

Ciao. Oggi c'è una semplice animazione in After Effects.

Risorse: Adobe Illustrator cc
Adobe After Effects cc

Iniziamo ad imparare dal disegno in illustratore.

Disegnare
1) Disegna come sfondo con un rettangolo giallo

Figura 1 - Rettangolo

2) Disegna un cerchio e una collina di gradiente
Lavoreremo un po 'sopra il cerchio:
- Rimuoviamo il punto più basso sul contorno, otteniamo un arco;
- Passiamo una linea retta chiudendo il fondo dell'arco, otteniamo un semicerchio

Figura 2 - 1) Disegna il cerchio; 2) gradiente; 3) Elimina Punto

3) Disegna un rettangolo e rendilo una copia
- un rettangolo grigio;
- Un altro rettangolo grigio scuro
4) Disegna un triangolo da un asterisco impostando il numero di raggi - 3

Figura 3 - 1) Luce rettante; 2) Dark rettificato; 3) Triangolo

5) Disegna un gatto con penna e figure semplici

Figura 4 - 1) Testa; 2) collo; 3) corpo; 4) gamba; 5) coda

E ora molto PRINCIPALE momento
Distribuisco le immagini sui livelli (il fatto che sarà animato - su un livello separato) come questo:

Figura 5 - Tutte le foto (Strati importanti del segno rosso)

Tutto, ora salviamo.
Vediamo le impostazioni di conservazione

Figura 6 - Salva

E ora la fase successiva. VicinoAdobe Illustrator e Apri After Effects.

Importa in After Effects
File - Import - File - Seleziona il nostro file salvato Illustratore.
Selezionare per importare livelli dall'illuminatore Se si fornisce filmati, avremo una foto con gli strati combinati e non ne abbiamo bisogno.

Figura 7 - Importa come composizione

Tutto importato.
E ora vediamo cosa abbiamo. Fare doppio clic sulla composizione Cosa sarebbe stato aperto e abbiamo visto i livelli (se tutti hanno fatto tutto, ci saranno diversi strati). Otteniamo questo, vediamo il disegno

Figura 8 - Composizione aperta

E ora, per quello che siamo qui oggi - animazione.

Animazione B. Effetti postumi.
Impostare il punto di rotazione dalle frecce nella parte superiore di esso usando Pan dietro lo strumento (tasto veloce - y). Basta prendere il punto e muoversi dove è richiesto. Di conseguenza, sembrerà questo ..

Figura 9 - Strumento e livelli PAN

Bene, tutto, ora vai negli strati per l'animazione.
Avremo bisogno di una freccia a strati e head_cat.
Iniziamo con la freccia.
Apriremo l'elenco, trovare e clicca sull'orologio. Quindi abbiamo impostato il primo punto sullo zero secondo. L'animazione totale durerà 2 secondi.
Quindi, queste impostazioni devono essere eseguite (metteremo 3 punti in totale)

SECONDO.	0	1	2
	+66	- 70	+66

È così che sembrerà:

Figura 10 - Freccia di rotazione

E ora animava la testa del gatto.
Apri head_cat e trovare Posizione.
Ci saranno 4 punti.
Ci saranno solo l'ultima coordinata che non toccherà il resto.

SECONDO.	0.1	0.17	1.12	2.0
Posizione	689.3	729.3	729.3	689.3

Guardiamo l'immagine.

Figura 11 - Posizionare la testa

Quindi, il principio di animazione era tale. La freccia che oscilla da una parte da parte non appena si avvicina al gattino, tira la testa in se stesso, inducendo in questa posizione un po ', e poi lo restituisce al posto.

La fase finale

PRODUZIONE
È necessario creare un prodotto finito dal tuo lavoro.
Vai al menu - Aggiungi al rendering coda
Il pannello di rendering si aprirà e selezionerà il formato di output in Modulo di output. Ho preso * .mov

Figura 12 - Rendering

Fare clic sul pulsante Render e ottenere il risultato (basta non dimenticare di specificare il percorso).
È tutto.

Hai una o due icone che vorresti rivivere con l'aiuto dell'animazione. Cosa inizieresti? Supponiamo di avere file SVG, illustrator cc e post effetti cc, ma la soluzione ti elude.

In questo articolo, dimostrerò come è possibile animare facilmente il file SVG, inclusa la preparazione del file SVG in Illustrator e importare in After Effects cc. Spiegherò anche come convertirlo per modellare gli strati e aggiungere movimenti. E infine, parliamo di esportare e rendering.

Il risultato finale del lavoro.

Ora andiamo alla parte più interessante - impara a far rivivere le immagini.

Preparazione del file SVG in Illustrator

Iniziamo con l'apertura del tuo file SVG in Adobe Illustrator CC. ANTINARE UN'ICONA DI PICCOLO AUTO CHE È DISPONIBILE GRATUITAMENTE IN SETTIMANA DI ICONE.

Dopo aver aperto il file, abbiamo bisogno di ingiusto e dividere tutti gli oggetti sui livelli. Puoi farlo manualmente o usare Rilascio agli strati (sequenza) Accelerare il processo. Prima di importare un file in After Effects, dobbiamo salvarlo nel formato del file illustrator.

Nonostante gli oggetti possiamo usare il rilascio su livelli (sequenza) in modo da non spendere tempo prezioso.

Organizzazione di importazione e file in After Effects CC

Ora tutto è pronto per l'importazione in After Effects cc. Usiamo la combinazione di tasti Ctrl + I (Windows)o Comando + I. (Mac)Per caricare la finestra di dialogo Importare file.o andare File\u003e Importa\u003e File ... Lì, selezionare il file preparato illustratore CC e premere Importare.Una piccola finestra di dialogo dovrebbe apparire con il nome del file selezionato. Scegliere Composizione Dall'elenco a discesa chiamato Importazione tipo..

Di più via veloce Importazione di un file: doppio clic sul posto della colonna sul pannello Progetto.

Nel pannello del pannello Timeline, vedremo una nuova composizione. Due volte clicca su di lei. Ora dobbiamo vedere gli strati del cc illustrator con icone arancioni a sinistra dei nomi.

Prima di procedere con il caso, dobbiamo trasformare tutti questi livelli in Strati di forma.. Abbiamo bisogno di evidenziarli tutti con Ctrl + A / Command + Ao usando manualmente Shift + Sinistro del mouse. Successivamente, fai clic su fare clic con il tasto destro Mouse sul livello e seleziona Crea\u003e Crea forme da Vector Layer.

Ora che i nuovi strati sono evidenziati, trascinali a superiore Pannelli su strati di illustrator cc, quindi rimuovere i livelli di illustratore CC in modo che non interferiscano.

Conversione di strati di illustratore CC in forma strati in After Effects cc

Sebbene non sia necessario, è importante dare a ciascun livello il nome appropriato e / o lo designato con il colore. Questo ci permetterà di lavorare in modo più efficiente, come ci concentreremo fotogrammi chiave. Nell'esempio seguente, il colore delle iscrizioni corrisponde più o meno al riempimento dei livelli corrispondenti.

Per etichettare gli strati di forma con i nomi, i fiori, le iscrizioni e la posizione corrispondenti è molto pratico.

Utilizzare la combinazione di tasti per configurare le impostazioni Ctrl + K / Command + K o Composizione\u003e Impostazioni di composizione ... Dalle impostazioni della composizione dobbiamo scegliere la larghezza, l'altezza, la frequenza del fotogramma e la durata (larghezza, altezza, frame rate e durata). Per questo progetto, ho scelto 60 fotogrammi al secondo in modo che l'animazione fosse liscia.

Sul questo momento Sembra che tutto sia pronto a lavorare, ma c'è un'altra cosa da fare. Abbiamo bisogno di raggruppare alcuni strati insieme in modo che i loro movimenti siano sincronizzati con lo strato principale, che possiamo controllare. Questo metodo è chiamato Parenting..

Utilizzare Pick Whip per assegnare uno strato genitore a diversi livelli.

Nel nostro esempio, ho prescritto strati meno significativi (filiali), come parabrezza, parti del corpo, legno e corde dello strato del corpo primario (strato genitore). Questo mi ha permesso di controllare la posizione e la rotazione dell'intera auto (ad eccezione delle ruote) con l'aiuto del livello genitore.

Creando un'animazione

Volevo che la macchina colpisca la pietra e appese un po 'nell'aria. Volevo anche che l'albero muovermi su e giù, e il tronco si è aperto. Ho iniziato con la creazione di pietra, macchina e ruote. Quindi è il momento di superare il più grande ostacolo - imporre un'azione sull'albero di Natale. Avendo finito, ho preso piccoli dettagli, come il tronco e le corde.

Schizzo con Descrizione dell'animazione

Prima di tutto, è stato necessario creare un elemento o uno strato sotto forma di una pietra, ma invece di tornare a Illustrator CC per aggiungere un altro strato, ho semplicemente utilizzato lo strumento utensile penna in After Effects cc. Questo mi ha permesso di progettare rapidamente una piccola pietra.

Oh, potente strumento penna!

Il tronco era un compito relativamente semplice. L'ho installato da dietro la macchina e l'ho fatto punto di supporto nel vertice in basso a sinistra. Usando Pick Whip, l'ho nominato allo strato del corpo genitore. Il passo penultimo era quello di dare l'effetto della rotazione, che a sua volta ha fatto il momento di rimbalzare la macchina più realistica .bodymovins in combinazione con la biblioteca mobile Lottie.

P.S. Puoi trovare il mio file illustrator. CC e After Effects cc.

Set di icone disponibili per il download gratuito.

Ciao a tutti! Oggi proverò a fare una descrizione delle funzionalità del programma Adobe Illustrator, confrontandolo con funzionalità flash. Non sarà una sigillatura globale del programma BONE, ma piuttosto una descrizione di alcuni chip interessanti che ho scoperto per me stesso in questo programma. Le informazioni sono state raccolte in pezzi come imparare a deporre tutto in un post. Confessare immediatamente che non sono un utente di illustratore super esperto, solo ultimi sei mesi Lo uso nel disegno (prima che tutto ciò abbia disegnato a filo). Molti assicurano che l'illustratore sia complesso, intuitivamente non sempre comprensibile. In una certa misura, sono d'accordo che dopo un flash, questo programma è complicato. Ma poi la cosa principale non è smettere, ma continuare ad imparare. E dopo un paio di settimane, appare un pensiero, come ero solito fare a meno!

Quindi cosa mi è piaciuto in un illustratore, e che ho trovato per me stesso che cosa non è nel flash.
1. Inizierò con il più semplice, ma allo stesso tempo hai bisogno. Prova a posizionare oggetti in un cerchio. Prima era Strumento Deco. Ma è stato rimosso, a quanto pare, contato inutile. Decisero che le maniglie lo facciano più divertenti. In un illustratore, questa funzione è: Effetto - Distorce e trasformazione - Trasforma.

Tutti rapidamente e semplici, i valori (la distanza tra gli oggetti, il numero di copie) specificano le impostazioni da soli.

2. Zig-zag

Ancora più semplice, ma tuttavia una cosa utile. Sembrerebbe una sciocchezza, ma in lavatrice devi disegnare manualmente, in un illustratore questa è una seconda cosa.

3. Deformazione degli oggetti (curvatura)

Non c'è niente del genere nel flash. Nell'esempio seguente, ho mostrato solo 2 modi di deformazione di moduli semplici (effetto - warp - arco / pesce). In effetti, i loro 15 in ultima versione Programmi.

4. Arrotondamento automatico degli angoli (angoli rotondi)

Puoi fare manualmente: sull'oggetto grafico durante l'isolamento nell'angolo (in tutta la ghiandola) c'è un punto bianco e un segno di linea federale. Tiro il mouse, adattami ai tuoi gusti.

Ma questo riguarda solo le forme, con una linea di matita un po 'diversamente - applicare l'effetto di arrotondamento ( Effetto - stilize - angoli rotondi). All'uscita otteniamo lo stesso potere.

5. Rumoroso (olio)

L'effetto si applica a moduli semplici ( Effetto - distorce e trasformazione - ruvido). All'uscita, otteniamo qualcosa che assomiglia ai modelli 3D a basso polyboralal. A mio parere, fresco :) e soprattutto - molto semplice.

6. Pucker & Bloat (Tirando e gonfiando)
Un esempio nella foto qui sotto:

7. Espansione modulo (percorso offset)

Nel flash c'è una funzione di riempimento espanso (espandere il riempimento), con le linee di matita non funziona affatto, a differenza dellustratore.

8. Pennelli (spazzola d'arte, pennello modello, spazzola a dispersione)
Non cerchiamo un'immagine qui sotto con esempi:

9. Spazzola in tessuto (spazzole in materiatura)

Anche nel illustratore ci sono un sacco di spazzole strutturati, che ho scritto, e come sono apparsi nuova versione Veloce. È stato osservato che l'uso di spazzole di Adobe Animate è spaventoso inibisce. Questo è tutto:(

10. Non sono sicuro che sia un trucco dritto, ma voglio rimanere alla nappa con un nome divertente BlobSpazzola.. Situato sulla barra degli strumenti, molto piacevole per usare il pennello. Ha un sacco di impostazioni, mi piace più del solito. A parole, è difficile da spiegare sui suoi vantaggi, è meglio provare una volta.

10.Stizi a griglia.

Anche una cosa utile - la funzione divisa a griglia (oggetto-percorso-split to grid). La gente del posto ha tagliato la forma sui segmenti uguali. Cosa ci ricorda questo? Giusto - Windows in un grattacielo. Per quanto riguarda me, un pezzo fresco per il disegno, ad esempio, paesaggi urbani;)

Specialmente uno attrezzo utilePresentato nellustratore è probabilmente sin dalla sua prima versione. Con esso, puoi creare, ad esempio, struttura in legno:

12. Sposta (destra - Trasforma - Sposta)

Oggetto offset a una distanza predeterminata. Se lo si desidera, è possibile creare immediatamente una copia che verrà posizionata nella distanza desiderata dall'oggetto orizzontale selezionato / oggetto verticale. In più versione iniziale Il flash era un plugin che ha eseguito questa caratteristica. Sfortunatamente, non ricordo il suo nome.

In un illustratore, è molto comodo creare modelli senza soluzione di continuità ( Object-pattern-make). Ricordo come ho frenamente sofisticato in un lampo con la creazione. Nella versione del SS 2015 Illustr, tutto è automatizzato, molte impostazioni aiuteranno a bere modelli in dozzine di varianti, aventi solo diversi elementi grafici a portata di mano. Nelle versioni precedenti del programma, tutti hanno dovuto fare manualmente, come a sciacquare finora.

(Nota: il modello può essere fatto da un oggetto modificabile vettoriale utilizzando una funzione per smontare ( Oggetto - Espandi la presenenza).

14. Mosaico dell'oggetto (mosaico)

Creazione di una tavolozza dei colori basata sull'immagine disponibile. Importa la tua immagine preferita in malato (aperto), quindi Oggetto - Crea mosaico oggetto. Nelle impostazioni, specificare la frequenza di fissione in altezza e alla larghezza.

E otteniamo all'uscita:

15.Vendibile (miscelazione)

Usato per creare gradienti. Può essere creato transizioni passo-passo, come nella foto. Non dirò che lo uso spesso, ma potrebbe essere utile a qualcuno. Mi sembra che tu possa usare nella creazione di semplici foto di sfondo.

Inoltre, lo strumento può essere utilizzato per clonare gli oggetti. Posizioniamo due oggetti a distanza l'uno dall'altro e applichiamo le opzioni di miscelazione, selezionare il numero di passaggi (il numero di oggetti clonati).

16. Lo strumento Tool Forma Build. Cosa molto comoda da lavorare con primitivi. Nel flash, come mi sembrava, meno conveniente.

Cliccando alt e fare clic su Segmenti dedicati - Elimina segmenti. Se si tratta semplicemente del mouse su diverse aree dedicate - Connetti.

Supplemento: uno strumento che aiuta automaticamente a tagliare, connettersi, ecc. Forme selezionate. Per quanto riguarda me, non è molto conveniente, uso più spesso CostruireFormaAttrezzo.

(Aree di montaggio)

18. Pannello degli attrezzi personalizzato.

La capacità di creare la propria barra degli strumenti stessa, lanciando inutili e scegli solo quelli che usi.

Nelle aree di montaggio, di montaggio, cioè scene ( Scena 1,2,3 ..) Situato separatamente e tra loro è necessario passare (SHIFT + F2). Nellustratore, possono essere collocati davanti ai loro occhi. Convenientemente, quando fai diverse opzioni per la stessa immagine in modo che tutte le opzioni siano davanti ai nostri occhi per il confronto.

19. Isometrica S. usando grafico Stili.

E quest'ultima è la creazione di isometriche senza uso in 1 clic (e più precisamente, in 3 clic, perché abbiamo 3 lati;) con gli stili grafici ( Stili grafici.). Come è fatto, scriverò la prossima volta.

Nel complesso con un lampeggiatore dall'illuminatore - la possibilità di salvare un oggetto nel simbolo (simbolo) e anche senza problemi può essere trasferito al flash (aperto nel file flash.ai Importa - Importa in fase).
Il personaggio del illustratore ha le stesse proprietà del flash.
E alla fine scriverò che nellustratore, a mio parere, è inferiore a lampeggiare. Sì, sì, ed è così. E questo è lo strumento di riempimento ( Secchio di vernice.). Come non provo ad abituarmi a lei in Ille, in un'illustrazione è più conveniente.
Se le mie note sono diventate utili per te o per quello che vuoi da te stesso per integrare - Velkov nei commenti! Buona fortuna a tutti;)

Recentemente, la grafica SVG Animazione (grafica vettoriale scalabile) su siti e applicazioni è diventata molto popolare. Questo è dovuto al fatto che tutto nuovi browser Supporta già questo formato. Ecco le informazioni per il supporto dei browser SVG.

Questo articolo discute il più semplice esempio dell'animazione del vettore SVG utilizzando il plug-in plugin pittore Lineazy.

Codice sorgente

Per soddisfare e completare la comprensione di questo compito, la conoscenza di base di HTML, CSS, JQuery, ma non necessariamente se vuoi solo animare SVG) Saliamo!

E così i passaggi che dobbiamo eseguire:

1. Crea la struttura del file giusta
2. Scarica e collega il plugin
3. Disegna una foto del contorno cool in Adobe Illustrator
4. Converti la nostra immagine in Lazy Line Converter
5. Inserire il codice risultante in Main.JS
6. Aggiungi alcuni CSS a piacere

1. Creare la struttura del file corretto
Con questo, questo aiuterà il servizio InitializR in cui è necessario selezionare i parametri come nell'immagine qui sotto.

• Classic H5BP (piastra di caldaia HTML5)
• Nessun modello.
• Solo html5 shiv.
• Minificato
• Cioè Casses.
• Cornice Chrome.
• Quindi fai clic su Scarica!

2. Scarica e collega il plugin

Dal momento che InitializR viene fornito con l'ultima libreria jQuery, dall'archivio che downloriamo download dal depository del progetto pittore Line Lazy, è necessario trasferire solo 2 file sul nostro progetto. Il primo è "jquery.lazylinepainter-1.1.min.js" (la versione plug-in potrebbe differire) è nella root della cartella risultante. Il secondo è Esempio / JS / Venditore / Raphael-min.js.

Questi 2 file sono inseriti nella cartella JS. E collegarli al nostro indice.html davanti al main.js come segue:

3. Disegna una ripida immagine contorno in Adobe Illustrator

1. Disegniamo la nostra immagine contorno in Illustrator (il modo più semplice per fare con lo strumento penna)
2. È necessario che i contorni del nostro disegno non chiudono TC per il nostro effetto. Inizio e fine
3. Non ci dovrebbe essere riempimento
4. Dimensione massima del file - 1000 × 1000 px, 40kb
5. Crop to Object Object\u003e Tabelloni\u003e Adatta ai limiti delle tavole da disegno
6. Salva in formato SVG (le impostazioni standard di salvataggio sono adatte)

Ad esempio, è possibile utilizzare le icone nell'attacco.

4. Converti la nostra immagine in Lazy Line Converter
Basta trascinare la tua icona nella finestra che nella figura seguente.
Spessore, il colore del circuito e la velocità di animazione può essere modificato nel codice stesso che apparirà dopo la conversione!

5. Inserire il codice risultante in Main.JS
Ora inserisci semplicemente il codice ricevuto nel file main.js vuoto
Parametri:
Strokewidth - Spessore di contorno
Strokecolor - Colore contorno
È inoltre possibile modificare la velocità di disegno di ciascun vettore modificando i valori del parametro della durata (default 600)

6. Aggiungi alcuni CSS a piacere
Rimuovi dal paragrafo index.html

Ciao mondo! Questa è la caldaia HTML5.

E invece di inserire il blocco in cui si verificherà la nostra animazione

quindi aggiungi alcuni CSS al file Main.CSS per un design più piacevole:

Corpo (sfondo: # F3B71C;) #Cons (posizione: fisso; Top: 50%; sinistra: 50%; margine: -300px 0 0 -400px;)

salva tutti i file.
Ora apri semplicemente Index.html in un browser moderno e goditi l'effetto.

P.S. Quando si inizia sulla macchina locale, è possibile l'avvio dell'animazione per alcuni secondi.

GIF trasparente in Adobe Illustrator è il seguente. Andiamo al file\u003e Salva per il menu Web e dispositivi (ALT + Ctrl + Shift + s). Nella finestra che si apre nel campo File file ottimizzato, è necessario prima andare alla scheda. Dimensione dell'immagine. (Dimensione dell'immagine). Il fatto è che l'intera pagina rientra nella finestra di ottimizzazione, e questo di solito non è necessario. Pertanto, nella scheda Dimensione immagine, rimuovere la selezione dalla casella di controllo Clip to Artboard. (Trim nella dimensione della pagina) e premere il pulsante Applica.

Quindi selezionare GIF nell'elenco di selezione del formato e contrassegnare la casella di controllo Trasparenza.

Dopodiché, definiamo quali colori saranno trasparenti. Tutti i colori presenti nell'immagine sono contenuti nella scheda. Tabella dei colori (Tabella dei colori) e visualizzata sotto forma di quadrati di colore. Selezionare nella barra degli strumenti nel lato sinistro dello strumento della finestra Eyedropper. (pipetta).

Puoi definire i colori in due modi. Il modo più semplice per specificare il colore della pipetta direttamente sull'immagine - dopo questo, il colore è evidenziato sulla tabella dei colori con un tratto scuro. Bene, se sai esattamente di che colore dovrebbe essere trasparente, puoi evidenziarlo direttamente sulla tabella dei colori premendo il quadrato del colore appropriato. E nel primo e nel secondo caso, se è necessario selezionare più colori, è necessario funzionare con il tasto SHIFT (o CTRL). Dopo aver selezionato il colore, è necessario specificare il programma per renderlo trasparente. Per fare questo, fai clic sull'icona Maps Colors selezionati a trasparente (Aggiungi colori selezionati alla trasparenza). Nell'immagine, questo pulsante è cerchiato e il colore rosso è selezionato trasparente. L'immagine apparirà un'area trasparente e il quadrato sul tavolo da tavola cambierà la sua visione - parte di esso diventerà un triangolo bianco. Per annullare il colore selezionato, è necessario evidenziarlo nella tabella dei colori, quindi fare nuovamente clic sulle mappe colori selezionati in icona trasparente.

Alcune parole sul metodo per specificare la trasparenza. Il menu a discesa è responsabile per questo. Specificare l'algoritmo di trasparenzaIn russo, l'algoritmo di simulazione della trasparenza (fig. Sotto). È possibile effettuare quattro scelte: nessuna trasparenza dither - nessun algoritmo, trasparenza di diffusione Dither - algoritmo diffuso, trasparenza modello ditherther - modello in base al modello e alla trasparenza del rumore - algoritmo di rumore. Nel modo di algoritmo diffuso diventa un cursore attivo Quantità. (Valore), che consente di cambiare il valore della diffusione. Cosa applicare nella pratica? A seconda dello scopo e dell'immagine. Non uso questa opzione e lascia sempre il predefinito - nessuna trasparenza.

Fai clic su Salva - gIF trasparente. Pronto. Il lavoro è stato effettuato in Adobe Illustrator versione CS4 (V.14), ma tutte le azioni e le riduzioni della tastiera sono rilevanti per la versione precedente di CS3 (v. 13).