Interface-animatie - cursus RUB 31.900. van Uprock, training 4 maanden, datum 28 november 2023.

instagram viewer

THEORIE

Invoering

In deze les krijgt u een idee van wat webanimatie is, welke functies het vervult bij interfaceontwerp en in welke gevallen het wordt gebruikt. Je leert welke twee soorten animaties op echte websites worden gebruikt. Ontvang belangrijke tips over hoe u vloeiende, moeiteloze en altijd relevante animaties kunt maken. Je leert welke technieken je het beste niet kunt gebruiken in realistische animaties en waarom. We zullen de basisanimatieacties analyseren en bekijken met voorbeelden. Laten we eens kijken welke programma's moeten worden geïnstalleerd voor training en comfortabel werken. Waar en hoe inschrijven, welk tariefplan u moet kiezen. U ontvangt twee handige plug-ins: AEUX en Motion Tool, waarmee u enkele belangrijke werkprocessen kunt optimaliseren in Adobe After Effects en vereenvoudig het proces van het maken van animatie aanzienlijk, en maak kennis met het After-programma Effecten.

• Inleiding tot webanimatie
• Theorie
• Programma's installeren
• After Effects-interface en installatie

OEFENING

Uiterlijk animatie

In deze les leer je de meest elementaire en populaire animatie: de weergave-animatie en de eigenschap Opacity. Deze praktische tutorial is zo opgebouwd dat je stap voor stap gedetailleerde instructies krijgt over hoe je een verschijningsanimatie maakt. We zullen praten over wat rendering is en waarom het nodig is. Laten we eens kijken naar de Track Matte-functie en de eerste eigenschap ervan: Alpha Matte (alfamasker). Als gevolg hiervan verkrijgt u de basisvaardigheid van het werken met de eigenschappen Dekking, Alpha Matte (alfamasker) en maakt u een opname met een prachtige animatie.

OEFENING

Gecompliceerde verschijningsscène

Laten we eens kijken naar een combinatie die uit twee animaties bestaat: uiterlijk (je bent er al bekend mee) en beweging (dit is een nieuw type animatie voor je). Op dit laatste zullen we dieper ingaan. Om beweging te animeren, gebruikt u de parameter Positie, die de positie van het object in de compositie bepaalt. Ook maakt u kennis met de laagoptie Ankerpunt en leert u deze correct te gebruiken. Uiteindelijk ga je een shot animeren en leer je hoe je indrukwekkende animaties kunt maken op basis van verschillende soorten animaties.

OEFENING

Werken met bewegingstools

In de les bestudeer je het Motion Tools-script in detail. Kijk in de praktijk hoe handig deze tool is. Sterker nog, het versnelt het werkproces aanzienlijk. Je krijgt een grondig inzicht in wat Velocity Graph is, Easing, hoe Bezier-curven werken in After Effects en hoe ze de animatie beïnvloeden. Ten slotte leert u in detail hoe u uw animatie kunt aanpassen met Motion Tools, waardoor uw animatie-ervaring aanzienlijk wordt geoptimaliseerd.

• Algemene concepten
• Bewegingstools v2.0

OEFENING

Zoomanimatie (met alfamasker)

Je leert hoe je animaties kunt laten zien van verschijnende foto's. De belangrijkste eigenschap die u in deze zelfstudie leert, is de parameter Scale van de laag. Met zijn hulp kunt u de grootte van een object wijzigen. Deze animatie wordt een schaalanimatie genoemd (met behulp van Alpha Matte). We zullen de Alpha Matte zelf (alfamasker) en de afbeelding erin schalen, samen met de uiterlijkanimatie die je al hebt bestudeerd. Hierdoor leer je hoe je foto’s effectief kunt animeren.

OEFENING

Parallax-animatie

