Animazione dell'interfaccia - corso RUB 31.900. da Uprock, formazione 4 mesi, data 28 novembre 2023.

instagram viewer

TEORIA

introduzione

In questa lezione avrai un'idea di cos'è l'animazione web, quali funzioni svolge nella progettazione dell'interfaccia e in quali casi viene utilizzata. Imparerai quali sono i due tipi di animazioni utilizzati sui siti Web reali. Ottieni suggerimenti chiave su come creare animazioni fluide, semplici e sempre pertinenti. Imparerai quali tecniche è meglio non utilizzare nelle animazioni realistiche e perché. Analizzeremo le azioni di animazione di base e le esamineremo con esempi. Scopriamo quali programmi devono essere installati per la formazione e il lavoro confortevole. Dove e come registrarsi, quale piano tariffario scegliere. Riceverai due utili plugin: AEUX e Motion Tool, che ti consentono di ottimizzare alcuni processi lavorativi chiave in Adobe After Effects e facilita notevolmente il processo di creazione di animazioni e familiarizza con il programma After Effetti.

• Introduzione all'animazione web
• Teoria
• Installazione di programmi
• Interfaccia e configurazione di After Effects

PRATICA

Animazione dell'aspetto

In questa lezione imparerai l'animazione più semplice e popolare: l'animazione dell'aspetto e la proprietà Opacità. Questo tutorial pratico è strutturato in modo tale da ricevere istruzioni dettagliate su come creare un'animazione dell'aspetto passo dopo passo. Parleremo di cos'è il rendering e perché è necessario. Diamo un'occhiata alla funzione Track Matte e alla sua prima proprietà: Alpha Matte (maschera alfa). Di conseguenza, acquisirai le competenze di base per lavorare con le proprietà Opacità, Alpha Matte (maschera alfa) e creare uno scatto con un'animazione dall'aspetto bellissimo.

PRATICA

Scena di apparizione complicata

Diamo un'occhiata a una combinazione composta da due animazioni: aspetto (lo conosci già) e movimento (questo è un nuovo tipo di animazione per te). Su quest'ultimo ci soffermeremo più in dettaglio. Per animare il movimento, utilizzerai il parametro Posizione, che determina la posizione dell'oggetto nella composizione. Acquisirai anche familiarità con l'opzione del livello Punto di ancoraggio e imparerai come usarla correttamente. Alla fine, animerai una ripresa e imparerai come creare animazioni impressionanti da diversi tipi di animazioni.

PRATICA

Lavorare con gli strumenti di movimento

Nella lezione studierai in dettaglio lo script Motion Tools. In pratica, guarda quanto è conveniente questo strumento. In effetti, accelera notevolmente il processo di lavoro. Acquisirai una conoscenza approfondita di cosa sia Velocity Graph, Easing, come funzionano le curve di Bezier in After Effects e come influenzano l'animazione. Infine, imparerai in dettaglio come personalizzare la tua animazione utilizzando Motion Tools, che ottimizzerà notevolmente la tua esperienza di animazione.

• Concetti generali
• Strumenti di movimento v2.0

PRATICA

Animazione zoom (utilizzando la maschera alfa)

Imparerai come mostrare le animazioni delle foto che appaiono. La proprietà chiave che imparerai in questo tutorial è il parametro Scala del livello. Con il suo aiuto puoi modificare la dimensione di un oggetto. Questa animazione è chiamata animazione in scala (utilizzando Alpha Matte). Ridimensioneremo l'Alpha Matte stesso (maschera alfa) e l'immagine al suo interno insieme all'animazione dell'aspetto che hai già studiato. Di conseguenza, imparerai come animare le foto in modo efficace.

PRATICA

Animazione parallasse

