Hi, Just Curious to know how this text animation is created on the Hosting Banner? Can any one please post a tutorial Thanks in Advanced
Dude, I know it's a .gif Animated Banner. Sorry for misunderstanding. I just want to know how's that animated text is created. Any one can please explain me how to do the exact text animation. Thanks
Lol it's pretty simple. I'll explain it using Photoshop. Open up your Animations toolbar. (Click the Window menu at the top, and then Animation) Make sure you're on slide view. Turn off all text layers. Next, you need to design some light you like to move across the area the text will appear (The small yellow light you see move before the text flashes up) Next step is to type in all the different text you want to appear, on different text layers. Just turn the layer off to type the next text so the previously typed text doesn't get in the way. Now you should have your design ready to animate. Looking back on the Animation's toolbar, you should see a single slide at the beginning with a thumbnail of your entire design. Click the "Duplicate Selected Frame" button located at the bottom of the Animation pane. This will duplicate the frame, and you should now have two identical thumbnails. On the first frame, position the light that you want to move. You should position it to the very left of where you want it to start moving from. Now, click the second frame. Press Ctrl+V to select the Move tool, and hold shift+right arrow key to move the light quickly across where you want it to pan. Once it's at the end of where you want it, simply release shift and the arrow key. (Note: Holding shift isn't mandatory, it just makes the object move 10px at a time, instead of 1px.) Now look back at your Animation panel, and find the symbol with three small ascending circles, called Tween. (Make sure you have the second frame selected before hitting Tween) You will be presented with the Tween menu. Make sure the option at the top of the menu is set to "Previous Frame". You're going to have to play with different "Frames to Add", but for one almost identical to the banner you provided as an example, I'd put it at 7-10 (Maybe a bit less.) The rest of the options should be correct by default. Now, if you click the Play Animation button on the Animation pane, you should see your light move across the screen. Select the last frame of the animation, click Duplicate Frame again. On this newly added frame, you want to turn the first text layer back on. This will make it appear like it does in your example. Lastly, you need to play around with the delay of each slide. The smaller the delay, the quicker the animation will happen, but sometimes this can be a bit unprofessional looking to have it super fast. To change the delay, you should see printed on the bottom of each frame, a (0 sec., .1 sec, or any other time, just depends on your defaults.) Click the black arrow next to this number, and play with times. If you're going to make more than one text layer appear at different times, simply copy/paste the already created, and tweened frames behind the text frame you just created. On the last frame of the pasted frames, just turn the previous text layer off, and turn the new one on. I'm sure there will be small bugs here and there, as I'm typing this by memory lol. But you should be able to figure this out if you know a little bit about photoshop.