Put 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.
- View Offline
- [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.