Photoshop Mama's Layer Comps to Animation CS3
Learn about Layer Comps to Animation CS3
Hi! This is Mama Shan again and the last tutorial I showed you how to make a PDF presentations from Layer Comps. In this tutorial I am going to show you how to make an animated GIF that you can put on the webpage from an image where you have used Layer Comps. So I am just going to keep the same Layer Comps that I have here and that go into these different and create and animated GIF. Now the thing about an animated GIF is it is meant for the web so, the file size needs to be substantially smaller than this high resolution image. If I go to Image, Image Size, you can see that the regular size is 28.7 megabyte file with 2,592 pixels across, 3,872 down. That would be just totally wrong to make an animated GIF out of something that large. So the first thing you want to do is, in the image size, make sure that everything is checked here, Scale Styles, Constrain Proportions, Resample Image. Since we are making the image smaller, we want to change the interpolation method from the default by cubic to Bicubic Sharper, makes it a little sharper. Then we are going to come in here and type 72 in the resolution field. And then for the width, I am just going to type 4 inches. So we have 4 by 6 image at 72 that will be fine. You can make it smaller if you want but you really do not want it too much larger than that. So we click OK. And that makes the document windows smaller and the image smaller but we are only viewing in at 12.5%. So I am just going to swipe in there and type 100 and hit return. So you can see that the image is no worse for the wear here. And our Layer Comps are still working. Now how do we get the Layer Comps to turn into an animated GIF? Well this is what we do. We go up to the window menu and we open up the Animation Pallet and that is going to open up this little box down at the bottom of your interface and it is going to have one little frame of the current state of the image. Now we want to make four of this so, we need to add three more frames. To add frames to animation pallet, all you need to do is click this little page icon a few more times so that we have four. So I am going to come back to number 2 here and with the frame 2 highlighted, I am just going to click on this well next to the next version of the image. Then I am going to click on frame 3 and click on the green-orange version. Click on frame 4 and click on the purple-red or a version here. Also notice at the bottom of the frames, it is got seconds here. I want to make this and if I were to play this right now by hitting the play button, you can see how fast that is. So I am going to click to stop and I am going to click on frame 1, hold my Shift key down and click on frame 4 so that all are selected and then click this little black triangle here and I am going to say make it one second. So now, all of them are set to pause for one second on each frame. Now I am going to click play and take a look at that and there it is going. Doing its little image thing. Click stop. And I think 2 here is on the very left of the bottom, how many times do you want this to cycle, if you want it forever, put forever. If you want it just to do once then stop, hit once. Or if you want it other, you can actually set a loop count. If you wanted it to play let us say, run through a loop 4 times, you would put 4 times. I am just going to do that and click OK. Now we need to save this out and it is very specific how to save this out is an animated GIF is we have to go to the file menu to save for web. That is going to open up this very large safe for web dialogue which I am going to shrink up here. And we have to select from the tab here. In fact you can go to the presets tab here and just select GIF 128 dithered. Now saving in GIF format is the only way we can have an animated GIF, and it might look a little posterize to you because of that. You can have up to 256 colors in animated GIF. So up to 128 is looking a little bit too posterize for you, you can come over to the colors tab here and choose 256. I like the selective method, I like the fusion on and you can uncheck transparency and you do not need any of this other things check here. So this is how I want to save it. So we go in here click save, I am going to direct this to the desktop and I am just can call this Color Animation and click save. All right it is done. Now what I am going to do is open up a web browser and let me put the web browser inside the movie frame here and you can drag and drop the animated GIF into the web browser or from the web browser file menu. Just go file open file and I am going to go to the desktop and find that color animation and click open and it will open up directly in your web browser and you can see how it will perform when it is on a webpage. You can upload to your website or to another area where you save pictures and it will animate like this cycling four times because that is what I set it, to be. So that is how you can create an animated GIF from using Layer Comps. Pretty cool!