Adobe Photoshop CS5:How to Animate a Gif Banner

A simple interactive banner ad can be made with a gif animation.  I’ve included my video tutorial  that covers how to animate a gif banner ad and the full transcript is provided below.

TRANSCRIPT:

Hi, this is Richard from Rich Media Design Productions and I’m going to be showing you how to animate a gif banner using Photoshop CS5.

Now Photoshop Cs5 isn’t the only version that has animation so if you have CS2 you should be able to find the same animation features as in CS5.

Here you have a pre-determined website banner and all the layers that go into the banner.

And right now, everything is turned off.

But if I first check, the original size you’ll notice that its a pretty good size.

I actually like working in the large size and high resolution because it gives me better resolution to work with.

Now, I’m going to turn on all the items that are involved in this animation or this web banner. Then we’ll get started with the animation.

[Pause] [Music playing]

Here we have the words “gold standard” with and without the gold flash on it. And its very important in the animation.

01:26

Plus we have those items that we want to turn on for the first frame.

The next thing I’m going to do is make sure that everything that needs to  be in there is in there and that we have the logo and the bottle and then we can go ahead and do the animation.Turn on the animation and we can see the animation bar with the first frame there.

Now this frame will reflect exactly what you have on the banner.So, we’ll go ahead and duplicate it because that’s where the changes are going to be made.Now this one is the same exact frame that we chose to duplicate, but since the frame reflects exactly what we want on it.

We’re going to make those changes over here on the layer side so that we could make a change in the animation.

So here we have now, the animation, or the frame for the animation with the things that we want on it.

02:39

The next thing we want to do, is select both of them and then make sure that we have everything that we want on there.Then go ahead and do a selection. Then we go ahead and do a tween.  That’s a tween.

Now that tells us how many frames we want in there.  And we say 8, and we go ahead, And so, as you can see it created an in between, or in between frames and the first and last one was the original and the in betweens are the ones that are going to make up the transition.

03:27

So, here we’re going to change the timing of the in between frames ‘cuase we want it to go a little bit faster than 5 seconds. We’re making it 2 seconds and we’re checking to see if it is going to work okay.  We’re going to try it one time. Try the animation, and it works.

So now, we can go on with the rest of the animation.

04:00

What I want to do is make sure that everything is working properly.  But now we’re going to make a duplicate. Select both of them.  Turn off those things that we don’t want the duplicate to have.

So that we can do the ‘tween in between.Now I’m going to purposefully create a mistake so that you can see how easily mistakes can be changed even though you make a mistake.  So, I am turning all those things on as you can see.  Now I’m going to select both of them, do my tween. Everything is okay there, do my tween.  But its going to select the tween as the same amount of time in the tween. So I am going to select them and change the time back to 2 seconds in between.

5:02

Now, I’ll try to see how this thing works by going to the beginning, going back to the end But of course, I said I made a mistake on purpose so that I can show you how easily it can be changed.  So let’s go ahead and try the animation and see how it works.

Oh, I see something and it’s the Transmax bottle, it didn’t change…What did I do wrong?

So, I am going back here and I say, Oh it didn’t work so I am going to throw them all away. There’s a trash can right there.  So I am going to go ahead and duplicate again… 05:59

Go back and make the correct change by deselecting the Transmax and putting in my Bioforte images.  Now, that seems to work okay. So go ahead and tween and we have to change the amount of time on these inner ones. So we go ahead and change it to 2 seconds. Yes, that’s it.  And then, we’ll try it out.

[Pause] [ Music playing] [Animation running]

Okay, that works good! That’s exactly what we want.

06:54

But then I notice that, the “gold standard” didn’t change because I didn’t do what I needed to do to make it go in and out like a slow flash.  So I go in to each one of the frames and deselect it because like I said what you’re seeing is directly activated or deactivated by your layers for each individual frame.

07:25

Okay, now that I have everything that I want out of those frames, I can go ahead and try it again. And now you see it glows and it goes back off and it should glow again.  So let’s try forever over here…This is so that it’ll either loop forever or stop after three or any number of times you want it to go.  And that seems to work pretty good!  [Pause: Music and animation running]

08:12

Now, we’ll go ahead and save it. Go to web, save as web and you’ll notice that it already has the gif there so you don’t need to change that.

08:27

Everything else stays the same 256, because if you change the 256 to anything else you’ll affect how it will look.  You can actually play around with it and see if you don’t lose anything by reducing the number of colors.

8:44

Now here’s the button that you choose, to select the flash.

8:52

So there you go…how to make an animation. And, I hope you enjoyed this little lesson and come back to me soon and I’ll show you how to work with the flash animation at a later time.

9:07

And I thank you,  Have a great day!

About richmediadp

I'm a freelance graphic designer working out of Orange County, CA - USA. I work with small and mid sized companies to develop creative solutions for their design problems from print collateral to online graphics.

Posted on December 13, 2010, in Interactive Design, Video Tutorials and tagged , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: