How to Animate A Web Gif Banner - Adobe Photoshop CS5

Uploaded by richmediadp on 12.11.2010

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
Here you have a
predetermined websites banner
all the layers that
go into
the banner and
right now everything is turned off
but if I
will first check the
original size you'll notice that it's 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.
Here we have the
gold standard with and without the
gold flash on it
and it's important in the animation.
Plus we have those items that we want to turn on
for the first frame.
Next ,thing I'm going to do
is make sure everything is in there
and uh... we have the
logo, 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
Now, this one
is the same exact
frame that we chose to duplicate
but the
frame reflects exactly what we want on it.
We're going to make those changes over here on the
layers 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.
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
and then we go ahead and do a tween
that's a tween
Now that tells us what
how many frames we want in there and we say eight and so go ahead
So, as you can see created in between or in between
and the first and last one was the original. And the in between ones are the
ones that are going to make up
the transition.
So, here we are going to
change the timing
of the in-between frames because we want it to go a little bit faster than
five seconds. So, I am
making it into a two
and uh... checking to see if it's going to work okay
So, we're going to try it one time
try the animation and it works.
So, now we can go on with the rest of that animation.
What I want to do is make sure that
is working properly.
But, now we're going to make a
duplicate, select both
turn off those things that you don't want the duplicate to have
so that we could do the tween in between.
Now I'm going to make a mistake
for you so that you could see how easily those things can be changed even though
you make a mistake.
So, I'm turning all those things on as you could see
Now I'm going to select both of them
do my tween
everything is okay there and so there's my tween.
But it's going to select
the tween as the same amount of time in between so
I'm going to select them and change the time
back to two seconds in between.
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 I can show you
how easily it could be changed.
So, let's go ahead and try the
animation and
see how it works
Oh, I see something
and it's the Trans Max bottle
It didn't change.
What did I do wrong?
So, I'm going back here and I say oh didn't work so I'm going to
throw them all away. There's the trash can right there
So, I'm going to go ahead and
duplicate again
Go back and make correct change
by deselecting the Trans Max
and put it in my
Bioforte images.
Now ,that... that seems to work okay
so go ahead and tween
And we have to change the
the amount of time on these inner ones
so we go ahead and change it to
Yeah, that's it
and then we'll try it out
Okay, that works good! That's exactly what we want
but then I noticed 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 and 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
for each individual frame.
Okay, now that I've had
I've got everything
that I want
out of those frames
I can go ahead and try it again
And now you see it, it glows
and it goes back off
then 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
we'll go ahead and
save it.
Go to web and
save as web and you'll notice that it's already has the gif
there so you don't need to change that everything else stays the same two
hundred fifty six
because if you change the two hundred and fifty six to anything else
affect how it will
look. So, you can actually play around with it
and see if you don't
lose anything by
reducing the number of colors.
Now, here are
here is the button that you choose
to select
the flash.
So, there you go
how to make an animation
and uh... 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
and I thank you.
Have a great day!