La GIF trasparente in Adobe Illustrator viene eseguita come segue. Vai al menu File > Salva per Web e dispositivi (Alt+Ctrl+Maiusc+S). Nella finestra che si apre, nel campo Formato file ottimizzato, devi prima andare alla scheda dimensione dell'immagine(dimensione dell'immagine). Il fatto è che l'intera pagina entra nella finestra di ottimizzazione per impostazione predefinita, e questo di solito non è necessario. Pertanto, nella scheda Dimensioni immagine, deseleziona la casella di controllo Clip su tavola da disegno(Ritaglia per adattare la pagina) e fai clic sul pulsante Applica.

Quindi, nell'elenco di selezione del formato, seleziona GIF e seleziona la casella di controllo Trasparenza.

Successivamente, determineremo quali colori saranno trasparenti. Tutti i colori presenti nell'immagine sono contenuti nella scheda tavola dei colori(Carta colori) e vengono visualizzati come quadrati colorati. Seleziona uno strumento dalla barra degli strumenti sul lato sinistro della finestra contagocce(pipetta).

I colori possono essere definiti in due modi. Il modo più semplice è specificare il colore con un contagocce direttamente sull'immagine, dopodiché il colore verrà evidenziato sulla tavola dei colori con un tratto scuro. Bene, se sai esattamente quale colore dovrebbe essere trasparente, puoi selezionarlo direttamente sulla tabella dei colori facendo clic sulla casella colorata corrispondente. E nel primo e nel secondo caso, se devi selezionare più colori, devi lavorare con il tasto Maiusc (o Ctrl) premuto. Dopo aver scelto un colore, è necessario istruire il programma per renderlo trasparente. Per fare ciò, fare clic sull'icona Mappa i colori selezionati su Trasparente(Aggiungi i colori selezionati alla trasparenza). Nella figura, questo pulsante è cerchiato e il colore rosso è impostato su trasparente. Sull'immagine apparirà un'area trasparente e il quadrato sulla tavola dei colori cambierà aspetto: una parte diventerà un triangolo bianco. Per annullare il colore selezionato, è necessario selezionarlo nella Tabella dei colori, quindi fare nuovamente clic sull'icona Mappa i colori selezionati su Trasparente.

Qualche parola sul metodo di impostazione della trasparenza. Il menu a discesa ne è responsabile. Specificare l'algoritmo di retinatura trasparenza, in russo - Algoritmo di simulazione della trasparenza (fig. sotto). Ci sono quattro scelte: No Transparency Dither - nessun algoritmo, Diffusion Transparency Dither - algoritmo diffuso, Pattern Transparency Dither - algoritmo basato su pattern e Noise Transparency Dither - algoritmo basato sul rumore. Nella modalità algoritmo diffuso, lo slider diventa attivo Quantità(Importo) che consente di modificare il valore di diffusione. Cosa applicare in pratica? A seconda dello scopo e dell'immagine. Non uso questa opzione e lascio sempre l'impostazione predefinita - No Transparency Dither.

Premi Salva: la GIF trasparente è pronta. Il lavoro è stato svolto in Adobe Illustrator versione CS4 (v.14), ma tutte le azioni e le scorciatoie da tastiera sono rilevanti per di più prima versione CS3 (v. 13).

Recentemente, vari tipi di animazione di grafica SVG (Scalable Vector Graphics) su siti Web e applicazioni sono diventati molto popolari. Ciò è dovuto al fatto che tutto browser più recenti supportano già questo formato. Ecco le informazioni sul supporto del browser per SVG.

Questo articolo discute l'esempio più semplice animazioni svg vettori utilizzando il semplice plugin Jquery Lazy Line Painter.

fonte

Per completare e comprendere appieno questo compito, la conoscenza di base di HTML, CSS, Jquery è desiderabile, ma non richiesta se vuoi solo animare SVG) Iniziamo!

E quindi i passaggi che dobbiamo seguire:

1. Crea la struttura del file corretta
2. Scarica e collega il plugin
3. Disegna una bella linea d'arte in Adobe Illustrator
4. Converti la nostra immagine in Lazy Line Converter
5. Incolla il codice risultante in main.js
6. Aggiungi un po' di CSS a piacere

