How to export animated GIF infographic – Animated Infographic Tutorial [45/48]

How to export animated GIF infographic – Animated Infographic Tutorial [45/48]

Hey YouTube, my name is Dan. And this is a short free extract
of my longer course… called Animated Infographics
and Data Visualization. That course along with… the free exercise files
for this particular video… and a free downloadable cheat sheet
can be found at… Hi there, in this video
we’re going to look at creating this. This is an animated GIF
that can go out via Social Media… and be shared by
Facebook and Instagram. It’s not a video, so it just
plays by itself. We love them. This is the way to do it
to keep the file size nice and small. We’re going to look at
the way to do it. And you don’t want bending
like this, the file size is huge. Let’s go and look at all the tricks
and tips to make a GIF. And to make it super small… where you’re sharing social goodness. First thing we’ll do is open up something
to export as a GIF. Under ’10 Exporting’, let’s open up
this one that says ‘Pie Chart GIF’. Open that up. It’s an After Effects project. So what we’re going to do is
go through the process. We’ll show you the do’s and don’ts
for animated GIFs. The actual physical process
is not that hard. But there’s a few things you
need to take into account… because file size can blow GIFs
out of the water… and there’s things you can do
to minimize that. So, we’re going to
export this one as is. It’s like that little
thing going on here. How long is it going to be? The length is quite important,
5 seconds is quite long for a GIF. 20 seconds is really long. Anything more than that is probably
not going to work. So the shorter it is
the better it is. So that’s one of the things
we need to do. So all I’ve done is, in my Work Area,
I’ve dragged the end of it… because that’s kind of
where it finishes… I’m happy for that to
lift it from there on. So I’m going to ‘Composition’, let’s go
to ‘Add to Adobe Media Encoder’. And in here, all we need to do is
make sure it’s mp4… which is this drop down here, ‘H264’. Leave everything pre-set. What you’ll notice is,
I’ll just show you in here. You don’t have to go in. You’ll notice it is clipped to my
Work Space area automatically. You can see down here,
it’s already clipped… and it’s clipped to my Work Area. If you want the whole thing,
you can switch it there. So that’s the only thing
we need to do. Where are we going to put it? I’m going to put mine on
my ‘Desktop’, in our ‘AFX Files’. This is going to be
‘Pie Chart Full Color’. I’m going to ‘Save’ this one here. And we’re going to do another version,
or get him to render at the same time. So jump back into After Effects… because some of the problems with
this one is that we added a Vignette. You can see at the top here,
I’m going to unlock it. And it’s added this Gradient effect
all the way through. So if I delete that, it’s going to
reduce the colors a lot. Looks like just one or two colors… but there’s actually thousands of colors
that make up this gray blend. So I’m going to get rid
of the Vignette. Try not to use any Gradients. Some of the other things you can do is
get rid of things like Motion Blur… because watch this,
when these things are moving… can you see, it’s actually generating
a whole bunch of other colors… it’s not just that kind of
purple that we’re using. There’s a bunch of mixtures of that in
the background to make this Blur happen. See this major switch here
for Motion Blur? It cuts down the colors to just this,
plus the background… plus a little bit of in between colors,
but not as many as this. So Motion Blur off can save
file size as well. So it’s up to you whether you can live
without having Motion Blur. Animated GIFs, you just
have to, really. The smaller the file size,
the faster it loads. And the better it does
in Social Media. So I’m going to export
this one as well. Let’s go to that ‘Media Encoder’. That’s why I love the
Adobe Media Encoder, you see… we don’t have to– You can render from After Effects,
the option just underneath. You can go to there. And that will stop After Effects
working while it’s rendering… whereas this, you can
queue more up here… and when you’re ready, hit Play and go
back to After Effects and start working. I’m going to save them on
to my Desktop again. And what will I call this one?
I’ll call this one ‘Simple Colors’. Click ‘Save’. And we’re going to hit ‘Play’,
and we’ll just render them both out. The one thing you’ll notice down here,
can you notice, it’s playing through? It’s rendering this one,
and it’s taking a while, why? Because it has to render Motion Blur,
and all these extra colors. Mainly the Motion Blur. So it chugs along doing it,
we’ll speed it up now. We’re back, and I just want to show you… can you see how fast
the second one goes? That’s because there’s no
Motion Blur and no Gradient. So After Effects likes it more as well. So let’s go now and convert
them into a GIF. To do it, the best way
is to use Photoshop. So I’ve got Photoshop open here. This can be a bit stressful
on your machine. You’ll notice I’ve closed down
After Effects and Media Encoder. The less open, the better for this. It depends on how hard core your GIF is. So we’re going to ‘File’, ‘Open’. And on our Desktop, we have ‘AFX Files’. In here there’s the two, so there’s
‘Simple Color’, and the ‘Full Color’. Let’s look at doing
the Full Color one first. First of all, look at the file size,
it’s for the mp4. They’re exactly the same files… but this one has Vignette
and Motion Blur on it… so it’s physically nearly twice the size. But let’s open it in Photoshop,
all we’re going to do is click ‘Open’. And then go to ‘File’, ‘Export’,
and go to this one here. You have to use ‘Save for Web’. If you’re using the new fancy one,
‘Export As’, you’re not allowed to. So ‘Save for Web (Legacy)’. So that took ages to open. If you find yours takes long to open,
don’t worry, it does. So let’s first of all
just export it as is… just to see some comparable sizes. So what we want to do is… stick it on a Preset, let’s start
with the top here, the GIF. 128 colors did it. So at least we know we’re all
on kind of the same page. It’s going to take a little while
to readjust this whole thing. And what we can do, you can have
a maximum of 256 colors in a GIF. That’s why you get that kind of like
weird grainy look from a GIF. The lower you go, the smaller
the file size, the quicker it will play. So 128, in this case, I’m going to go
all the way to the maximum, 256. So this square here is all
the colors that it can use. And let’s just click ‘Save’. Put mine on my ‘Desktop’,
‘After Effects Files’… and let’s click ‘Save’. This can take a little while as well
depending on how big your GIF is. Let’s do the second version,
so ‘File’, ‘Open’, there’s another mp4. And that is the ‘Simple Color’ version. And let’s go to ‘File’, ‘Export’,
‘Save for Web’. Everything with this runs fast,
because everything’s easier. Pick everything… it’s going to use the
same as last time… so I don’t need to change anything. It’s going to wait for it to stop. ?? All right, let’s hit ‘Save’. Same thing, ‘Save’. Kick back, relax. So let’s go and check the file sizes. So on my ‘Desktop’, ‘AFX Files’. Here is my two GIFs, there’s one,
and there’s the other one. And you can see the difference in size. So still quite a simple animation… but without the Motion Blur
and the Vignette… it’s a lot smaller.
So, what is it? So it’s about a third the size. In terms of file sizes… if you get near 2MB,
you’re getting too big. So this one, I can live with this. The only trouble with it,
I guess, is that… it will take longer to load. Say you’re putting up
for Facebook or Instagram… it just won’t load very quickly
because the file size is so big. So the lower the better. I think there are some restrictions
on file size for Instagram. That’s a double check. But they both look good. I’m previewing mine on a Mac
by hitting ‘Space bar’. If you’re on a PC, not sure… maybe right click and
open it up in Internet Explorer. That will be able to preview it for you. But this is good, it’s an animated GIF,
I can share it around. Let’s look at some of the other things
you can do to get the file size down. In here, in Photoshop, I’m going to
close down the Full colored one. Using my Simple colored version,
I’m going to go to ‘File’, ‘Export’. ‘Save for Web’. And what you want to do is
play around with the Image Size. Mine’s at full HD, there’s never a need
for full HD animated GIFs. So I’m going to have to wait for this
thing to stop spinning. And now I’m going to put it down
to a better size. You might also play around
with the Format. We know that Instagram and Facebook
like a more of a square format. So you might design it
in After Effects… because this one here would do
really well as a square one… because there is nothing really
going on in the sides here. So I can adjust that. It’s probably easiest to do it
in After Effects before you come in here. So in here, what size
does it need to be? I don’t know. Have a look at recommended sizes for
your specific Social Media application. But let’s say I want mine to be
500 pixels high. The other thing we need to double check
down the bottom here is looping. Now mine looped once,
that’s by default. If you want yours to keep looping… that’s pretty much how
everyone wants their GIFs… if you tick this one here, it will just
keep playing, and playing, and playing. The other thing we might do is
that we’re using 256 colors… but we just don’t really need it,
because it’s not that big a deal… or not a lot going on. So I get to 128, that generally
does exactly what I needed to. Looks fine, that keeps
the file size down. Once this is finished
we’ll click ‘Save’. I’m going to save it out here. This is going to be my 128 colors,
let’s just see the difference. In here, my ‘Exercise Files’, ‘128’,
you can see it’s a lot smaller. So it’s about half the size,
a little less. And it’s still looking pretty good,
there’s enough colors making it happen. And it now loops. Awesome! So that’s how to make
an animated GIF. Let’s look at things you can’t do. Our little Bar Graph was perfect… but if you use one of
the Exercise Files in here… so I’m going to do this in Photoshop. I’ve made a little live action version. So this, in your Export Files,
see this one called ‘Large GIF.mp4’… so I’ve made this little video. It’s only 1 second long. I just wanted to show you
the difference between simple stuff. Like our lovely Bar Graph which just
have simple colors, even with a Vignette. And then this thing here,
which is live action… which has got millions of colors. Let’s see what happens. In Photoshop, ‘File’, ‘Open’,
let’s find him. He is in my ‘Exercise Files 10’. ‘Large GIF’. First of all, it might not open. It will definitely open here, sorry. It might not open in
‘Export’, ‘Save for Web’. You might be sitting here for
a million years for this thing to load… especially if it’s more than
a couple of seconds long. I’ve done things with
longer stuff, with full action… and my Photoshop just won’t do it. So this is fine. We’re going to do the exact
same settings as we had before. We’ll leave that at ‘HD’. Colors wise, we’ll put it to as many
as we can use. You might not be able to hear it… but my poor little laptop, the fans have
come on, and the machine’s cooking… trying to do this whole stuff.
Let’s hit ‘Save’. I’m going to call it ‘Large GIF’… and stick it in here
in my ‘Exercise Files’. Doubly fast than I expected. Let’s have a little look
at how big it is. ‘Desktop’, ‘After Effects Files’. And in here is my animated GIF. Hey, it’s only 17 whole Megabytes. So our early one,
what did we get it down to? Our smallest one was 0.1MB… and this is up to 17,
and it’s only 1 second. This one here is about 5 seconds long. So there’s just some things
you can’t do. Live action’s not good,
simple colors are great. Now let’s have a little look at one
last thing, two last things before we go. One is that, we went through Photoshop… remember, we did ‘File’, ‘Open’… and we did ‘Export’,
‘Save for Web’ to get our GIF. In a previous version
of Adobe Media Encoder… remember, we used it for After Effects,
we say… ‘Send to Media Encoder’,
it opens up in here, we pick mp4. And then we pass it on
to Photoshop to make. There was actually an option here
that said ‘Export as animated GIF’. Animated GIFs became super lame,
and nobody wanted to do them… because video was cool and new. So they’ve removed it from this. Double check that on your version
of Media Encoder. This was made in 2017. So check that when you got
the new versions… that they haven’t put it back in here. I imagine they will because
it is becoming popular again. So just check, you might
be able to skip that step. I said there were two more things,
that was one of them. The last one is to check out this man. His name is James Curran. I love his– He does animated GIFs, period. So, he has– we’ll have
a look at some of his stuff. The cool thing about his is that
they loop perfectly forever. They’ve got some sort
of like hypnotic… I don’t know what’s about them,
but I can watch them for hours. Maybe not hours, but you can
just look at his… to get an idea of pure animated graphics. And that loop perfectly. There’s just some brilliant loops
that he’s come up with. It’s only a few seconds long,
but you can just keep on going. There’s lots of stuff in here,
so have a quick little look. I love the stuff he did. So go and check out his
for ideas of how… especially how he gets his looping. If you want to actually see
his technique… on YouTube, there is… ‘How to Create GIFs,
Adobe Creative Cloud’. This one here is the 13th of April, 2016. And that’s got him
with an interview, it’s quite long… but it’s really cool.
I found that he’s cool anyway. All right, my friends, that is
the low-down on animated GIFs. Let’s get on to our class project next. Exciting. Hey there, what do you think? You like the video, hit the Like button,
that would be great. Also consider subscribing to my channel. Now this is a free part
of a longer course. You can check that out on… On that site is a free downloadable,
printable PDF cheat sheet… to help you with your
Infographics and Data Visualization. Also, on that site is a bunch
of other courses as well. So go check it out. Bye now.

Only registered users can comment.

  1. Very useful, thank very much! However, I had a problem. When I want to open the mp4 on photoshop, an error appears… something about "DynamicLink Media Server". Can you help me with that?

  2. How does this translate if I want to do this with a longer form "traditional" infographic format with several small animated areas? Do I build all the smaller animations and assemble the whole thing in photoshop on the video timeline, or do I build the whole thing in here as one long page with several animated areas? I imagine that could get pretty unruly fairly quickly.

Leave a Reply

Your email address will not be published. Required fields are marked *