Creating Animated GIF from Layers in Photoshop®


How to Create an Animated GIF in Photoshop®


Lesson Info

Creating Animated GIF from Layers in Photoshop®

What happens if you want to go ahead and have a lot more fun? And you actually want to build your own animated gif? Well, guess what I've done by built an animated gif, yes, so I run this before I'm actually gonna go through here, and, yes, I want to delete the frame, and no, I don't want you to keep asking, so here we go, lead all those frames. It got a bit of a yep, ok, you won't have to do this, it's just that I ran this before, just to make sure everything was good. I'm going to build an animated gif here is, I'm literally going to do frame by frame, because if I'm going to build this myself and I'm doing animation frame animation is exactly that you animate every frame and it's a simple is this I just go into by layers here, and I create every single frame as a layer, nice and easy, okay? And basically what I do is a duplicate the layer before, and then I had something else to it duplicate the layer before and have something else to it. Actually, I do it all backwards. I build the...

entire file like this, so I have just this, and as I dio, I go in, and I actually take things away so I'm actually building the entire thing backwards, okay? Because it's a whole lot easier to take it apart, you know, than trying to build it and make everything work crazy and actually what's cool about this is this is all shape layers, which we're going to show you in the next episode of how you shape players. Ok, so this is all built with paths. This isn't built with technically with pixels turn into pixels here. So what I'm going to do here is I built my entire animation backwards, and then every frame that ideo I basically take something away from that each and every frame as I go through, which of course you wouldn't know until you actually build this you're like, building it backwards actually makes a whole bunch of sense. It does, so I'm going to go in, and I'm going to start at the very top here with me the first image, because this is where I quote unquote started and now I always have to call up my timeline here, and what I'd like to do is I'd like to now put each one of these into the timeline or click and drag, click and drag, click and drag when we go to my timeline cheese grater and I'm going to make a frame from every one of my layers. Hence the frame animation. So I make frame from layers and there it is. It puts it all in there and clearly I see all this stuff. It knew that I started from the last one and went to the first one right there because of course it put everything in backwards and it's like, seriously, yeah, we can drag these frames around in any order that you want to have, which is going to take an awful lot, especially if you have a two hour long movie and you got, like, sixty seven million frames this case. I want to keep this a simple little movie. What I want to do here is I want to reverse the frames. Okay, so I just want them to go the opposite direction. That's all. I'm going to reverse the frames, so the first one literally looks like this is going to sign it all the way over there is my first frame and it begins to build from the start of the first frame here. I'm gonna press play on is going to go through and it builds my entire gear. Ok? And let's see that again and once more. Well, ok, it's a bit fast, I'd like to slow it down a bit so I can go in and I can select all my frames in here shift on click on the first one shift click on the last one so all my frames are selected I've got my timing here that I can simply click on this and I can do a certain delay between each and every frame so there's my frame delay I press on and that slows it down comfortably I'd like to slow it down ever so slightly more so right click on here two tenths of a second and let's see how that looks ok, so I think I like that build rate right there. It gets smaller at the end because my last one, I just made a little bit smaller I was going to do a much more elaborate one where they then merged together in turned and everything and I thought, ok, then we got a way about processing time actually did build them and then get rid of them. I know so I can go ahead and control my loop once three times forever it's basically the last ones that I use, so if I want to loop it forever there, I could go ahead and do that and I can press play and of course loop forever and I just keep building this it doesn't make sense, but ok, so there it is awesome keeps going, going, going, I'm just gonna loop it once and that's basically how I'm going to go in and I'm going to build my animated timeline just like that each and every frame so now I'm ready and I'm going to export this as a gift so again safer web shift option command s and there's my content right there don't really care about the colors I think that's going to be fine, you know it can reduce the number of colors substantially it's not going to really change anything it will make it smaller of course, but I'm already starting with a really small file size anyway so here's two hundred fifty six colors here this sixty two k if I break it down to eight colors it's like forty one k because it's all pretty much the same colors don't really care on this one and there is my loop right there you can loop it once or many times I want to have a press play because then going to go in and spend the time to render this as we go it renders the whole thing and now I'm ready to go so I can press save right there and save the file right there save I don't want the html with this I'm just going to save you know the image only so I just get the enemy to give because they can just drag it on the white way with browser click save was going to take time to render renders pretty quick good on my web browser file open there is my gift right there I open it up and it runs we do a refresh on that well glitch inside there that's interesting head is really weird with that little glitch that wasn't in the file so something's not organ like the way it should yeah, because then we'd have to go in because these are rendering exactly as a later show is the first time it did this but you know as they come out with software every once in a while a little hick up in there but that should have rendered just find it rendered every single one until it got to the hole right there under the whole light anything to do with it? Do you find that if you open it in different browsers sometimes you have could yeah, we could go in and if I actually opened this up in chrome here let me try this and see if it changes it because I use chrome all the time I don't use safari so you say for web on dh flying this out let's you know this works maybe that solved the problem it does solve the problem it was safari that did it there we go then you could just hit refresh and you can do any type of animation that you want no matter what you build, you just build it on layers and you just literally introduced them as you go through word of advice, build everything first, take it away don't try to start building everything in there and build up there it's a whole lot harder to do so start from the end work your way back from the beginning so a couple people want to know how do you make text come in from the side or another effect like that? Anything different? No. So what I'm gonna do is I'm going to go to my last frame right here and say I had another frame actually, what I'm gonna do is I'm gonna copy this last frame here and then with this last frame here copied, then I can go ahead and I'm gonna put some type in here and with that what I can then do is of course, if I was designing this backwards, then I would go ahead and I would take this and they would put it where I want to, and then I would just copy that frame and move it ever so slightly back. But no, I could just move it, move it, move it and then create separate frames every single time, but what I'd want to do is I would have tohave my image here as well on there because when it renders the frame that goes through frame by frame, which means if I don't have all of my artwork on that frame and I render just my type, I'll have to rast arise my type and merge it with that layer so that everything in that frame appears on that frame. Okay, so with this, what I'd have to do is I'd have to rast arise my type right here, and so I'd have to rast arise my type I would have to then go in and they would have to merge these two layers together so that it is on one layer, okay, and then because its frame by frame animation and each layer can be turned into a frame, so because type is on its own layer, it becomes its own separate frame but there's nothing else on there so again, this is why you design from back. So if I go in and I do this right here and emerged these two together, then I could put this on my last frame I get, then duplicate that frame right there. I could take this one and I could take my type right here, like, so do that, and then they could move it over like that so that in each subsequent frame, it then moves over now, remember, I'm designing backwards, which once you start doing it, you'll get it that's how it works no one last night. Oh, yeah, go hear us. Yeah, s o, I have two very quick questions to finish out with it if you don't mind, unless you had something else that you wanted to get to ask the questions, and I'm going to cycle through this and I'm just going to show you one more thing, so please go ahead and ask perfect troy devote a and one of their can we reverse play if need be to help make the loop look more continue us? Yes, absolutely, because what you do is just reverse the frames and then you can just play it, so we're going to set whether we're going worse or not. Yeah, yeah, cool, and then industry me. The gift you created from the video seems quite heavy. Any suggestions to compress it? So you know, you could take dollars out. Yeah, that's exactly how you do it. You take the colors out of there and the less colors that you have, the better off you're going to be. So one more thing that I want to show you here, I just want to open up one of these and what I want to do here is I want to save this. I'm going to show you what it looks like if I were to save something as a gift right here a minute. Choose. So you see you for webb? I'm going to save this image is a gift. I know. I shouldn't say even images a gift. But I want to show you what index color looks like. So I want to say this is a gift right here and I want to go ahead and, um, services gift do that. Say that safer web. Awesome. When I go under here and I opened it, give up. See where is it modified? Right there. And I look at my color mode here, my color mode here, grayscale rgb index color index color is going to be one of those things when you open up a file. We look at this and we actually see a different color, moz. Now we're always going to start with an rgb file when we're in this to begin with because rgb is always the mode that we use for any light emanating device. When I see the index color here, I know that somebody has saved this is a gift because that's, what index colors indexes breaking it down. Into two hundred fifty six of those colors and it's actually indexing it based on that file. So when you see this index color here, I know there's been saved as a gift before, and one of the problems is if I go in and I try to make any, like color adjustments or color corrections here, a lot of the things that they would normally use are now completely blocked out because it's an index color people like, well, it's, totally confusing. I have a color image here, you know? I want to do adjustments, and I can't do it. All we have to do in order to return this back is to go backto rgb color? No, because its index color, we have already stripped all those other colors out of it. Ok, so we go backto rgb color, it will go ahead and basically expand it based on the number of colors here, but we've always already taken out a majority of the colors, so we've limited it from there but that's a very common thing. Somebody goes in and they want to edit something that they've pulled down from the web, and we can't edit it all has to do with index color right there, so that's one of those little goofy things that you find out as you go along

Class Description

GIFs are a lot of fun and you’ll learn how to create one and what they are used for in How to Create an Animated GIF in Photoshop® with Jason Hoppe.

GIFs can be static or animated and are most-commonly used to display images and graphics on websites and mobile devices. In this class, you’ll learn how to create animated GIFs in Photoshop® that are easy to build and is widely supported on all devices.

Software Used: Adobe Photoshop CC 2014.2.2