Web Animation Prototyping with After Effects

Video description

Web Animation Prototyping with After Effects

Video description

In this Web Animation Prototyping with After Effects training course, expert author Ron Edelen will teach you about the tools and techniques needed to create web animation prototypes with After Effects. This course is designed for users that already have web design experience.

You will start by learning about the principles of animation, then jump into learning about the role of design in UX animation. From there, Ron will cover from Photoshop to After Effects, animation basics in After Effects, and applying animation principles in After Effects. Finally, this video tutorial features example projects, including animating a mobile bank retailer locator, animating a travel and tourism microsite, and animating a touchscreen installation.

Once you have completed this computer based training course, you will have learned how to create web animation prototypes using After Effects. Working files are included, allowing you to follow along with the author throughout the lessons.

Publisher resources

Download Example Code

Introduction

Introduction And Course Overview 00:03:31

About The Author 00:01:54

Overview Of Web Animation 00:04:22

The Benefits Of After Effects 00:03:05

Animation Fundamentals

Animation As A User Experience 00:03:09

The Principles Of Animation Part - 1 00:05:22

The Principles Of Animation Part - 2 00:03:02

Best Practices For Interactive Animation 00:04:26

Role Of Design In UX Animation

Design For Animation Part - 1 00:01:56

Design For Animation Part - 2 00:04:54

Photoshop To After Effects

Photoshop To After Effects Part - 1 00:02:44

Photoshop To After Effects Part - 2 00:02:36

Photoshop To After Effects Part - 3 00:04:33

Photoshop To After Effects Part - 4 00:04:57

After Effects Overview

The Components Of After Effects 00:03:50

Importing Files Into After Effects 00:03:29

The Power Of Nesting 00:04:35

Animation Basics In After Effects

Animating Position 00:07:58

Hotkeys And Layer Masks 00:04:12

Animating Scale 00:03:33

Animating Anchor Point And Rotation 00:07:34

Applying Animation Principles In After Effects

Easy Ease 00:06:09

Finesse And Timing Part - 1 00:04:31

Finesse And Timing Part - 2 00:05:08

Example Project: Mobile Web Layout

Preview Of Mobile Design Prototype 00:03:37

Designing In After Effects 00:05:27

Advanced Animation - Importing Video 00:04:07

Advanced Animation - Adding Depth Part - 1 00:05:35

Advanced Animation - Adding Depth Part - 2 00:05:53

Example Project: Microsite For Tourist Destination

Overview Of Design 00:06:14

The Spoiler 00:06:50

Clean-Up Photoshop Import 00:05:29

Import Video 00:06:08

Camera And Layer Setup 00:06:49

Layer Depth Adjustments 00:04:31

Step And Repeat 00:05:11

Build-On Animation 00:06:12

Title Reveal Part - 1 00:06:29

Title Reveal Part - 2 00:04:16

Title Reveal Part - 3 00:04:41

Component Animation 00:05:06

Setting Up Paralax 00:07:13

Animating The Scroll 00:06:37

Finalize And Render 00:05:06

Example Project: Motion Sketching A Touch Installation

Prototyping A Touch Installation 00:06:44

Motion Sketching - Exploration And Design 00:04:18

Motion Sketching - Animation Part - 1 00:05:55

Motion Sketching - Animation Part - 2 00:05:44

Motion Sketching - Rendering 00:02:19

Conclusion

Adding After Effects Prototyping To Your Workflow 00:05:17

Helpful Resources 00:04:10

Staying Ahead Of The Next Big Thing 00:04:23

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.