Photoshop Tutorial - How To Create an Animated GIF

This in-depth, to the point tutorial show you how to create a simple animated GIF.

To download the source files or an HD copy of the tutorial head over to
http://www.tutorvid.com

---

Closed Caption:

another push up tutorial from the red
dot com
this tutorial is going to show you how
to create an animated gif like this one
with this little cartoon guy smiling
back and forth
it's a simple animation with only four
frames which is good if you're going to
put something on the web as a guitar or
as a ad or something like that and I'll
just start this over from the beginning
and delete this file
alright so the first thing I'm going to
create a new image and then you create a
hundred and twenty-five it's a white
image which is a typical ad size and
background contents
I'm going to pick as transparent so
what's the see-through jiff
and then i'll give it a name and set to
go and i'm going to zoom in a little bit
ctrl + to zoom in now the animation
window isn't shown by default so go up
to window and click on animation here
initially when you show the animation
window it looks like this which is a
timeline view this is for a little bit
more complicated animations which i'll
be covering in another tutorial for
simple animations with only a few frames
it's best just to go in the frame
animation where each frame is one step
so i'm going to create my little man
with a lip stool and some orange color
and create a circle for his head to hold
down the shift key that makes it
perfectly round and moving to the center
and i'm going to give him some my eyes
that are white
i'm going to quickly duplicate this hold
down the Alt key and drag this layer
over here and then i'm going to create
some googly eyes in there and change
those two black move tool with the V alt
click and drag
so there we have the basic head now i'm
going to create three frames over here
three blank frames and i'm going to
create the mouth on three different
frames
you'll see why in a second so select be
with the brush
d for default colors and that puts black
in the foreground and now i'm going to
brush have a pretty small brush if you
look up here five pixels wide and i'm
just going to create a regular happy
face with a little cheeks there and then
i'm going to create their - I'm just
going to draw over top
if I hide layer one you can see that i
just threw that and then can rate just
on one side and there are 3 i'm going to
create another place another smile with
the only chick on that side
so now i have their three with a smirk
on that side there too with the smirk on
that side and there one happy guy
alright so now we're ready to animate
this guy or one more thing
these two layers of my googly eyes and
to save me some trouble
i'm going to put them in a group here so
click on this little folder that makes
group 1 and then i'm going to control
click on my two eyes and drag those into
the group click and drag and I can see
they're indented a bit in my group back
in throw that down and hide that group
so now when I click on this group with
the move tool
v I can move the eyes around as I like
so getting to animation i'm going to
create four frames and i'm going to
select the first one this is how it's
going to start out looking
I'm gonna turn on the happy face here
move it into place now click on prime
number two
I want to hide this smiley face and put
on a side smile and then clicking on
group 1 i'm going to move the eyes over
to the right and I see from three is
still like it was at the beginning and I
actually want him in the center so
that's right and then frame for I'm
gonna look make it look to the left and
then on group 1
I move the eyes over to the left now on
the bottom here you can see the second
that each frame is set at I want to
change that to be only half a second
you can pick any amount you want or
click other and type in what you want
and then the animation how many times
you want to animated repeated I want
forever so it just goes around and
around looped and now I have this little
guy looking back and forth and if you
also want to make this animation a
little smoother you can click two frames
and then click between these two there's
and that are create a number of frames
in between these two frames that sort of
make it a smoother transition
I'm actually only using opacity so i can
click those two
and if i add five frames these five
frames slowly merge these two layers and
if you're doing an animated gif this is
unnecessary because you want to keep the
file as small as possible so i wouldn't
recommend that i would just do a
straight jump from frame to frame
alright so we have our animation done go
up to file save for web and devices then
up here make sure you have picked a jiff
and if you compression settings here
make sure you have enough colors that
all your colors are showing this one
only has a few colors so i can pick 16
you might have to pick a bit higher
though if your drift is a little
complicated and then down here is the
what we really need to look at which is
the animation settings make sure it's on
forever if you want to loop through
forever and you can preview it if you
want by clicking play and then just
click save and save your image and then
in Windows Explorer you can double click
on it and it will open up in a browser
and then you can see how your image
looks on the net and that's it
to download the animated gif or the tip
file or to download the HD version of
this tutorial head over to to bed . com