Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.