1. Creare la struttura del file corretta
Il servizio Initializr ci aiuterà in questo, dove è necessario selezionare i parametri come nell'immagine qui sotto.

• Classic H5BP (piastra caldaia HTML5)
• Nessun modello
• Solo HTML5 Shiv
• minimizzato
• Classi .IE
• Cornice cromata
• Quindi fare clic su Scaricalo!

2. Scarica e connetti il ​​plugin

Poiché initializr viene fornito con l'ultimo libreria jquery, dall'archivio che dobbiamo scaricare dal repository del progetto Lazy Line Painter, solo 2 file devono essere trasferiti al nostro progetto. Il primo è "jquery.lazylinepainter-1.1.min.js" (la versione del plugin può differire) si trova nella radice della cartella risultante. Il secondo è esempio/js/vendor/raphael-min.js.

Questi 2 file vengono inseriti nella cartella js. E li includiamo nel nostro index.html prima di main.js in questo modo:

3. Disegna una bella immagine di contorno in Adobe Illustrator

1. Disegna la nostra immagine di contorno in Illustrator (il modo più semplice per farlo è con lo strumento Penna)
2. È necessario che i contorni del nostro disegno non si chiudano, perché per il nostro effetto abbiamo bisogno di un inizio e di una fine
3. Non dovrebbe avere riempimenti
4. La dimensione massima del file è 1000×1000 px, 40kb
5. Ritagliamo i bordi dell'oggetto Oggetto>Tavole da disegno>Adatta ai limiti delle tavole da disegno
6. Salva come SVG (le impostazioni di salvataggio standard vanno bene)

Ad esempio, puoi utilizzare le icone nell'allegato.

4. Converti la nostra immagine in Lazy Line Converter
Basta trascinare e rilasciare la tua icona nella casella sottostante.
Lo spessore, il colore del contorno e la velocità dell'animazione possono essere modificati nel codice stesso che apparirà dopo la conversione!

5. Incollare il codice risultante in main.js
Ora incolla il codice risultante in file vuoto main.js
Opzioni:
strokeWidth — spessore del contorno
strokeColor - colore del contorno
È inoltre possibile modificare la velocità di disegno di ciascun vettore modificando il valore del parametro durata (predefinito 600)

6. Aggiungi alcuni CSS a piacere
Rimuovere il paragrafo da index.html

Ciao mondo! Questo è HTML5 Boilerplate.

E al suo posto inseriamo un blocco in cui avverrà la nostra animazione

quindi aggiungi alcuni CSS al file main.css per un aspetto più gradevole:

Corpo ( sfondo:#F3B71C; ) #icone (posizione: fissa; in alto:50%; sinistra:50%; margine: -300px 0 0 -400px; )

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

PS durante l'esecuzione su una macchina locale, l'inizio dell'animazione potrebbe essere ritardato di alcuni secondi.

Adobe Illustrator e effetti postumi
Importazione e animazione semplice

Ciao. Oggi esaminiamo una semplice animazione in After Effects.

Risorse: Adobe Illustrator CC
Adobe After Effects CC

Iniziamo disegnando in Illustrator.

Disegniamo
1) Disegna un rettangolo giallo come sfondo

Figura 1 - Rettangolo

2) Disegna un cerchio e riempilo con un gradiente
Lavoriamo un po' sul cerchio:
- rimuovi il punto inferiore sul contorno, otteniamo un arco;
- traccia una linea retta, chiudendo la parte inferiore dell'arco, otteniamo un semicerchio

Figura 2 - 1) disegnare un cerchio; 2) gradiente; 3) eliminare il punto

3) Disegna un rettangolo e fai 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 diretta; 2) dritto scuro; 3) triangolo

5) Disegna un gatto con Penna e forme semplici

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

E ora il massimo PRINCIPALE momento
Distribuiamo le immagini in livelli (ciò che verrà animato - su un livello separato) in questo modo:

Figura 5 - tutte le foto (contrassegno rosso livelli importanti)

Tutto, ora risparmiamo.
Vediamo le impostazioni di salvataggio

Figura 6 - Salva

E ora la fase successiva. ChiudereAdobe Illustrator e apri After Effects.

Importa in After Effects
File - Importa - File - seleziona il nostro file salvato Illustratore.
Scegliamo di importare livelli da Illustrator, se inseriamo filmati, otterremo un'immagine con livelli uniti, ma non ne abbiamo bisogno.

