Web Motion for Beginners: Final Project

with Tom Green
please wait ...
Web Motion for Beginners: Final Project
Video duration: 0s 31m 44s Beginner


It's time to put the techniques you've learned over the course of the Web Motion for Beginners series into action. In this final installment, Tom Green shows you how to create an animated banner ad with Adobe Illustrator, Photoshop, and Edge Animate. Along the way, he'll explain how to incorporate parallax motion, web fonts, and responsive design principles. Put your skills to the test by following along with these five short movies, and you'll feel like a web motion graduate.

Video Web
Illustrator Photoshop Edge Animate

Project plan and overview

- [Voiceover] Throughout this course, we have explored a number of motion graphics techniques, ranging from simple, here to there motion, to the creation of dept through the use of parallax. In this project we're going to pull together a lot of what you have learned and apply it to the banner ad that you see. And as you can see there's a lot going on here. Skiers zip by, snow is falling, there's a funky font. And of course, there are some trees in the foreground. Though it may look complicated, it really isn't. As I have been consistently pointing out in this course, asset reuse will keep you sane.

For example, the ski hills in the background only require us to draw one hill in Illustrator as you can see here. The other one simply gets flipped. The skiers are really nothing more than one image reused a couple of times. Assembly in Photoshop follows that age old adage of let the software do the work. In this case, the interface is actually assembled in Photoshop and using the new generate feature in Photoshop exported in such a way that the project comes somewhat pre-assembled in Animate.

In Animate, we can quickly add the motion and create a loop for the falling snow. And apply a parallax effect to the snow to provide the illusion of distance. We're also going to use a web font to make the text look a little funky. We are then going to wrap this thing up by making this whole thing responsive so the project can be seen on everything, from the smart phone in your pocket, to the HDTV screen in your house. Sound like fun? Great, let's get started.

please wait ...