Introduction: Design an Animated Banner Advertisement in Photoshop

By Tutorial Bone-Yard
About: Webmaster of Tutorial Bone-Yard. Tutorials for Photoshop, 3ds max, Gimp, C++ and more. Accepting tutorial links. Submit your articles.

In this Photoshop tutorial we will create a 728x90 animated banner Ad in GIF format. I will use my own Logo "TutorialBoneYard.com" and just use 3D text animation, like scrolling scrambled text, Then we will save it as a GIF file which can be embedded on a website.

For the full tutorial which includes more text layers with fade-in fade-out, see Photoshop GIF Banner Animation

Step 1:

Ok, open a new Photoshop document. Or open the start_1.psd file. We have a wooden texture layer below the text Layer. Both have Layer style effects applied to them.


Attachments

Step 2:

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.

Step 3:

Open the animation window. We’ll use the frames feature in this animation. If you can’t find animation, go to Window > Animation. In Photoshop CS6 open the timeline with Window > Timeline. You have the option to use the old style Frame Animation.

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

Step 4:

Make sure that the 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. This is to make the text animation to scroll from the left to the right.

Step 5:

Now select both frames and click the frames button and click Tween. Enter 15 frames and click Ok. This will add the animated frames of the text scrolling from the left and back to normal.

Step 6:

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.

Step 7:

Press Shift and group select frames 1 to 16. Now right click under seconds at the bottom of any frame in the selected group. Choose a delay of 0.1 seconds. This will give enough delay between frames, so it is not too slow or too fast.

Put frame 17 at delay of 1 second, this makes the text animation stop for a second before the next animation.

Step 8:

Create frame 18. Do NOT swap frame 18 over frame 17. Just keep frame 18 selected.

To make the text scroll to the right, select frame 18. Move all the text layers individually to the right with the Move Tool,  outside of the canvas. The text is now hidden in frame 18.

Group select frames 17 and 18, and go to Tween, and add 15 frames in between.

Group select frames 18 to 32, and change the delay to 0.1. Change frame 33 to a 1 second delay.

Step 9:

Now for the last step.

Change the loop to Forever. Press the Play button at the beginning of the frames area.

You see the animation in Photoshop. If your animation is not the same as mine, then re-follow each step from the beginning to see where you made a mistake.

If you want to save as a GIF file, to embed into a webpage, then  go to File > Save for web & devices. Save as a GIF Optimized.

For the full tutorial which includes more text layers with fade-in fade-out, see Photoshop GIF Banner Animation

For more tutorials see my website: Tutorial Bone-Yard