Figura 7 - Importa come composizione

Tutto importato.
Ora vediamo cosa abbiamo. Fare doppio clic su composizione , cosa si aprirebbe e vedremmo i livelli (se tutto è stato fatto correttamente, ci saranno diversi livelli). Otteniamo questo, vedi foto

Figura 8 - Composizione aperta

E ora per cosa siamo qui oggi - Animazione.

Animazione dentro effetti postumi
Imposta il punto di rotazione nella parte superiore della freccia usando lo strumento Panoramica dietro ( tasto di scelta rapida- Y). Prendi un punto e spostalo dove vuoi. Di conseguenza, sembrerà così..

Figura 9 - Strumento Panoramica e Livelli

Questo è tutto, ora passiamo ai livelli per l'animazione.
Abbiamo bisogno di un livello Arrow e di un Head_cat.
Iniziamo con la freccia.
Espandi l'elenco, trova e fai clic sull'orologio. Quindi mettiamo il primo punto a zero secondi. In totale, l'animazione durerà 2 secondi.
Quindi, queste sono le impostazioni che devi effettuare (metteremo 3 punti in totale)

Secondo	0	1	2
	+66	- 70	+66

Ecco come apparirà:

Figura 10 - Freccia di rotazione

Ora animiamo la testa del gatto.
Espandi head_cat e trova posizione.
Ci saranno 4 punti.
Cambierà solo l'ultima coordinata senza toccare il resto.

Secondo	0.1	0.17	1.12	2.0
posizione	689.3	729.3	729.3	689.3

Diamo un'occhiata alla foto.

Figura 11 - Posizionare la testa

Quindi, il principio dell'animazione era così. La freccia oscilla da un lato all'altro, non appena si avvicina al gattino, attira la testa su se stesso, indugia un po' in questa posizione, quindi lo riporta al suo posto.

La fase finale

Produzione
Devi creare un prodotto finito dal tuo lavoro.
Vai al menu - Aggiungi alla coda di rendering
Si apre il pannello Rendering e nel Modulo di output (due clic) seleziona il formato di output. Ho preso *.mov

Figura 12 - Rendering

Clicca sul pulsante RENDER e ottieni il risultato (non dimenticare di specificare il percorso).
È tutto.

Oggi abbiamo un insolito tutorial di Adobe Illustrator. Perché questa volta non realizzeremo un'immagine statica, ma una vera animazione. Immagina che si riveli aiuto di Adobe Illustrator può anche disegnare cartoni animati :)

E non abbiamo bisogno di niente per questo. Organizzazione competente dei livelli e dell'esportazione lavoro finale in formato swf, dove ogni livello viene convertito in un fotogramma di animazione. Nel tutorial di oggi disegneremo un'animazione di conto alla rovescia in stile 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 ciò, ho creato due posizioni del fotogramma della pellicola in un documento separato, un cerchio di riferimento, che viene tagliato in settori separati, una trama e un graffio verticale per aggiungere l'effetto dell'antichità, così come tutti i numeri e le iscrizioni.

Quando tutte le parti del nostro cartone animato sono pronte, puoi iniziare a creare l'animazione stessa. Per comodità, è meglio farlo in un nuovo documento. In questo caso, i livelli svolgeranno il ruolo di fotogrammi di animazione. E nel primo livello, devi solo copiare il fotogramma del film. Posizionalo al centro dell'area di lavoro.

Ora crea un secondo livello e copia il fotogramma del film in esso, in cui i fori ai bordi sono realizzati con uno spostamento. Deve anche essere centrato.

Da questi due livelli, puoi già ottenere l'animazione di un film in movimento. Ma in seguito avremo bisogno di molti più livelli. Quindi seleziona i primi due livelli, vai alle opzioni del pannello e fai una copia dei livelli.

In modo simile, dobbiamo accumulare 12 strati con fotogrammi di pellicola che ne definiscono il movimento.

