Web Motion for Beginners: Final Project
Video: Project plan and overviewPut your web motion skills to the test in this final project of the series, which uses Adobe Illustrator, Photoshop, and Edge Animate to create an animated banner ad.
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.
Project plan and overview
Throughout this course, we have explored a number of motion graphics techniques ranging from simple, here to their motion to the creation of depth 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 left the software to the work, in this case the interface is actually assembled in Photoshop and using the new generate feature of Photoshop, exported in such a way that the project comes somewhat preassembled 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 webfont 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 HD TV screen in your house. Sound like fun? Great, let's get started.
There are currently no FAQs about Web Motion for Beginners: Final Project.