U krijgt een grondig inzicht in hoe u een van de meest populaire effecten kunt toepassen: parallax. Om het te implementeren heb je 3 ontwerpelementen en de al bekende Position-eigenschap nodig. Nadat je het parallax-effect hebt gemaakt, zul je ontdekken hoe je een omgekeerde animatie kunt toepassen om deze te laten herhalen. Ten slotte leer je hoe je opnames kunt maken waarbij het parallaxeffect wordt gebruikt om een ​​gevoel van diepte en dimensie te creëren dat een krachtige indruk op de kijkers achterlaat.

OEFENING

Complexe scène met parallax, beweging en maskertoepassing

In deze tutorial leert u hoe u complexe animaties kunt maken waarin de animaties zijn verwerkt die u in eerdere hoofdstukken hebt geleerd. sprints, namelijk: Uiterlijk - Dekking, Beweging - Positie, Schaal - Schaal, toepassing van Alpha Matte (alfamasker) en Effect parallax. Een nieuw type animatie voor u is de weergave van de titel in het maskergebied. Je leert hoe je complexe scènes met overgangen kunt maken met behulp van al deze animatietypen, waardoor je opnamen zich onderscheiden van de rest.

OEFENING

Adaptieve animatie

We zullen kijken naar het concept van adaptieve animatie. Dit is de al bekende zoomanimatie die u gaat gebruiken om responsieve versies van de site te demonstreren, waarbij de desktopindeling soepel verandert in de indeling van een mobiele telefoon. Om het te maken, gebruik je eerder geleerde eigenschappen, zoals Beweging – ​​Positie, Schaal – Schaal, Verdwijning/Uiterlijk – Dekking, Omgekeerde animatie – Bewegingshulpmiddelen 2/Klonen. Als u weet hoe u adaptieve animatie op de juiste manier implementeert, kunt u uw projecten effectief presenteren.

OEFENING

Rotatie animatie

U leert eenvoudige animaties: rotaties en de objecteigenschap Rotatie, die verantwoordelijk is voor het roteren van een laag rond zijn ankerpunt. We zullen kijken naar drie rotatieparameters: het aantal omwentelingen, de hoeveelheid waarmee we het element willen draaien (in graden), rotatie met de klok mee/tegen de klok in. Nadat u stap voor stap alle zich herhalende animatiecycli hebt doorlopen, zult u uiteindelijk de vaardigheid van het werken met de eigenschap Rotatie onder de knie krijgen en een opname maken met een rotatie-animatie die de aandacht van kijkers zal trekken.

OEFENING

Complexe animatie bestaande uit alle basisanimaties

Laten we eens kijken naar een complexere combinatie, die bestaat uit alle basisanimaties waarmee u bekend bent. In deze les zullen we ingaan op het onderwerp van het creëren van het effect van het simuleren van een klik op een afbeelding met behulp van animatie van het schalen en verdwijnen van de cirkel (Ellipse Tool). Hierdoor leer je de volgorde van verschillende animaties, waardoor je complexere, indrukwekkendere animaties kunt maken.

OEFENING

Werken met scènes

Deze les is een cyclus die bestaat uit 3 sprints. Het richt zich op alternatieve scène-overgangen. Eerst zullen we het concept ‘scène’ nader bekijken en bespreken welke overgangen tussen scènes bestaan. Je leert hoe je 3 niet-standaard opties kunt gebruiken voor het wisselen van scènes: masker wisselen, gordijn wisselen en dia wisselen. Om een ​​“maskerwissel”-overgang te creëren, zult u de nieuwe Track Matte-parameter begrijpen en leren werken: Alpha Inverted Matte of Inverted Alpha Mask. En leer hoe u video in een animatiecompositie importeert.

OEFENING

Animatie van kleurverandering

In deze tutorial leert u werken met kleuranimatie en de eigenschap Kleurlaag. Een eenvoudige animatie die kan worden gebruikt om het zweven van knoppen of links te demonstreren. Maar we zullen kijken naar een interessantere optie: hoe u uw project prachtig kunt presenteren met behulp van kleurveranderende animatie.

OEFENING

Padanimatie (bijsnijden)