Acquisirai una conoscenza approfondita di come applicare uno degli effetti più popolari: la parallasse. Per implementarlo avrai bisogno di 3 elementi di design e della già familiare proprietà Position. Dopo aver creato l'effetto di parallasse, scoprirai come applicare un'animazione inversa per riprodurlo in loop. Infine, imparerai come creare inquadrature che utilizzano l'effetto di parallasse per creare un senso di profondità e dimensione che lasci una forte impressione sugli spettatori.

PRATICA

Scena complessa con applicazione di parallasse, movimento e maschera

In questo tutorial imparerai come creare animazioni complesse che incorporano le animazioni che hai imparato nei capitoli precedenti. sprint, vale a dire: Aspetto - Opacità, Movimento - Posizione, Ridimensionamento - Scala, applicazione di Alpha Matte (maschera alfa) ed Effetto parallasse. Un nuovo tipo di animazione per te sarà l'apparizione del titolo nell'area della maschera. Imparerai come creare scene complesse con transizioni utilizzando tutti questi tipi di animazione, che aiuteranno i tuoi scatti a distinguersi dal resto.

PRATICA

Animazione adattiva

Considereremo il concetto di animazione adattiva. Questa è l'animazione zoom già familiare che utilizzerai per dimostrare le versioni reattive del sito, quando il layout del desktop si trasforma senza problemi in un layout del cellulare. Per crearlo utilizzerai le proprietà apprese in precedenza, come Movimento – Posizione, Ridimensionamento – Scala, Scomparsa/Apparizione – Opacità, Animazione inversa – Strumenti di movimento 2/Clone. Sapere come implementare correttamente l'animazione adattiva ti consentirà di presentare in modo efficace i tuoi progetti.

PRATICA

Animazione di rotazione

Imparerai semplici animazioni: rotazioni e la proprietà dell'oggetto Rotazione, che è responsabile della rotazione di un livello attorno al suo punto di ancoraggio. Esamineremo tre parametri di rotazione: il numero di rivoluzioni, la quantità di cui vogliamo ruotare l'elemento (in gradi), la rotazione in senso orario/antiorario. Dopo aver esaminato passo dopo passo ciascuno dei cicli di animazione ripetuti, alla fine imparerai a lavorare con la proprietà Rotazione e creerai una ripresa con un'animazione di rotazione che attirerà l'attenzione degli spettatori.

PRATICA

Animazione complessa composta da tutte le animazioni di base

Diamo un'occhiata a una combinazione più complessa, che consiste in tutte le animazioni di base con cui hai familiarità. In questa lezione toccheremo l'argomento della creazione dell'effetto di simulare un clic su un'immagine utilizzando l'animazione di ridimensionamento e scomparsa del cerchio (strumento Ellisse). Di conseguenza, imparerai la sequenza di diverse animazioni, permettendoti di creare animazioni più complesse e impressionanti.

PRATICA

Lavorare con le scene

Questa lezione è un ciclo composto da 3 sprint. Si concentra su transizioni di scene alternative. Innanzitutto, daremo uno sguardo più da vicino al concetto di “scena” e discuteremo quali transizioni esistono tra le scene. Imparerai come utilizzare 3 opzioni non standard per cambiare scena: cambio maschera, cambio tenda e cambio diapositiva. Per creare una transizione di "cambio maschera", capirai e imparerai come lavorare con il nuovo parametro Track Matte: Alpha Inverted Matte o Inverted Alpha Mask. E scopri come importare video in una composizione di animazione.

PRATICA

Animazione del cambio di colore

In questo tutorial imparerai come lavorare con l'animazione a colori e la proprietà del livello Colore. Una semplice animazione che può essere utilizzata per dimostrare il passaggio del mouse su pulsanti o collegamenti. Ma esamineremo un'opzione più interessante, ovvero come presentare magnificamente il tuo progetto utilizzando l'animazione che cambia colore.

PRATICA

Animazione del percorso (ritaglio)

