Animated Banner Tutorial

Now we need to prepare the text for animation. Duplicate every text layer you want animated.

Rasterize the duplicates.

Select one of the rasterized layers. Select Filter > Blur > Motion Blur and apply it.

Do the same for every rasterized text layer. Now hide all text layers and select File > Jump to ImageReady.

Since you have six different text layers, duplicate the frame six times.

Select the first ‘blurred’ text layer. To make things easier, right click on this and uncheck Propogate Frame 1 Changes.

Now, show the blurred text in the first frame. In the next frame, hide that blurred text and show the actual, legible text. Keep on alternating like this between frames.

And you’re nearly done! Now we just need to adjust the length of time each frame is shown. Set every blurred frame to 0.1 seconds, play the rest by ear. You will want to aim at something between 2-3 seconds for each frame of text.

Save the optimised animated .gif, and there you have it! A complete, animated banner.

If you are interested in the photoshop file for this tutorial, feel free to download the animated banner photoshop file.

Pages: 1 2

Similar Posts

This entry was written by Minty Ferret on Saturday, September 15th, 2007 at 12:55 am and is filed under Photoshop Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

19 Responses to “Animated Banner Tutorial”

Aoi on September 24th, 2007 at 1:15 am

Amazing tutorial.
Million thanks for this.
very nice
Thank you
Drazzy on September 25th, 2007 at 7:17 am

How to make that brown gradient ?? (sry im a noob in photoshop)
Minty Ferret on September 27th, 2007 at 4:49 am

Hey there! Sorry for the delayed response:

For the gradient: I’m assuming you mean how to get the colours? Once you’ve selected the Gradient Tool, look around your toolbars for a block of color. (ie. the gradient). Click it. It should open the Gradient Editor window. To change the colours, double click the little box and arrows at either end (the bottom ones) and just select what you want. Let me know if that helps!
Stefanie on October 18th, 2007 at 12:08 pm

okay i saved it as gif. but when i open it again it doesn’t play the animation :S
what could i have done wrong..
Minty Ferret on October 18th, 2007 at 12:36 pm

What program are you using to view it? Try uploading the file to a website (try imageshack.us) and view it there, it should be animated!
Stefanie on October 18th, 2007 at 12:39 pm

i’ve found the problem i didn’t saved it optimised
but when i try that it can’t be saved as .gif :S ..
only .jpg or .html
Minty Ferret on October 18th, 2007 at 12:44 pm

Ah I think I know what happened - In your ‘Optimize’ palate (make sure you have that open) make sure .gif is selected - then you should be able to save it as such.
Stefanie on October 18th, 2007 at 12:52 pm

Oow haha yes that was it thanks a lot!
Laura on October 28th, 2007 at 5:02 pm

Thank you very much for posting it!! I always wanted so know how to do it.
Gemma on January 8th, 2008 at 5:01 pm

Wooo thanks.
Took me sometime to get my head around
certain saving techniques and stuff
but yeah, I got it.
Nubloo on January 28th, 2008 at 12:59 pm

Nice tutorial!
But this must be only for Versions CS2 or down. In CS3, ImageReady is obsolete, and the animation functionality is included in Photoshop.
Which version did you use?
Minty Ferret on January 28th, 2008 at 8:35 pm

Hi Nubloo - yup I used CS2 for this version! I just upgraded to CS3 recently and yes, animation is now part of Photoshop. But the principles are the same either way, I may create another tutorial later on specifically for CS3 users just in case people need some help figuring out where things are there.
Masud Vorajee on May 9th, 2008 at 10:03 am

Thanks for the tutorial. Its great for learning one like me

I have ImageReady as well but when I try to JUMP to ImageReady, Jump to option is blurred out. How to enable it?
Minty Ferret on May 9th, 2008 at 7:59 pm

Hey Masud! That sounds a little weird, and I’m not actually sure how to fix it. Have you tried saving your psd file in Photoshop, opening ImageReady, then opening the psd from there?
jorg on May 23rd, 2008 at 12:10 am

thanks alot my dear
ced on May 31st, 2008 at 8:49 am

i think i have same problem as masud. the jump to ImageReady option is blurred, but i found a way how to go to ImageReady anyway. Either you save it then open the file with ImageReady or look at the link in the bottom of your tool palete. Anyway, the version that I’m using is CS2 and i found out that the animation palete is also built in here.

Thanks Minty, this is really a nice tutorial!
Abi on June 20th, 2008 at 3:12 pm

Thank you very much for this! I always see banners on forums and people say they make them in Photoshop and I’ve wondered for ages how to make them - now I know!
Thanks =]
yongkitz on July 11th, 2008 at 6:22 am

nice tutorial
yongkitz on July 11th, 2008 at 6:22 am

nice one