4-6 : Animated Web Banners
What is a Web Banner?
You've seen them, they've annoyed you... OR you've found valuable information from them. Why do so many websites have them? (This website included) Because companies PAY the account holder MONEY when you click on them (they call this CPC= Cost Per Click) and it makes sites like this FREE to use, at least that's why our site is free (and we really love it when you click on them, Thank You! and that's the end of my shameless plea for your help supporting www.myPHOTOSHOPsite.com which encourages us to keep writing tutorials).
So, you have a business, or an event, or a product that you want to promote on the web... you can hook up with Google.com or Facebook.com which both offer successful programs. There are and have been many others out there but they don't seem to stick around long and these are the most popular. We use Google, so I will focus this tutorial using their specs.
Let's make an Animated Web Banner...
First we need to know the correct file size and format
- Image ad files must be 50K or smaller.
- Animated ads
- Must have a frame rate no faster than 5 fps, or 200 frames per millisecond
- Can be formatted as either .GIF and Flash files
- Must be submitted in these format sizes:
- 300 x 50 Mobile leaderboard
- 468 x 60 Banner
- 728 x 90 Leaderboard
- 250 x 250 Square
- 200 x 200 Small square
- 336 x 280 Large rectangle
- 300 x 250 Inline rectangle
- 120 x 600 Skyscraper
- 160 x 600 Wide skyscraper
Web banners can be used for advertising or for website headers, etc. so lets make a 728x90 Leaderboard for our company website, Bulldog, Inc.
There are a couple of ways to do this, we could begin by starting a new page in PS (CTRL+N) (Making the width 728 pixels x 90 pixels high. We'd want this to be RGB because this is for the web. And we don't care what the Resolution is because we have already set that when we specified the size in pixels. Nor do we care about the background color or transparency at this point, because we will be working in Layers (2-1).) We would then copy and paste all the parts a pieces from another file into it, so that you can animate it again. Sometimes this is faster, sometimes not.
Or, we could open the logo file that we saved in Tutorial 4-3 and animated it Tutorial 4-4 (Which already has all of our hard work done) and change the size of the canvas... we're going to do that instead of redrawing everything- that would be silly! And one of the reasons that we save everything that we do as a raw PS file.
Soooooo, you didn't save it, you say?
You can download it here...
I FORGOT TO SAVE MY FILE!
With the file open, we will change the size of it. Right now it is 300x300 and we need it to be 90 pixels high... navigate to Image>Image Size... from the Menu Bar. Once that is changed to 90 we need to change the width. Image>Canvas Size... and we will change the overall length to 728, pushing the image to the left.
You should end up with this...
Web Banners are generally flashy
to catch your attention, that's where the animation comes in! We're going to do something easy... after all, this is your first web banner, right? So, we'll use the pant animation that we made in Tutorial 4-4, underline the the Title Text left to right, then we'll drop the Title Text in from the top, slide the Tag Text in from the right, and finish it off with a free throw.
As with the animated GIF we made in Tutorial 4-4 (Actually, all this banner is, is a large Animated GIF) we need to make the pieces and parts before we can start animating anything. I have laid out my project to look like this... You can, of course put whatever you like for the text.
So, you remember how to do this, right?
The quick steps-
Now that we have everything ready- let's make it move!
First things first, open the Animation Window (Window>Animation found in Tutorial 4-4) By default it will open with a few frames already there, we only need 2 because we will add more as we go, so delete all but two. With the first frame selected, turn OFF the Visibility of Layers, basketball, underline, Tag Text, Title Text, Dog pant 02, and Bulldog Image.
Now select the second Frame, and turn OFF the Dog pant 01 and turn ON the Dog Pant 02 layer. If you hit the "Play Button", you will see the dog panting... We'll adjust this later after all the frames have been added
We're going to bring the Underline in now... So, with the second frame still selected, turn that Layer ON. You'll see that it is visible in the second frame but not the first. We want to expand that line from left to right, but you can't adjust the scale of an object in the timeline like MOST ANIMATION PROGRAMS! So we have to do it manually, which means add more layers of the Underline. The more that you add, the smoother the animation. I'm going to add 5 more Layers and 4 more Frames to the animation. So first we need to Scale the line on each layer horizontally (CTRL+T) to the left (So it gets longer from Left to Right). Basically, you divide the length into 5ths, making each layer a little longer than the one before.
(I'm working in the Frame View of the Animation Window) In each of the frames (remember, we're starting the line in the 2nd Frame), you'll turn the first of the Underline layers ON, the others OFF... do this for each consecutive layer until you reveal each line, in order of length.... I set my Duration for each Frame at 0.1 sec. you can adjust this time and see what works best.
We should have 7 Animation Frames now, with the line starting in Frame 2 and ending in Frame 6, we'll leave the last underline image on now until the end of the complete animation.
With the underline done, we'll drop the Title Text in from the top. With Frame 7 selected, turn the Title Text Layer ON and move the text up and off the screen. This is the starting point of the animation. Duplicate the Frame and move the Title Text down to just sitting on the line in your new Frame.
Now select both Frames, 7 & 8 and we will add Tween Frames (That's the little button to the right of the player controls) We'll add 3 Frames to drop the Title Text down quickly. The important button here is Position, this must be checked so that it calculates the image position. And you want All Layers so it leaves the visibility of all the other layers we have on, ON. (if you ever can't see an image in a frame and you think that it should be visible, check the Opacity of that Layer, it MIGHT be set to ZERO) Also, you have two frames selected- you want to make Tweens between those two Frames, make sure that Tween With: Selections is chosen. Click OK and you will find 3 more frames between 7 & 8 with the Title Text moving down the page. Now we have 11 Frames! Add a 12th Frame and we will move that Title Text image up a pixel or two to add weight to it.
That was so much fun, let's do it again! Turn the Tag Text Layer ON and Add another Frame, this will be our 13th Frame. Similar to before, Move the Tag Text to the Right this time and off the screen in Frame 12. In Frame 13, Move it to where you want it to end up (I made mine Justified Left with the Title Text). Select frames 13 & 14 and Click on the Tween Frames button and add 3 more Tweens.
The last thing on our list to add, is the Basketball bouncing in... we'll do that basically the same way, but we'll have more Key Frames because we'll be changing the direction several times. I'll leave that number up to you, but I used 10 Keys, 5 in the up position and 5 in the down. To make it easier to manage all the Key Frames and Tweens, it's best to do them, one motion at a time. Start by selecting the last frame in your animation, which should now be Frame 17, make two copies of it, the last one will be your Final Frame and we won't touch it again.
In Frame 17 we need to move the ball to the Upper Left, off the screen. In Frame 18 we need to Move it to the Right a little and even with the Bottom of the window. Now select both frames, 17 & 18 and give them a Tween of 2.
In Frame 20 we need to Move the ball to the Right a little and even with the Bottom of the window. Duplicate that Frame and Move the ball to the Up and to the Right a little, leave part of it on screen. Now select both frames, 20 & 21 and give them a Tween of 2.
Keep doing the steps above until you've Moved Right across the screen (as seen above), ending with the last Frame that we made when we started moving the ball. That wasn't so hard, was it? If it was... Just drop the ball in like you did with the Title Text and call 'er good!
One last thing... we have this panting Bulldog that is out of breath after the first few frames. We need to breath some life into him by turning ON and OFF the Pant Layers. I'm going to change the Visibility every 2 Frames, from Dog pant 01 to Dog pant 02 (you can Select Multiple Frames at once and change the Visibility of the Selected Layers at the same time). Also, you'll see below that I hold the last frame a little longer than the others to show the full message before starting the animation over.
SO, we are finished, we have a cool Animated Banner that we need to Save (you've been saving all along, right?). Navigate to File>Save For Web & Devices... (2-10) this needs to be saved as a GIF, I Reduced the color from 256 to 64 because it still looks good and less colors means a smaller file size (Remember the "No More Than 50K" requirement?). You can also change the Size, Looping Options, Transparency, etc. from here. You can also have full Animation Controls to make sure that any changes you might have made didn't adversely effect your Anim. If you find that your animation file size is too big in the end, Reduce the Colors and/or Frames of animation (Give the ball 3 bounces instead of 5, etc).
There ya go, you're an Animator! Be proud, they make good money in the right industry. (though you wouldn't be wanting to do it in PS) This is just one way to make an Animated Banner and works great for simple things. If you want to push the envelope, with more sophisticated movement, you'll want to start working with Flash or in Adobe After Effects, just to name a couple of options.
Don't really want to do that again? Try this site out! http://www.puresilvabannermaker.com/
Learn more about the history of Web Banners and why they came to be at http://en.wikipedia.org/wiki/Web_banner