Join Von Glitschka for an in-depth discussion in this video Creating an animated GIF, part of Drawing Vector Graphics Laboratory.
- [Teacher] Welcome to Drawing Vector Graphics Laboratory. You'd think in an age of high-definition video and displays that the venerable animated GIF would have already been relegated obsolete, but this simple graphic format keeps chugging along, so in this movie, I want to showcase how to create simple animated GIFs using Illustrator and Photoshop, together. Not only that, the specific project that is going to be the key focus in this movie is one that I created a set of stickers for iOS on the iPhone for the Message app.
Now, those are technically animated GIFs, or actually animated PNGs, but that's using C++ coding language in order to showcase those images, but the same exact principle applies, so you'll be able to actually learn both if you ever want to develop your own sticker set, for what it's worth. So, where did it all start? It started with drawing. This is one of those stickers for the set. The set's called Boneheads, for obvious reasons, because they're all skulls and this guy is the laughing one, so I drew everything out and then, of course, I built my base art off of that.
Now, one thing that I did, as I was creating this, I knew I was going to have some of these that need to be animated, so I built it in such a way that it would be easier to isolate elements and move them around, so I didn't have to recreate the wheel every time. So, if I turn on the black-and-white art work here, you know, you can see how, on this, I have the bottom part of the jaw, the jawbone, and then the teeth. They're all separated so that this could be animated and moved down, and I just have to adjust the top part to get that, so that's really important to keep that in mind, is, as you build, don't fuse everything together.
Give yourself some flexibility to animate things and easily compose things to give the illusion of animation. When I say animation, I mean, animation can be extremely complex, and this is going to be about as simple as you can get when it comes to, I'm doing air quotes right now, animated, as you're going to see. So, the next part would be to draw out the shading. So this, when I print out all my skulls in black-and-white form, and I just kind of work out how am I going to handle the shading, and it's easier to think through this manually in a drawn state with just a simple pencil and a black-and-white printout, and then I look at that, and then I reference it as I'm creating my vector artwork.
That way, I'm not guessing; I know exactly what's going to work pretty well if I figure it out in a drawn form first. So that leads to my colored artwork here, and in this case, this is the black and white, and now, to compose the color, this is when I'll go to eye-drop tool. I want the outline; I don't want it to be stark black, so this is where everything black is going to be colorized this kind of dark brown color like this.
I don't want this to be stark white, either, for the base of the skull, and I want that itself to be kind of a skully color; I don't know if that's the right term, but that's what we'll call it, the skully color; and then, we'll color those as well, and then on all the shading, it'll be a nice, darker hue of that same base color for the skull to create the shading, and the teeth, again, I don't want those to be stark white either, and so, these are just off-white, so we'll color those, and then the shading is a darker hue of that off-white to match, and so that's how I will end up colorizing these skulls.
Now, the second frame in this animation is the laughing one, and so we have the first frame, I should say, in the animation of the laughing one, is this, and I have type here, and the second frame is this. So you can see, that's all this animation is. It's just going to be going back and forth between these two images, and you get that illusion of movement tweening between the closed and the open, when actually it's just two frames, but it's your eye kind of creates that illusion of movement, and so that's all we've done here, and so, on this laughing one here, I'm going to create what I'm just calling bounding boxes like this, and actually, it doesn't matter what color they are, but just for the sake of it, we'll color it brown, and then, I'm just going to go command + C, command + V, and then we'll go ahead and align it with the bottom-right corner.
So, what I've done is I've established the bounds of this artwork, and I'm going to select all, command + A, and with this, I'm just going to go copy, and this is going to copy it to my clipboard. Then, I'm going to switch over to Photoshop and talk through some other elements to this project and how to pull off the animated GIF. So, let's go ahead and copy it, command + C, and now we're going to switch to Photoshop. Now, we're inside Photoshop, and I have my document set up to the exact same size to match the document I have in Illustrator.
So now, all I'm going to do is I'm going to go ahead and paste the artwork that I cut to the clipboard, and we'll do that now, command + V, and then it'll ask you, do you want to paste it as a smart object? In this case, we don't need a smart object. It's all going to be pixel-based, so we're going to just keep it a pixel-based image, so we'll select pixels, we'll click OK, and you can see how it places the artwork in. Notice that the width is 100 and the height is 100, and because of the bounding boxes, it insures it's going to be in-register, so we'll go ahead and place it and commit to it, and the first thing I'm going to do is, I'm just going to drag these areas where I have the bounding box, and I'm just going to delete 'em 'cause we don't need 'em, now that it's in place, and like in Illustrator, this is the first frame, and we'll go ahead and name this, Laugh1, and this is the second frame, and right now, there's transparency on the background, and the reason why that is, is because when you're developing UIGraphics for iOS specifically on the iPhone, it uses PNG images, which are transparent even on the edge, unlike a GIF.
I'm going to show you what I mean by that in just a second. So, what we're going to do now is, now that we have both of these pieces of artwork within Photoshop, we can go ahead and animate it. Now, the whole reason I did that bounding box, though, was to keep the skull in-register with the other art, so right now, the only thing moving is going to be the mouth. If I wouldn't have used those bounding box, let's go back to illustrator and I'll show you really quickly why I use those and what happens if you don't use them.
So, we're going to switch back to Illustrator. We're back in the Illustrator now, and instead of going command + A and selecting everything, we're only going to select just the skull artwork and we're going to copy it, command + C, and now, we're going to go back to Photoshop and I'll show you why it's important to use these bounding boxes. Okay, now we're back in Photoshop, and you can see this is the previous one we placed with the bounding boxes that we then deleted.
So now, I'm going to go ahead and I'm going to place the new image without the bounding boxes, so we'll command + V and we'll paste it, pixels once again. We'll go OK, like this, and you can notice one thing it does is, right now, it's kind of saying, well, the width of this isn't 100%. So we'll go ahead and we'll adjust that and we'll go ahead and place it like this, and now when we turn on our other artwork, you can see it's not in register anymore.
That's because it's orienting it as its own image within the confines of this document. It's centered within the document, but it's not registered with the previous art. So that's why I use the bounding box. I just wanted to point that out. It's a good habit to get into. So, we're going to go ahead and delete that layer, and we'll go ahead and focus on our artwork now, and what we want to do now is we want to go ahead and build a simple animation, and that animation is going to utilize the timeline, and if you want to bring up the timeline, it's going to be right here, under Window in the navigation, and it'll bring this up, and right now, it has our first layer selected, which is Laugh1, and under this little preview image in the timeline, you can select how long do you want this to display on screen, and right now, I have .15 of a second.
That's like hardly any time whatsoever, and the duration of how long do you want this animation to run, we want it to run forever. You can do it three times, once, or you can set it to be whatever you want. In this case, it's a continuous-looping animation. So that's frame one. We're going to add a second frame, and on this one, we'll turn off our layer and on the layer of the new art. So now we have the same timeline for each. That's important unless you want it to pause, and you can experiment with that, see what you want.
In this case, I want it to be exact. You have this, and then it will show this, then it'll go back to this, then it'll show this. So if we go ahead and we play, you can see what you end up with showing on-screen of it animating. You can see, all it's doing is just playing each of those frames, back and forth, back and forth, back and forth, and it gives you the illusion of animation, and this is pretty low-grade animation, but this is how it was programmed using transparent PNGs on the iPhone. Now, the whole reason I bring up the PNG thing is because the key difference in, and we're going to look at PNG very quickly, is right now, if I turn off this background, it's a transparent background this image is on, and if I zoom in on PNG, you can see that all the pixels on the edge here are transparent, and if I go turn off the background, it's transparent, and that's the advantage of using PNG in my opinion.
It's a really nice format that works really well, and if we go ahead and turn on this layer, which is the GIF format, interior, like if you look at the nose, the eyes, the inner part of the tongue, and you compare it with the PNG, you can't really see any difference whatsoever, but the main difference is on the edge. If we look at the edge, there is no transparency of pixels, no alpha channels, that is, on the transparency on a GIF image.
It's a hard-shape image, meaning a hard edge, and if you have elegant curves, you're never going to get that nice smooth curve. You're going to get that stair-stepping because of this limitation of the GIF format, and this is because GIF was developed back in the 1990s, when you had dial-up modems, and it allowed for smaller file sizes that could be displayed within the framework of Web 1.0 and etc., and in this case, if I turn off the background, it doesn't look quite as bad, but, once again, it's never going to be on a completely transparent background; it's going to be on a colored background, in which case you're going to see the edge.
If the background is white, then it's going to be forgiving and you're not going to see it, in which case it'll be perfectly fine, but you're going to run into problems on a background that's going to be colored like that. So, that's the main difference between the two formats, so if you're creating an animated GIF, you're going to want to colorize the background. You want to keep that in mind as you're moving forward. Now, let's take a look at another one. Here's another one of the skulls, and instead of two frames, this one has four, and instead of .15 seconds, this is even quicker; it's a .05 of a second, and it has four frames.
Now, each of these frames are just moving the eyes to give this kind of jittery effect, so if turn play on this, once again, it's forever, so it's looping. You end up getting this effect, where it's just kind of, his eyes are bouncing back and forth. So, a lot of fun things you can do with animated GIFs, so I encourage you to check that out and try it yourself. Now, another way you can handle using vector artwork with an animated GIF format, is, you saw me bring in my original skull as pixel art, but you can bring it in as Smart Object.
So here is a little looping walking animated GIF of a little character here, and if I turn this on and play it, you can see he's walking, but there's something wrong with it. Well, you can see that the in-frame has the wrong color, and actually the wrong pose, integrated into that frame, and if you go over to my layers, you can see all of these are smart objects that I've placed into this Photoshop document, and these are all vector artwork, so what I'm going to do is, this is the frame we're having a problem with, as you see here.
It's not the right color background, and the pose of his legs is the wrong pose, so we want to go ahead and fix that, and all we have to do is double-click on the smart object here in this layer. We'll do that, and then it immediately brings us to Illustrator, and it's going to ask you this. It's okay, just go ahead and click OK, and it's going to open up our artwork, and you can see all the layers that are in our PSD file are actually within our Illustrator file, and this is how I brought each of the frames in.
I just brought the same source file in, deleted the content I didn't need, retained the content I do need, and in this case, on the background here, I need to select this background, and we need to change this color, and I believe it's this color right here, and then, I actually had some textures I was playing with, but it looked kind of weird when the texture just stayed static, but he was walking, so I decided not to use that. I had a drop shadow, decided not to use that, too.
So what we can do is, we can delete all of these layers except the layer we want, so we'll go ahead and delete those, and this is the layer we want here, and now we can save it, command + S, save the file, and we're going to switch back to Photoshop, and we're back in Photoshop, and you can see it's automatically updated the art. Now, I just noticed that on this layer, I have the wrong color background still, so we're going to have to go back here and change it again, so we'll just double-click the smart object, brings us back into Illustrator.
We can select this layer now, and I think it was this color. I think that's correct. So we'll go command + S, save it, and we'll switch back to Photoshop, and now it's the correct animation, so if I play this now, it'll loop the way it should with this character walking. So you can use smart objects in combination with Photoshop to create an animated GIF like this, and that way, it makes the flexibility, editing and adding content, a whole lot easier, and it's all embedded within one file.
So that's kind of cool, that's kind of a fun way to do. Now, an animated GIF can be anything. Here's one; I did this a long time ago, and I used to call these doodle-movies, because I'd take a doodle and then I'd animate it as an animated GIF, and this one, it just collages with textures and funky little stock images that I find of old diagrams and mechanicals, and I don't know what it means; I'm just kind of playing around, but that's the kind of exploration you can do with an animated GIF, so creating animated GIFs and graphics like this isn't Disney-level animation, of course, but it's still a whole lot of fun regardless, and I hope at some point, other formats will allow for this type of self-contained animation, specifically a PNG.
It'd be cool if they came out with the ability to make an animated PNG. I think it would be universally adopted overnight if they did, so time will tell. So, create some cool art of your own in Illustrator, then head on over to the timeline pallet in Photoshop, and breathe some life into your design, into your artwork. I think you'll enjoy the process. Thank you for watching DVG Lab, and until next time, remember, never stop drawing.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.