Creating an Animated GIF in Photoshop CC

Geared towards absolute beginners, this video was created for the online WEB-135 - Raster Imaging & Photography class I teach at the Harrisburg Area Community College in Harrisburg, PA, USA. Interested in learning more about Photoshop? Sign up for my class at http://www.hacc.edu and get college credit!

---

Closed Caption:

in today's video we're going to take a
look at how to create an animated gif
let's get cracking the first thing you
need to do is we need to change our
workspace
so let's go find the workspace for
motion
the next thing we need to do is we need
to create a document hit commander
control in and then let's save this as
animated underscore gif
now i'm going to change something here
i'm going to put a lowercase a
now the reason for this is when you
upload your files to a web server you
may have a a different kind of web
server that doesn't like having file
names with uppercase letters or a
sensitive to that
you may also have a different kind of
web server that doesn't like to have a
space anywhere in the name of your files
so that's the reason I wanted to start
this file name with a lowercase a and i
also have an underscore here instead of
putting in a space
it's just to help out that web server
down the road now in order for you to be
able to see this little better on my
screen
I said my with - 400 by 400
you'll also notice that I've got a
resolution here of 72 72 pixels per inch
those of you that are familiar with
working inside of the print shandra are
very familiar with using a 300 pixels
per inch resolution on the web
we have a we tried to do a balance
we need to have a fast upload time and
still maintain a decent quality
so that's why our resolution is set down
to 72
instead of being in 300 we need our
files to go just a little bit faster
than you would with a traditional print
medium
ok once you have all of a completed
click OK
now i have a choice down here in my
timeline
if you click on the button you'll see
you have a create video timeline
you also have create frame animation
timeline make sure that you have chosen
create frame animation the end of any
gift really is a frame-by-frame
animation
now what that means is that you will
have one frame where there's where your
art looks a certain way will create a
new frame and then you will slightly
change the art that's on that in order
to give the appearance of motion
if you have ever seen those
old-fashioned flip books where you have
some cartoons in there and you know you
think about it an enemy the guy that's
doing a walk
sequence inside that flip book flip book
on one page of the flipbook use you'll
see him raise his leg on the second page
you'll see him start to slightly lower
the leg on the third page you'll see him
lower the leg even further so that if
you thought through those flip books
you'll see what appears to be motion
the animated gif is really going to work
the same way
so let's click on the button that says
create frame animation and take a look
at what happens down in the timeline
I have one friend it appears this is
where all of your frames are going to be
stored will have quite a few going
across the bottom here let's go ahead
and create the art for this
the first thing i'm going to do is I'm
just going to create a simple background
I'm going to have a gradient and this is
actually a radial gradient
if you would like to use the same
settings that i have let me show you
what they are
my color is 513 for 16 on the left on
the right
that color is eight five five five to
four
ok
just going to draw my circle gradient
here there
create a new layer for me let's add some
text this is going to be an animated gif
of very simple fall type field
so grab your text tool
the first word is going to be fault the
second word is going to be leaves
let's get these two lined up i'm going
to do a center line and then i'm going
to pull them down to around the center
of the stage here
you always use your arrow keys to align
them a little better
that looks great now it is important
that you have those two those two pieces
of text on separate layers because we're
going to animate them separately a
little bit later in this video
now we're going to create a leaf
animation around the edge of this with
our brush tool so create a new layer
going to call this leaves one
grab your brush tool by hitting the
letter B and i have chosen this
particular brush is a scatter brush
number 95 looks like a leaf
so here we go a new layer where we can
put some more leaves when i call this
leads to looks great
let's do leaves three and then put some
more than their leaves for the same
thing
a little tricky with that scatter brush
is it ok and leaves five
that looks pretty good if you're not
happy with the placement of any of these
leaves you can go ahead and move them
I'm gonna move that first one down just
a little bit off to the side and then
this guy also needs to go a little
someplace different move them down a
little bit when you're happy with your
placement
you can move on to the next portion of
this
I want to have the text do something
special as well down the road
so what i'm gonna do is i'm going to
double-click on fall and let's set up a
few things here
I want to drop shadow and I don't want
to true black here because it's a little
too harsh
I want to go grab this background color
I'm going to change the brightness so
that's more of a brown instead of a
complete true black that will help you
feel a little softer and let's also do
the distance a little bit more here
yeah it works very well and it's due up
the out
keep it with the drop show click ok now
we're going to copy this layer style by
holding down the alt or option key click
and drag it to the layer that you want
to apply to
so now you can see that it's on both by
text
both my text layers here great
try it off then I want you to turn off
everything except for the text
with the fall layer hold down shift and
drag it straight off the top of your
screen there with leaves again
hold down shift and move it directly off
the side when you hold shift it can
strange it constrains it to whichever
access your moving on
for example if I'm constraining on the
x-axis it just make sure that I don't
have any dips up or down
if I can strain it on the y-axis and
make sure that I don't have any have any
shifting to the left or right as i drag
my graphic
now you're ready to animate your first
frame will have just the background
color so I want you to copy this frame
now we're going to fly in our text the
first we're going to start with is fall
so making sure that you still have the
move tool activated
hold down your Shift key click and drag
the word fall onto your screen
duplicate that frame click on the leaves
layer and now let's move that one on
that looks good
now you want to make sure that you have
this really well aligned
that looks great now if i were to play
this animation as it is it would it
would look very smooth and be very fast
so watch this
ok so we have some things appear
let's talk about how to make this
animation is a little smoother so that
will give the illusion of gradually
coming on to our stage
click on frame 1 a button that we want
now is this one it says twins animation
frames
between is it harkens back to the old
days of the animation engine industry
you had somebody that was a key frame or
the key framer drew the very important
poses the person that did the in-between
frames the tweens was the the guy that
made all of the individual drawings from
one Keith one key frame to another key
frame
so you could say that this is our first
keyframe this is our second keyframe
this is our third key frame
these are the hit points that we
eventually want to achieve
so we need to create the in-between
frames betweens click your but you're
going to have five frames added between
the first frame and the second frame and
that will gradually bring in the text
fall
notice what happens down here
this is now my number 2 3 4 5 6 7 7 is
the original second frame
so let's watch this in order now
much better
we want to create an in-between frames
for seven and eight
let's between it click on seven click
the tween frame click OK and now we'll
have a gradual transition from from the
leaves coming in from the left to the
right let's watch this all together
much better now what you're seeing on my
screen is quite choppy when we do our
final output of the gif file it will be
so much smoother and you won't have any
problems seem a nice transition
now let's work on getting those leaves
in create a new duplicated layer
excuse me duplicated frame and turn on
leaves one duplicate the layer again
turn on leaves to duplicate leaves three
hold on just a second i have a problem
let me turn my week's fix this with my
leaves three
that looks better whew glad we saved
that ok
duplicate leaves for duplicate leaves
five
let's watch this all together now
that looks great the final thing that we
need to animate are the special effects
on the lawyers that we on on the text
layers that we've done earlier so
duplicated never frame and this time
turn on your effects
you don't think I'm going to do I'm
going to turn on fall
first I'm going to duplicate that frame
and then i'm going to turn on leaves
again this preview
topics pretty good now say something in
there just doesn't look quite right as
far as the timing is concerned say these
leaves are just coming in a little too
quickly
well I can see from my preview that the
leaves start happening on frame 14 and
they continue through frame
18 I shift clicked
let me do that we want me through that
click on frame 14 hold down shift click
on frame 18 to select all the frames in
between those two
now you'll notice at the bottom of these
frames that there is a second duration
notation down here you click on the
arrow you can change that you can add a
delay a point one point two point five
and etc so let's try adding a delay of .
five seconds for each one of these
frames and see what that does go back
let's preview it do you see how that
slow down the entrance of those leaves
if you don't like it you can always
change that's not a problem or if you
need to change just one particular frame
all you have to do is click on it and
then go in and change the duration as
you see fit
I'm going to leave mine alone okay
save your file I hit ctrl or command ass
I'm gonna say it right to my desktop
I always save the original PSD file when
i'm working on a gift just in case I
have to go back and change something
later
now the last thing that we need to do is
to get our animated gif out so that we
can use it on on the web
to do that go up to file save for web if
you have an older version of photoshop
you may see save for web and devices
this is the same dialog box reeling
and it may take a little time to to load
what you want is gif and I want you to
really pay attention to the on the
preview window here because this is a
gift
it can only handle a certain number of
colors before it starts getting a little
wonky so if you see a lot of banding in
the gradient
you may need to try to up the number of
colors to see if that will help
and sure enough it did remember we you
have a greater number of colors that can
be displayed
you will also have a larger file size so
you're going to have to determine in
your own artwork
what is going to work the best for you
and whatever you have to have displayed
on the web
once you have chosen your your optimized
file size and colors
go ahead and click Save
I'm going to store it in the same spot
there we go
let me minimize photoshop and i'm going
to pull up the animated gif
i'm going to open this right inside of a
web browser to let you guys see what it
looks like
there you go now you'll notice that this
particular animated gif only shows once
it only goes through the frames once if
you happen to need something that
repeats
let me show you how to do that in the
lower left-hand corner of your timeline
there is this little loop selection here
you can do it once
three times forever or you you can
choose your own custom amount of times
to loop
I would encourage you to have it
stop at a certain point rather than
looking for forever if you remember back
to those old old animated gifs one the
most annoying things about them is that
the motion never stopped on the page so
if you simply set the number of loops
- once or maybe even twice you won't
annoy your users
ok guys i hope you enjoyed learning how
to make an animated gif
I'll see you all in the next video
series