Creating animated GIFs from Photoshop - Photoshop Tutorial

- [Presenter] In this movie we're going to make an animated GIF, for a sort of a progress icon, with this pasted graphic from Illustrator here. The journey for that actually begins in the Window menu, and down with the timeline, which will open like so. So, what I'm going to do here, is create a frame animation. If it says 'create video timeline,' just use the small disclosure arrow there to choose frame animation, and click on that like so. And your first frame is generated. Now, I'm gonna turn off the background layer, so this will have some transparency, so it can be placed on top of anything. And then what I'm going to do is rename this layer to 'zero,' like so. I'm then going to duplicate it five times, right? So, hold down command on the Mac, control on the PC, and then tap j, once, twice, three, four times, like so. And, just double click that, and change that to 30, change the second one to 60, and change the third one to 90, and actually delete the fourth layer, because I made a mistake, but practice is a good thing. So, target the layer 30 and call up free transform, command t, control t, like so, and up in the control strip or options bar at the top change the angle field to 30, and hit the tick just there. For 60, highlight that layer, command t, change the angle field there to 60, like so, and apply that transform. Tap on the layer for 90, command t, change that, I bet you can guess, actually, without any intervention from me, what to type in that field but just in case you can't, the answer is 90, and apply that. Perfect, we've got everything the way we want it. So, hide the three layers 30, 60, and 90, and then down in the timeline, click this icon to add a new frame. Turn off layer zero, and turn on layer 30. Add another new frame, turn off layer 30 and turn on layer 60. Add one final frame, turn off layer 60, and I bet you're way ahead of me, and you've turned on layer 90, perfect. Over on the left hand side here, it may say 'forever,' or it may say 'once' or it may say 'three times.' I'm gonna choose this to forever, but what it does essentially is tell the file how many times to repeat the animation. If it's once, it will run one time, three, three times, forever, it will just keep going and going and going and going, and that's what I want here. Now to test our animation out, hit play at the bottom there, at the little transport control, see, posh words there, click on that, and there you go. Now I know it's going really fast, and I'm gonna stop that, 'cause it's making me feel funny. I'm going to click on the first frame, and shift click on the last frame, and you'll see there's some timings underneath there, now zero seconds is not great for a transition time for this so I'm gonna click any one of those and change that to, let's try .2, .5, doesn't sound like a lot, half a second, but in terms of media, moving media, it is quite a while. Let's play that out again. You see, I think that's a much more successful effort. Now, just before we actually export this, I ought to point out that you have got this small tweening icon here. If you've got two frames in which an action is quite different, same object, action is quite different, you can just do the beginning and end of the action and try clicking that, and it will ask you how many frames to generate. Give that a go, and see if that works for that particular kind of animation. It won't work terribly well for this one. So the next step is to get this out, and this menu won't really help us here too much, so what I'm going to do is go to the file menu, come down to export, and then use the legacy, save for web option here. Okay, this needs to be a GIF, okay, if you're seeing 'playing controls' down at the bottom here, then it's doing the right thing. If you don't, just check that the format is indeed GIF, because if it isn't, that's the only one that supports animation. You can test the animation, once you're happy just click 'done.' Whoopsadaisy, sorry, I meant to actually send it out. So, we'll go back to that again, once we're done, click 'save,' okay, I'm just going to save this out onto the desktop just there, progress wheel, images only. I'm then going to open a new browser window like so, and do file open, out to the desktop, choose progress wheel GIF, drop that in, and that will play against the background like so. In a normal webpage you won't get that black background on it, it's just what it's doing in isolation. But there you go, that's how you can get an animated GIF out of Photoshop.