Join Chris Converse for an in-depth discussion in this video Preparing artwork for keyframe animations, part of Design the Web: Animated Loading GIFs.
Next we're going to animate the zombie from the Adam 13 Conference logo. So in the exercise files let's open up the adamconference.psd. And now to follow along in this section of the course you will need to use Photoshop CS6. We're going to be using some of the new features that are available in the video time line panel. So the first thing we're going to do is with the Adam Conference logo opened up. Let's select the zombie layer. Let's come down and select the ellipse tool. Let's click and drag, hold the Option or Alt key, let's come in here and drag a circle that's about 18 pixels by 18 pixels.
Let's come up to our shape tool. Let's set the fill to black. Let's set the stroke to none, hit Return. Now in the layers panel, let's select the ellipse, let's right-click, choose Convert This to a Smart Object. Once it's converted, let's name this right eye A, next come up to the fill, let's set the fill to zero. And then lastly, let's come down to the effects. Let's come down and choose Stroke.
Let's set the Stroke to one pixel inside and leave the color black and then click OK. So now we have the smart object of the right eye, and we're going to actually use the transform capability of Photoshop CS6. Next let's come up to the Window menu. Let's come down and open the Timeline panel. Inside here, we're going to command and create a video timeline. And once you select this, you'll see that each layer in the Layers panel is now represented as a track in the Timeline panel. Now, since we're going to be creating an animated GIF, we're going to be doing our animation inside of just 12 frames.
So in the timeline panel, let's come over to the drop down menu. Let's come down and choose, Set Timeline Frame Rate. Let's come up here and choose 12 frames per second. Click OK. You can see that Photoshop gives us a five second animation by default. Let's come down to the magnification. Let's drag this up. We want to be able to see at least two frames past the one second mark. So here we can see we start at zero, and we go all the way up here to one second which is 12 frames. And again, we want to see to about the thirteenth frame here.
So now with our artwork and timeline panel set up, next we'll create animations based on key frames.