leilaniThis is a direct continuation of Frame Animation: Part 1. If you haven’t read the first post, please start there.
Layers to Frames
When first opening a layered image in the Timeline panel, only the selected layer will appear in the panel. Open the Timeline menu by clicking on the four small bars on the far right, and select Make Frames From Layers.
Once this option is selected, the layers will automatically populate based on what’s in the Photoshop layers panel. The default layer sequence starts at the bottom and goes up. So the background layer (or layer 2, if the background wasn’t made visible before activating the Timeline Frames option) is first, then the next one above it is second, etc.
Notice the default display length is 0 seconds. I recommend clicking the play button ( ▶) immediately, both to see the speed of animation and to be sure the layers are in the desired order. It’s easy to drag frames around now. After the next step, it will be more challenging. Adjust the display time from 0 seconds to at least .2 seconds.
If the resulting animation is exactly right, skip the next section and go straight to saving options.
Tweens
The animation used for the header for this series is an animated gif, using frames. But it uses a fade-in option between the main frames, called Tweening. To apply the effect, click on the frame where the effect should begin, then go to the Timeline menu on the right and select Tween.
The default settings are the addition of five frames and opacity mode – i.e., it fades out the first frame while fading into the next frame, in sequence while moving through the five frames. I recommend leaving the default settings for this step, at least until the last frame. Click OK and Photoshop will automatically create the fade-effect frames, placing them between your beginning frame and the next one.
Note: it’s possible to use Tweens to create a seamless looping animation. On the last frame, use the dropdown in the Tweening panel where it says Tween With. Change from Next Frame to First Frame.
Add Tweened frames for each frame where the fade-over effect is desired. Unlike the regular frames, where .2 seconds per frame is the minimum to allow readability, I recommend setting each Tween frame at 0 or .1 seconds. Play with the timing to get the desired effect.
When previewing with Tweens, the Tween frames will appear semi-transparent. Don’t worry – this will be addressed in Part 3.
Adjust the display times for the first and last frames to make them longer, if desired. You may want this if doing a promotion where the these frames provide a call to action or other important text. Using the dropdown, set them up to 10 seconds long (or choose Other to create a custom value) before saving.
Looping
The default setting is for the animation to play once and be done. To change it to looping — i.e., it plays forever — change the setting in the lower left corner of the Timeline panel.
In Part 3, we’ll look at options to Save or Export, and when to use each.
