Thanks alot my dear …

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.

Related Posts:

• Your Favicon is Showing
• Blinded by the Light – Create Energy Beams and Swirls in Photoshop
• A Plethora of Free Icons
• Free Photo-Realistic Plugins for Photoshop
• FREE eBook / eCover Action Generator – Create an Ebook Automatically!

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. Both comments and pings are currently closed.

31 Responses to “Thanks alot my dear …”

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

   Amazing tutorial.
   Million thanks for this.
   very nice
   Thank you

2. Drazzy on September 25th, 2007 at 7:17 am

   How to make that brown gradient ?? (sry im a noob in photoshop)

3. 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!

4. 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..

5. 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!

6. 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

7. 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.

8. Stefanie on October 18th, 2007 at 12:52 pm

   Oow haha yes that was it thanks a lot!

9. 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.

10. 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.

11. 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?

12. 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.

13. 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?

14. 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?

15. jorg on May 23rd, 2008 at 12:10 am

    thanks alot my dear

16. 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!

17. 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 =]

18. yongkitz on July 11th, 2008 at 6:22 am

    nice tutorial

19. yongkitz on July 11th, 2008 at 6:22 am

    nice one

20. jobey on October 29th, 2008 at 4:39 pm

    im working on an animated banner here at school in my photoshop class and i followed along well but it still isnt animated im not sure what i did wrong, i saved it as a gif and even tried uploading it to photobucket but it still doesn’t work.

21. Newbietophotoshop on November 2nd, 2008 at 3:10 am

    You are a savior. I tried for so long to get a banner made and just couldn’t do it. The directions were a little vauge and I still had to mess around forever to get it but now that I have its wonderful and I have never been so proud of myself! My banner looks great and its all to you!

22. A.Z on January 9th, 2009 at 3:24 am

    Great Tutorial! This is what I’m looking for. Before this I used to think that designers are using a special software to create the animated banner. Really surprise how easy to make it using photoshop.

    Thanks again!

23. tryer on February 22nd, 2009 at 2:03 pm

    Hi, This tutorial is great, but will you expand your tutorial well such as the color code or etc. And will you upload the image that is writing there using feather pen? It is suited to my ads banner, please upload it. I need that. TY

24. Misto on May 15th, 2009 at 12:19 am

    Wow, this looks like a lot of help! I’m going to try it right now; thank you. 8D

25. Vectorworks Lady - Tamsin Slatter on May 15th, 2009 at 4:35 pm

    Many thanks – great tutorial – easy and to the point. Got mine done in seconds. Fantastic.

26. Dzinepress on July 31st, 2009 at 7:22 pm

    i really like you banner tutorial, this is really helping for make banners.

27. 25+ Photoshop Animations Tutorials | TechFaqz:::Tech FAQS simplified on August 1st, 2009 at 7:40 am

    [...] How to create animated banner [...]

28. Jessie on August 17th, 2009 at 4:55 pm

    Hi can you do a dissolve between the text? So it is a smoother transition?

29. recipes on September 23rd, 2009 at 9:43 am

    very nice thanks

30. joyoge bookmark on December 11th, 2009 at 11:50 pm

    helpful tutorial, many thanks..

31. Chris on January 10th, 2010 at 5:57 pm

    Great tutorial. Easy for someone like me to understand.thanks