Skip to main content

GIF Animations

Lesson 44 from: Adobe Photoshop 101

Ben Willmore

GIF Animations

Lesson 44 from: Adobe Photoshop 101

Ben Willmore

buy this class


Sale Ends Soon!

starting under


Unlock this classplus 2200+ more >

Lesson Info

44. GIF Animations

Next Lesson: Creative Masking


Class Trailer

Day 1


Adobe Bridge Basics


Sorting Images in Adobe Bridge


Processing Images in Adobe Camera Raw Part 1


Processing Images in Adobe Camera Raw Part 2


Image Processing Q&A


Contrast and Color


Adjustment Brush and Auto Mask


Lesson Info

GIF Animations

Now we're going to be talking about creative effects and will end at the very end with some finishing techniques but creative effect so what can we do well first off we can make fun images here I happened a half an example of something we khun dio this is known as a gift animation gif animation it's an animation that'll keep running over and over and over again and you can put it on your website and it will continuously run it doesn't have to be is obvious is this one sometimes I do these in there a little bit more subtle if you look at this guy doing this I could also have him pause for a very long time and then quickly take a little lap of water and then pause for like two minutes before he does it again and that's when it's rather interesting on your website when like the picture of you on your bio page winks for a second and then somebody looks like did I see that move and they stare at it and it doesn't move again until they look over and started reading your bio again and then it...

winks again you know that's everything but I just want to show you a process you can use for this because I've seen ah lot of images and there's actually a word for it I can't think of what the word is but it's that people will take very subtle changes like let's say in this particular case instead of animating this entire image imagine that I kept everything in the image still except for the motion of his body breathing imagine what that would look like a still photograph with one little element just kind of moving or if you had a waterfall and you could actually have water moving in the waterfall so let's take a look I can also do ah here's another one here I had a mono pod and I had my camera on the mono pod and I was just holding it up against an edge of this vehicle I was in the seat in the back and just randomly clicking off photos if you have a cable release in your hand and going click click click click and I put it together but I want to show you a few ideas when it comes to putting anything like that together. Uh so I don't if you remember or not but when we he adjusted images from iceland I had a serious of some horses and here is what I caught a horse doing and right there seems to be a nice one to repeat does that seem like it could go back and forth so I'm going to take those images let's find the first one I kind of find the first let's say right there is where he might start and so I'm going to take this sequence of images from the point when he is at this stage to when he goes over over over on just looking for what he's done okay, well, it looks like we stopped capturing there so I'll have to go to here I'm going to take those images and I'm going to go to the photo shop menu and say load files in the photo shop layers and these images might be high resolution and if so, I don't need him to be that big so I'm gonna scale these down looks like we scared him away try to get a little bit a little ones going away, but I'm first gonna double check that I got the right image is too, but I'll scale this down because for ah use on your website, which is the primary thing I use thes for uh we don't need a big picture, so I'm just gonna trough layers and see if we got a role in there we go, I think I might have gotten the wrong part of the sequence that the little guy's getting up well meanwhile, so she had to do it with ease. It might not be a perfect um it might not be a perfectly smooth thing at the end because I don't know if I got exactly the right images, but I want to show the process anyway eso this thing at the bottom of my screen usually wouldn't be there yet, so I'm gonna close that and let's, just look at the overall process. What it is is I would go to the image size dialog box in first scale the image down it's up to you how big you'd like it to be, but the way I think about things for the internet, I think I mentioned this before is I zoom in, zoom out on my picture until it's the size. I wanted to look on the internet. Then I go to the image size dialog box and I look at the percentage that is showing up in the lower left corner of my picture to see it down here says twelve and a half percent and I set this little pop up menu two percent and I type in twelve and a half click okay and it's now scaling down all my layers so that they would look the size we saw a moment ago on the internet. I can confirm that it's going to be that size now by viewing this image at one hundred percent view and you can get to one hundred percent view by double clicking on the zoom tool that'll get you one hundred percent that's how big things look on the internet. Next I would like to turn this into an animation and in order to accomplish that all you need to do is go to the window menu go down here and choose timeline under the window menu is called timeline and if when I shot these I did not use a tripod so my camera was moving around I probably want to apply the command called otto align layers remember that one so what I would end up doing here is if you go to the select menu there's a choice called all layers that's one method for getting all the layers highlighted and then you can go to the edit menu and say otto a line layers apply that and therefore if the camera was moving during shooting this will compensate for it but just know that after you do auto align layers you usually have to crop a little bit because it when it moves the layers around to align them if they want always fill the entire screen and I can see that here by looking in my layers panel can you see a hint of the checkerboard around the edge of the layers that's because when it repositioned them it might have needed to scale them or anything else to get them to line up so I might grab the crop tool just crop in a bit so that I would get rid of any of the emptiness that is in some of those layers if it was on a tripod though, I wouldn't need to do any of that then I'm going to go into the timeline which is at the bottom of my screen remember I got the timeline to show up by going to the window menu and that's where I found timeline the bottom in the middle of the timeline window there is a button here mind says create frame animation create frame animation there's also a little pop up to the right of it where you can switch between two choices a frame animation or a video timeline so if when you look at this there isn't a button that says create frame animation instead it says create video timeline you could change it but that little papa we need a frame animation so I'm going to click on that button and that's gonna have one frame right here in our animation and all I'm going to do is I want to slide show that shows one layer at a time into very quickly do that all I need to do is go to the side menu on the timeline which means go to the upper right corner of it where this little icon is and click there and there's a choice in there called make frames from layers make frames from layers and all that means is making animation where all it's doing is showing one layer at a time and sell say make frames from layers in there now I have ten frames and if I hit the play button watch what happens he animates birds really fast though the reason why it's really fast it's because underneath each frame is a number in that numbers telling photo shop how much would a delay before it shows the next picture right now it's set to zero so is showing them its fast is it possibly can and that's pretty fast so what I can do is select all the frames right now the last frame is selected if I hold shift and I clicked on the first one I get them all and if I click on any one of those numbers that is below the frames I can choose exactly how long of a delay I would like to put in between frames and you just have to experiment to figure out what looks best but if I said it to point to his long as all the frames were selected at the time I did it it will change them all if I only had one frame selected would only change one and now for hit play you can see how it slowed down quite a bit what I think is interesting is if you then take the very first frame or the very last frame but very first from usually in make the delay excessive like ten seconds or if you choose other you could type in a higher number that way, if this is on my website it's going to stay static for ten whole seconds for does anything. So whoever reviews the website will start getting used to the page and won't be looking at the photo. They'll be looking at something else on the page and then suddenly, ten seconds later, it's going to move and then below that there's a little pop up menu if you can see it down here right now, it says once and that's how many times it should repeat so once would only play this one time and never repeat, which can really mess with people if you have if ten seconds after the picture displayed, you know it does something, and then they expect it's gonna happen again and it never does. They'd have to reload the page for to get teo play again, but otherwise you can go over here and tell it only to repeat so many times, like three times or even forever, and if you choose other, you can type in whatever number you'd like, so I'll choose forever and now when I hit play, you'll find that it's waiting ten seconds not do anything wait ten seconds and after ten seconds, it's suddenly going to ten seconds is really long when you're waiting for do that and now it's gonna wait ten more seconds before it happens again because I told toe loop forever and so we could do things like that it's just a matter of finding images that look interesting to do this I don't know that I picked the best sequence there of the horse but it gives you an idea of how it happens and it looks like I still need to crop the little spit out on the left side uh but we could do that if you want something to look like it's continuous like it doesn't stop ever it just keeps moving and moving and moving usually what you end up doing is you can copy the middle frames that are in here you can paste them at the end and then there's a choice over here see there's copy and paste frames then if you paste them at the end which I'll do copy go to the side paste frames tell to pace the frames after the one that selected meaning after the end and then go back to the side menu there's a choice called reverse frames change the order that way if the horse rolls over to one side he's gonna roll back is going to reverse the the process s o then you can have him going how do we get rid of the ten second delay? Okay, so then he'll go over and come back and over and come back and you know it's you won't notice it as much on this one, but if I open one of the others that have already done uh that's what these guys were doing uh this one is, uh this one hasn't been cropped, but uh actually this one haven't been made hell none. I have to get the finished version this guy fact that he looks like he's continuously moving he has one full motion and then it reverses the frames to get back to the original. And the reason why use skipped the first and last frames when you copy is otherwise if you copied all of the frames, pasted him at the end and reversed you would have two identical frames right next to each other because the very last frame would be there twice and it would make a little pause in it so you skip the the that the in frames, but anyway that's why he can do that continuously, I find that could look interesting with things like waterfalls was something like a waterfall or stream you only need about three frames to get it. Teo look that way. So let's just take maybe three frames here tools photo shop load files into photoshopped players just remember if you're not on a tripod, you will need to select all of the layers and go to edit um my my brain can't see you see auto align owen island it's that it was great outside forgot select all the layers, okay edit otto a line layers and run that if you were not on a tripod so that you make sure they line up afterwards you will need to do some cropping uh I'm not going to do the cropping part and then all you're doing is hitting create frame animation, going to the side menu and that's where I found make frames from layers and right now if I just hit play with no delay, I need to tell it to loop forever. I didn't put the part that makes it reverse, but you get the sense for how you can get that you can also mask those layers so that if I put a mask on the top two layers I could mask out in emotion let's say a bird was flying by or something I could get rid of that part so that the background it only comes the bottom layer, that kind of thing there's all sorts of stuff you can do, but I just want to make sure you have some idea for how to do that now should mention once you have created that if you want to put it on your website, you need to save it in the gif file format gf file format because that is the one that offers animation it's. Not the best file format for photographs and that's. Why you'll find that if you see this kind of thing on the internet, um, often times, it will look a little bit spec. Aly on just won't always look absolutely ideal and that's, because of the file format that was needed to be used.

