Learn to create a simple web banner with motion and interactivity.
- [Voiceover] In this project, we're gonna build a banner add for a company that does tours of leaf splendor in Ontario. One of my favorite seasons in Ontario is autumn. The world becomes a riot of color as the trees change from green to their fall colors. In this project, Leaf Tours wants to produce a banner ad promoting their fall tours. The project walks through the creation of the banner ad from concept to final project. Where does this start? Actually, the starting point has nothing to do with a computer.
One of my first tools is my handy notebook. The great advantage to this approach is it is low risk. I can jot down ideas and sketches and anything else. And if it works, great. If it doesn't, turn the page and try another approach. The starting point for this project was something I tell my students: go look out the window. Nature never screws up color. This yielded the concept of using nature's color pallet. This naturally lead to some sort of painting theme and rather than show an image in the classic oil painter's pallet, I decided it would be more interesting if a paintbrush and a blank canvas were used instead.
Once I had the idea in place and the client approved it, I moved on to the next step and produce the wire frames. Now, I use Balsamiq Mockups for this purpose, but any drawing or wireframing application can be used. My intention here was to get an idea of how the motion would happen, and the Post-it notes, arrows, and so on give me a really good idea of what is to happen and when. Once I had the layout figured out, I then laid in the images of the paintbrush, some canvas, and some trees just to see if the idea worked.
Again, this step is relatively low-risk. If something doesn't work, or needs changing, either move it, change it, or even remove it. These are boxes and arrows indicating stuff in motion. There's nothing to get hooked up on. With the boxes and arrows in place and a rather satisfied client on my hands, I can move in to the next phase of the project: asset creation. The tools I plan to use to create the assets are Illustrator and Photoshop, and the assembly tool that I will use is Edge Animate.
So let's get started.