Animated Banner in Adobe Photoshop CS5 (Frames)

In this tutorial we will create a 728x90 animated banner GIF like the ones you see on blogs and webpages. I will use my own Logo "TutorialBoneYard.com" and just use simple text animation. Then we will save it as a GIF file which can then be played on a website.

To start with, we have a wooden texture layer below the text Layer. Both have Layer style effects applied to them.

Scrambled Text Animation 

Duplicate the Text layer into 5 layers. The idea is to break the text into words and place each one in a different layer. Include all layers in a Group. Using layer masks, hide the text into words.

Open the animation window. We’ll use the frames feature in this animation. If you can’t find animation, go to Window > Animation.

You’ll see there is already a frame in the animation window. Now create a new frame in the animation window. This will duplicate existing frame.

Make sure that new created frame is selected. Now move all the text layers individually to the left with the Move Tool  outside of the canvas. The text is hidden now.

Then drag frame 2 over frame 1. This will swap the frames position. Now change both frame’s delay to 0.1 sec. Hold Shift, and group select both frames, then click over .01 sec and choose 0.1 seconds in the sub-menu.

Now select both frames and click the frames button and click Tween.

Enter 15 frames and click ok.

Now we have an intro of our animation. Select the Loop Once. Click the Play button in the Frames area. The text bounces back, at first scrambled, then all the text is shown at the end of the animation.

 

Now change the delay of last frame to 1 sec.

Now add a new frame (18) and with that frame selected select the group that contains the whole text, and change opacity to 0. The text is hidden in this frame.

Phase - Out Effect

Now select last two frames (17 and 18), go to Tween and add 4 frames between them. Change the new frames delay to 0.1 sec. We now have a phase out animation effect.

Create Frame 23. Now add a new group (Group 2) for the new text that you want on the next part of the animation. I’m using 4 text layers. Turn off Group 1 when doing the text in Group 2, because they will overlap.

Phase - In Effect

On frame (23) add a 1 second delay, then select the first text layer in Group 2, then change the Opacity to 0. Create a duplicate frame (24) and change the Opacity to 100. Then Shift select both frames (23, 24), and Tween 4 frames in between. Now we have 28 frames and a phase in effect. Group select frames 24 to 28 and change the delay to0.1.

We use the same Phase in - Phase Out animation for all the remaining text layers, like the Photoshop text layer below:

Test the animation. Change loop to Forever. Make any changes like a 1 second delay at the end of each phase-in / phase-out.

Save as GIF Animation

To export the animation, go to File > Save for web & devices. Save as a GIF Optimized. And set looping to forever, so the animation always restarts.

After you save the GIF, the animation will only play in web browsers like IE or Firefox or Chrome etc. Test your animation with any web browser. Here it is below:

A few words about Timeline Animation in CS6

Timeline is a new feature in Photoshop CS6 which is used for animations. This feature is also included in Photoshop CS5 extended, but cannot be found in Photoshop CS5 that comes with Adobe Creative Suite. With timeline feature, animation makes easy with layers and key frames. There are a lot of ways to make animations by key frames which works with transform, opacity, position, layer styles etc.

In Photoshop CS6 open the timeline with Window > Timeline. You have the option to use the old style Frame Animation, or the new Video Timeline.

     

10:49