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ì, seleziona preparato da noi file dellustrator Cc e click. 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. È possibile trovare i file cc illustrator cc e After Effects.

Set di icone disponibili per il download gratuito.

Flash File Formato (SWF) è basato su grafica vettoriale E progettato per grafica scalabile e compatta per Internet. Poiché questo formato di file si basa sulla grafica vettoriale, l'oggetto salva la qualità dell'immagine a qualsiasi risoluzione ed è ideale per la creazione di cornici di animazione. Nellustrator, è possibile creare fotogrammi di animazione separati sui livelli e quindi esportare gli strati dell'immagine in singoli fotogrammi per l'uso sul sito web. Puoi anche determinare simboli Nel file dellustrator per ridurre le dimensioni dell'animazione. Durante l'esportazione, ogni carattere è definito nel file SWF solo una volta.

Team di esportazione (SWF)

Fornisce il massimo controllo sull'animazione e sulla compressione bit.

Fornisce più controllo sulla miscela di formati SWF e bit in un layout frammentato. Questo comando offre meno parametri di immagine rispetto a "Esporta" (SWF), ma utilizza gli ultimi parametri di comando utilizzati su "Esporta" (vedere).

Quando si prepara un oggetto per salvare in formato SWF, ricordare le seguenti raccomandazioni.

Utilizzando l'applicazione centrale del dispositivo, è possibile vedere come sarà illustrato l'oggetto grafico illustratore nell'applicazione. Flash Player. Su vari dispositivi tascabili.

Inserimento dellustratore dell'oggetto grafico

Creato da appendice Illustrator. L'oggetto grafico può essere rapidamente, semplicemente e senza difficoltà a copiare e incollare nell'applicazione flash.

Quando si inserisce l'oggetto grafico Illustrator, i seguenti attributi vengono salvati nell'applicazione flash.

Contorni e figure

• Spessore della paglia

  Definizione di gradienti

  Testo (compresi i font OpenType)

  Immagini correlate

• Modalità di sovrapposizione

Inoltre, illustratore e flash supportano le seguenti possibilità durante l'inserimento di un oggetto grafico.

Quando evidenzia i livelli dellustratore nell'oggetto grafico livello superiore L'intero inserimento di loro negli strati di applicazione flash e le loro proprietà (visibilità e blocco) sono salvati.

I formati di colore dellustrator sono diversi da RGB (CMYK, gradi di formati Grigio e Utente) vengono convertiti con il flash in formato RGB.. I colori RGB sono inseriti nel solito modo.

Durante l'importazione o l'inserimento di un oggetto grafico, l'illustratore può essere salvato utilizzando diversi parametri per salvare determinati effetti (ad esempio, un'ombra rilasciata dal testo) come filtri flash.

Flash mantiene le maschere illustrator.

Esportazioni di file SWF dall'applicazione Illustrator

I file SWF esportati dall'applicazione Illustrator corrispondono alla qualità e al grado di compressione dei file SWF esportati dall'applicazione flash.

Durante l'esportazione, è possibile selezionare uno dei numerosi stili predeterminati che forniscono un'uscita ottimale e specificare il metodo di utilizzo di più aree di montaggio, un metodo per convertire caratteri, livelli, testo e maschere. Ad esempio, è possibile specificare l'esportazione di caratteri illustrator sotto forma di rulli o immagini grafiche, così come la creazione di personaggi SWF dagli strati di illustratore.

Importa file illustrator nell'applicazione flash

Per creare un layout completo nell'applicazione illustratore, quindi importarlo nell'applicazione flash in un passaggio, è possibile salvare l'oggetto grafico nel tuo illustratore di formato (AI) e importarlo con alta precisione nell'applicazione flash utilizzando il comando Filma \u003e "Importa in area di lavoro" o "File"\u003e Importa in libreria.

Se il file illustrator contiene diverse aree di montaggio, selezionare l'area di installazione per l'importazione nella finestra di dialogo Importa del programma flash e specificare le impostazioni per ciascun livello in questa area di montaggio. Tutti gli oggetti nell'area di montaggio selezionati vengono importati nel programma Flash come un unico livello. Quando si importano un'altra area di montaggio dallo stesso file AI, gli oggetti da questa area di montaggio vengono importati nel programma flash come nuovo livello.

Quando si importa un illustratore di oggetti grafici sotto forma di file AI, EPS o PDF, l'applicazione flash salva gli stessi attributi come quando si inserisce illustratore di oggetti grafici. Inoltre, se il file importato illustratore contiene livelli, possono essere importati in uno dei seguenti metodi.

Convertire i livelli dellustratore in strati flash.

Convertire i livelli dellustratore per flash fotogrammi.

Converti tutti i livelli di illustratore su un livello flash.

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 della 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 realizzato in Adobe Illustrator versione di CS4 (V.14), ma tutte le azioni e le riduzioni della tastiera sono rilevanti per di più versione iniziale CS3 (v. 13).

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.