Class Materials

bonus material with purchase

Course Guide

Ratings and Reviews

a Creativelive Student

Ben, thanks again for this course. I have taken and purchased quite a few of your courses to date. I keep thinking I will only watch to make sure I am on the right track and you always bring more to the table than the last course. Your teaching methods are the best, sorry to all the other instructors from Creative Live, but you are very easy to understand and you speak in layman's terms so we all can understand. I am following your instructions and working along with your files and it is the best! It is hard to keep up with you even when I watch you on one computer and work with the same files on another computer, to do what you are doing...impossible but I gain so much by trying. You provide so much info on each topic, it is amazing. Thanks to Karen for the PDFs, she does a fantastic job and also, for her templates/layout documents. Thanks again and to anyone who thinks this is too much money for all the videos, the exercise files and the instruction PDF, I am sorry to say but you are mistaken.

John Taylor

Like all of the Creative Live courses, excellent training. Ben does a great job of explaining the entry part of Photoshop. A lot of things cleared up in my head and i like his easy pace into this complex program. Thanks Ben.

Dawn Butler

Ben, A note of thanks for a fabulous 3 day tutorial on Photoshop. I am new to CreativeLive site and just happen to stumble across your Photoshop 101 class online, wow I'm I glad I did. I've wanted to learn to navigate Photoshop for sometime but found myself becoming more and more confused and frustrated watching video instruction and reading various articles online. You have simplified the learning process by making the class material clear and concise; after 3 days I came away with a great foundation to build on in the future. Thank you!

Student Work