Imparerai il nuovo parametro Trim Path, che può essere utilizzato per creare effetti di movimento del percorso molto interessanti o, in altre parole, effetti di ritaglio del percorso. Ad esempio, quando vogliono mostrare un precaricatore, una barra di avanzamento in un lettore video, ecc.

PRATICA

Animazione complessa

In questa lezione lavorerai nuovamente con animazioni complesse, consoliderai le competenze precedentemente acquisite e creerai un'animazione di ripresa con nuovi effetti utilizzando tutto le stesse proprietà di base dell'animazione: aspetto, movimento, maschera, ridimensionamento, transizione tra la scena 1 (cambio maschera), transizione tra la scena 2 (cambio tenda).

PRATICA

Animazione del testo decorativo (glitch)

Questa lezione inizia un altro piccolo ciclo, composto da 3 lezioni sull'animazione del testo decorativo. In questa lezione imparerai come realizzare un effetto straordinario come Glitch: l'effetto di un'immagine "rotta" o di un'interferenza televisiva. Questo effetto nell'animazione sembra piuttosto alla moda e produce un effetto wow. È abbastanza facile da creare

PRATICA

Animazione del testo decorativo (script)

In questa lezione imparerai come creare un'animazione che simula il testo maiuscolo. Questa tecnica viene spesso utilizzata per porre accenti su un sito Web e sembra esteticamente gradevole. Per questa animazione utilizzerai il nuovo strumento Penna. Preparati al duro lavoro e sii paziente. Di conseguenza, otterrai una bellissima animazione che potrai utilizzare per presentare i tuoi progetti.

PRATICA

Animazione di testo creativo

In questa lezione troverai di nuovo l'animazione del testo, ma più creativa e insolita. Il suo effetto interessante prevede una combinazione di diverse animazioni utilizzando due maschere alfa: semplice e inversa. Di conseguenza, creerai uno scatto interessante e potrai utilizzare questo metodo nei tuoi progetti per presentazioni efficaci.

PRATICA

Animazione complessa

In questo tutorial utilizzeremo i tipi di animazioni che già conosci, ma ne utilizzeremo alcune per creare effetti più complessi e non standard. Di conseguenza, otteniamo un'animazione complessa e complessa, composta da tre scene con transizioni, scorrimento e cambi di diapositiva.

PRATICA

Animazione utilizzando Luma Matte

Nelle lezioni precedenti abbiamo discusso i parametri Track Matte e tu hai già una buona idea del principio di funzionamento di Alpha Matte e Alpha Inverted Matte. In questo tutorial esploreremo le seguenti due opzioni Track Matte: Luma Matte e Luma Inverted Matte e impareremo come applicarle ai nostri progetti.

PRATICA

Animazione utilizzando Turbulent Displace

Studiamo l'animazione utilizzando l'effetto di distorsione della foto. Turbulent Displace è uno degli strumenti del parametro Distort. Tecnicamente, si tratta di un leggero spostamento dei pixel che aiuta a creare un effetto onda e viene spesso utilizzato per questo effetto nelle fotografie.

PRATICA

Animazione complessa complessa

L'ultima lezione di formazione, in cui creeremo animazioni complesse complesse, utilizzando quanto appreso in precedenza tipi di animazioni e uno nuovo: il parametro Testo e la sua proprietà "Testo sorgente", che consente di modificare il contenuto del testo strato. Una parte pratica indipendente, in cui inventerai e creerai da zero l'animazione per il tuo scatto, oltre a diverse lezioni video bonus interessanti e utili

PRATICA

Creazione di animazioni da zero

Determinare lo stile, cercare riferimenti, creare una sceneggiatura. Il principio di creare idee per scene e transizioni tra di loro, preparare il codice sorgente, creare l'animazione di 1 scena, pubblicare la ripresa sulle reti.

PRATICA

Gestione e promozione dell'account Dribbble

Gestione e promozione dell'account Dribbble. Animazione per presentazioni e Behance. Utilizzo dell'animazione di After Effects sul sito Web.