Ora abbiamo un sacco di livelli e sono tutti visibili. Nel senso che gli strati superiori bloccano quelli inferiori, cosa poco comoda per il lavoro. Pertanto, puoi disattivare alcuni livelli facendo clic sull'icona dell'occhio a sinistra del nome del livello. Per attivare o disattivare 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 poter aggiungere una leggera scossa al movimento della pellicola, dobbiamo spostare leggermente i fotogrammi ricevuti in direzioni diverse. Per fare ciò, attiva solo il livello con cui lavorerai questo momento, quindi sposta la cornice di un paio di pixel su entrambi i lati.

Dopo aver esaminato tutti i livelli e aggiunto un piccolo spostamento, puoi iniziare a creare l'animazione del cerchio in movimento. Per fare ciò, copia il cerchio composto da settori dal documento delle parti del fumetto e posizionalo sul primo livello sopra il fotogramma della pellicola.

Se rimuovi la selezione dal cerchio, sembrerà un tutto unico. Questo è esattamente ciò di cui abbiamo bisogno.

Ma poiché è composto da settori separati, è possibile, cambiando il loro colore, creare animazioni molto rapidamente e facilmente. Per fare ciò, copia questo cerchio sul secondo livello e rendi più leggero il primo settore. Ricordi che la pellicola trema durante il movimento, quindi non è necessario mettere il cerchio esattamente al centro dell'inquadratura. Mettilo sull'occhio.

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

Quindi dobbiamo aggiungere texture ai nostri livelli. Attiva il primo livello e copia la trama dal file sorgente con i pezzi di ricambio lì.

Quindi attiva i livelli successivi a turno e copia lì la stessa trama. Per farlo sembrare diverso su ogni fotogramma, basta ruotarlo di 90 gradi. Come avrai intuito, dobbiamo aggiungere texture a tutti e 12 i fotogrammi.

Se sei già piuttosto stanco di copiare, allora posso farti piacere: è rimasto davvero poco. La parte più difficile è finita. Resta da aggiungere graffi verticali e quasi tutto. Per fare ciò, ancora una volta, copia il graffio originale e mettilo in una posizione arbitraria in più livelli. Nel mio caso, i graffi appaiono in soli due strati.

Ora che il ciclo principale con l'animazione del film è pronto, resta da aggiungere i numeri. Dato che stiamo contando da 3 a 1 più la parola Go!!!, abbiamo bisogno di ancora più livelli. Non 12, ma fino a 48. Per fare ciò, devi creare altre tre copie di livelli già pronti con l'animazione del film.

E poi tutto è semplice. Accendi il primo livello e metti lì il numero tre.

Quindi è necessario copiare questa figura nei livelli successivi fino al termine dell'animazione del cerchio. Quando arrivi alla copia successiva dei livelli, dove il cerchio sarà di nuovo completamente riempito, devi inserire il numero due. Allo stesso modo, copia il numero uno nei livelli desiderati. E quando arrivi ai livelli finali per l'etichetta Go!!!, elimina semplicemente il cerchio prima di copiare l'etichetta sul livello desiderato.

Questo è tutto con l'animazione. La cosa principale qui è non confondersi. Puoi dare ai livelli dei nomi convenienti, ma in qualche modo ero troppo pigro :) Eppure, quando hai finito, assicurati di riattivare tutti i livelli facendo clic sull'icona dell'occhio.

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

Si apriranno ulteriori impostazioni. Qui è necessario impostare il Frame Rate. Ho 12 fotogrammi al secondo. La casella di controllo Looping è responsabile del ciclo dell'animazione. Grazie a lei, il video verrà riprodotto in cerchio. E l'opzione Ordine livelli: dal basso verso l'alto esegue il rendering dei livelli dell'illustratore dal basso verso l'alto nel pannello. Questo è esattamente il modo in cui abbiamo costruito la nostra animazione.

Di conseguenza, otteniamo un filmato flash con la nostra animazione.

Ora lo vedi semplice animazione fare in Adobe Illustrator non è così difficile come sembra a prima vista.

Ma per creare video lunghi o applicazioni interattive, è comunque meglio usarlo Adobe Flash o altri editor flash. Ad esempio, ho realizzato questo gatto in un vecchio Macromedia Flash che ho scovato al lavoro.

Inoltre, di recente, HTML5 e CSS3 sono sempre più utilizzati per creare animazioni. Codice dato supportato dai moderni browser e non richiede l'utilizzo di un flash player.

Dacasca romana soprattutto per il blog