Je leert de nieuwe Trim Path-parameter, die kan worden gebruikt om hele coole padbewegingseffecten te creëren, of met andere woorden, pad-bijsnijdeffecten. Wanneer ze bijvoorbeeld een preloader, een voortgangsbalk in een videospeler, enz. willen tonen.

OEFENING

Complexe animatie

In deze les ga je opnieuw aan de slag met complexe animaties, consolideer je eerder verworven vaardigheden en maak je met alles een shotanimatie met nieuwe effecten dezelfde basisanimatie-eigenschappen: uiterlijk, beweging, masker, schaling, overgang tussen scène 1 (maskerverandering), overgang tussen scène 2 (verandering gordijn).

OEFENING

Decoratieve tekstanimatie (glitch)

Met deze les begint een nieuwe kleine cyclus, bestaande uit 3 lessen over decoratieve tekstanimatie. In deze les leer je hoe je zo'n buitengewoon effect als Glitch kunt creëren: het effect van een 'kapot' beeld of televisie-interferentie. Dit effect in animatie ziet er behoorlijk modieus uit en produceert een wow-effect. Het is vrij eenvoudig te maken

OEFENING

Decoratieve tekstanimatie (script)

In deze les leert u hoe u een animatie maakt die hoofdlettertekst simuleert. Deze techniek wordt vaak gebruikt om accenten op een website te plaatsen en het ziet er behoorlijk esthetisch uit. Voor deze animatie gebruik je de nieuwe Pen Tool. Wees voorbereid op hard werken en wees geduldig. Het resultaat is dat u een prachtige animatie krijgt die u kunt gebruiken om uw projecten te presenteren.

OEFENING

Creatieve tekstanimatie

In deze les vind je opnieuw tekstanimatie, maar creatiever en ongebruikelijker. Het interessante effect ervan is een combinatie van verschillende animaties met behulp van twee alfamaskers: eenvoudig en omgekeerd. Het resultaat is dat u een cool shot maakt en deze methode in uw projecten kunt gebruiken voor effectieve presentaties.

OEFENING

Complexe animatie

In deze tutorial gebruiken we de soorten animaties waarmee u al bekend bent, maar we zullen een aantal ervan gebruiken om complexere en niet-standaard effecten te creëren. Als resultaat krijgen we een complexe, complexe animatie, die bestaat uit drie scènes met overgangen, scrollen en diawijzigingen.

OEFENING

Animatie met Luma Matte

In eerdere lessen hebben we de Track Matte parameters besproken, en heb je al een goed beeld van de werking van Alpha Matte en Alpha Inverted Matte. In deze zelfstudie verkennen we de volgende twee Track Matte-opties: Luma Matte en Luma Inverted Matte en leren we hoe u deze op onze projecten kunt toepassen.

OEFENING

Animatie met turbulente verplaatsing

Laten we animatie bestuderen met behulp van het fotovervormingseffect. Turbulent Displace is een van de hulpmiddelen van de parameter Distort. Technisch gezien is het een kleine verschuiving van pixels die helpt een golfeffect te creëren, en dit effect wordt vaak gebruikt in foto's.

OEFENING

Complexe complexe animatie

De laatste trainingsles, waarin we complexe complexe animaties zullen maken, met behulp van eerder geleerde soorten animaties en een nieuwe – de Text-parameter en de bijbehorende “Source Text”-eigenschap, waarmee u de inhoud van de tekst kunt wijzigen laag. Een zelfstandig praktijkgedeelte, waarin je helemaal opnieuw animatie voor je opname bedenkt en maakt, evenals verschillende interessante en nuttige bonusvideolessen

OEFENING

Animatie vanaf nul maken

De stijl bepalen, referenties zoeken, een script maken. Het principe van het creëren van ideeën voor scènes en overgangen daartussen, het voorbereiden van de broncode, het maken van animatie van 1 scène, het publiceren van de opname op de netwerken.

OEFENING

Dribbble-accountbeheer en -promotie

Dribbble-accountbeheer en -promotie. Animatie voor presentaties en Behance. Gebruik van animatie van After Effects op de website.