Iscriviti alla nostra newsletter per non perderti nessuna novità:

Hai una o due icone che vorresti dare vita con l'animazione. Da dove inizieresti? Diciamo che hai File SVG, Illustrator CC e After Effects CC, ma la soluzione ti sfugge.

In questo articolo, ti mostrerò come animare facilmente un file SVG, inclusa la preparazione del file SVG in Illustrator e l'importazione in After Effects CC. Spiegherò anche come convertirlo in Livelli di forma e aggiungere movimento. E infine, parliamo di esportazione e rendering.

Il risultato finale del lavoro.

Ora scendiamo alla parte più interessante: impara come animare le immagini.

Preparazione del file SVG in Illustrator

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

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

Possiamo separare gli oggetti usando Release to Layers (Sequence) in modo da non perdere tempo prezioso.

Importazione e organizzazione di un file in After Effects CC

Ora sei pronto per importare in After Effects CC. Usiamo la scorciatoia da tastiera Ctrl+I (Windows) o Comando+I (Mac) per caricare la finestra di dialogo importare file, oppure vai a File > Importa > File... Nello stesso posto, seleziona il file Illustrator CC che abbiamo preparato e fai 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.

Di più modo veloce importazione di un file - fare doppio clic sulla posizione della colonna nel pannello del progetto.

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

Prima di metterci al lavoro, dobbiamo convertire tutti questi livelli in strati di forma. Dobbiamo selezionarli tutti con Ctrl+A/Comando+A o utilizzando manualmente Maiusc + sinistro del mouse. Dopodiché, fai clic con il pulsante destro del mouse sul livello e seleziona Crea> 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 elimina i livelli di Illustrator CC in modo che non si intromettano.

Conversione di livelli CC di Illustrator in livelli di forma in After Effects CC

Sebbene non sia necessario, è importante assegnare a ogni livello un nome e/o un colore appropriati. Questo ci consentirà di lavorare in modo più efficiente mentre ci concentriamo sui fotogrammi chiave. Nell'esempio seguente, i colori dell'etichetta corrispondono più o meno ai riempimenti dei rispettivi livelli.

Etichettare i livelli di forma con nomi, colori, etichette e posizioni appropriati è molto pratico.

Utilizzare la scorciatoia da tastiera per configurare le impostazioni Ctrl+K/Comando+K o Composizione > Impostazioni composizione... Dalle Impostazioni di composizione, dobbiamo selezionare Larghezza, Altezza, Frequenza fotogrammi e Durata per Larghezza, Altezza, Frequenza fotogrammi e Durata. Per questo progetto, ho scelto 60 fps per mantenere l'animazione fluida.

A questo punto tutto sembra essere pronto per partire, ma c'è ancora una cosa da fare. Abbiamo bisogno di raggruppare determinati livelli in modo che i loro movimenti siano sincronizzati con il livello principale che possiamo controllare. Questo metodo è chiamato genitorialità.

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

Nel nostro esempio, ho assegnato strati meno significativi (strati figlio) come parabrezza, parti del corpo, legno e corde allo strato del corpo principale (strato padre). Questo mi ha permesso di controllare la posizione e la rotazione dell'intera macchina (escluse le ruote) usando il livello padre.

Creazione animazione

Volevo che l'auto colpisse una roccia e restasse sospesa in aria per un po'. Volevo anche che l'albero si muovesse su e giù e aprisse il tronco. Ho iniziato costruendo la pietra, l'auto e le ruote. Poi è arrivato il momento di superare l'ostacolo più grande: mettere l'azione sull'albero. Una volta fatto, ho avuto modo di lavorare sui piccoli dettagli come il rack e le corde.

Schizzo che descrive l'animazione

Il primo passaggio è stato quello di creare un elemento rock o un livello, ma invece di tornare a 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 tronco era un compito relativamente semplice. L'ho installato sul retro dell'auto e ho creato un punto di ancoraggio nel vertice in basso a sinistra. Usando Pick Whip , l'ho assegnato al livello principale del corpo. Il penultimo passo è stato quello di dare l'effetto di rotazione, che a sua volta ha reso più realistico il momento di rimbalzo dell'auto Bodymovin in combinazione con la libreria mobile Lottie.

PS puoi trovare i miei file Illustrator CC e After Effects CC.

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