Tutorials

Tutorial: Animated glow to your signature

Posted on by Archana K B

example

Update:

The initial version of this post was very crude and was more like a scribble. Earlier versions of Photoshop did not had the animation feature and hence the animation had to be created in ImageReady. But now, since Adobe Photoshop CS2 contains the Animation feature, you need not export it to ImageReady for this animations.

The steps and sample images have not been rewritten, instead just edited to make it more readable.

Adding the animated glow part alone is described in this tutorial. The image blending, and the fonts, and the text effects are not shown in this tutorial. The glow effect can be used not only to the text but also to other objects also. It just depends on your creative imagination.

I have taken the example of adding the glow to the text, since it becomes easy to explain.


1. Create a new file in Photoshop with black background.

2. Write your text in a new layer with desired font and layer style.

3. export to imageready..or u can do the steps one n two in imageready itself. for more stylish designs prefer PS.

3. Create a new layer on top of your text layer.

4. Draw a small rectangle using the Rectangle Marquee tool and fill it with desired colour.

5. Rotate the bar into required degree using the Edit->Free Transform (Ctrl + T is the shortcut)

6. Open the Animation Window. In the first frame, which is currently being selected, place the bar near the top part of your text such tat it does not cover your text.

pic6

7. Duplicate your current frame using the icon next to the trash can in the Animation Window.
8. Place the bar in the desired last position down the text, in the second frame.

9. Add motion tween between the first and second frames using the “tween” option as marked below. If you have selected the first frame, select “Next Frame” in the “Tween with” box.

10. Add more number of frames to increase or decrease the transition effect.

11. Clicking on the bar layer, add “create clipping mask” from the Layer -> Create Clipping Mask (or use the shortcut Ctrl+Alt+G) so that the bar remains behind the text layer during the animation.

12. And you are done! 😀

The final test Gif, used for this tutorial:

final

, , , , , ,
Archana K B

39 Comments

  7. great tut but 1 thing i noticed was when u mention the bar layer and say hit ctrl+g it needs to be done in photoshope not image ready ..im a noob to all this stuff so i scratched my headon this part for awhile…but other then that tut works great;)

  10. It would be a lot better if you actually wrote that damned tutorial in LITERATE English, rather than gibberish.

  13. Hi this is good, however there is this also acts on in German? with me it has not hit so completely: (. because I am German…

  14. I’ve tried this but the bars on either side only flash, they do not go over my text, help me please 🙁

  15. Ok I’ve gotten further 😀 I managed to make the bar move across the letters, but it shows up on the background too, I presseg CTRL + G and it didn’t work.. Can you help me?

  16. yo, i tried it, it worked fine,
    but when i used a gradient overlay on the bar and it looks better now i think,
    for those who want the gradient overlay too:
    Opacity: 100%
    Reflected
    Angle: -13°
    Mode: normal
    And if you dont know how to get there just click on the small f in the right down corner, and than u can set the settings in the colum, next to color table,
    and im so sorry for my english but im dutch

  18. When I do it, my bar is visible throughout the whole thing (so that you see it over the black as well); how do I fix that? Also, I can only save it as .psd format, it seems. Because of this, I can’t show it to my friends or anything. Is there a way to fix this problem?

  19. alright, about the saving thing; I found that you have to do
    “Save optimized as” in order to save it as a .gif file. As to the bar flashing over both the text and background, no solution for me yet…

  20. i did all you said….but at the last step you said, press (ctrl+g) i did that but it didnt acts as mask to the text layer.
    *i am using PS CS2

  21. if you ask me that tutorial was a waste of time to write, and to read because it provided basically NO information at all. alls i ended up with is a flashing line on either side of my text. and i followed the instructions exactly, so maybe the GENIOUS AUTHOR forgot a few rather IMPORTANT steps…geezus the newbs

  23. I am a noob to this and it might have been really cool and helpful to me, if you had done at least one or two of the following:

    WRITE IN PLAIN ENGLISH (no abbreviations)

    EXPLAIN EVERY STEP NECESSARY

    DONT ASSUME PEOPLE KNOW WHAT YOU ARE TALKING ABOUT

    PUT DOWN WHAT YOUR ABBREVIATIONS MEAN!

  25. Forget about using alg-g, that just creates a group. Instead, what you need to do is hold the alt key down and click on the layers palette between the text layer and the bar layer….you can do this in either imageready or Photoshop.

  26. Wow, that was a TOTAL waste of time. I went and did everything as was posted…even tried the alt+click between layers with no success. Still have the white bar going over the text. Doesn’t seen to be layering right or something. Any other hints?!

  28. ok i got the meaning now… 😀
    when u press and hold alt when u hover over the layers palette u ll see 2 circle between the layers 😉

    Thanks For The tut Bluediamond 🙂

  29. I am confused to be honest… I did try the ctrl+g and it didnt work. Could someone please advise?

    Thanks for the tutorial.. 🙂

  30. havin da same problem…Ctrl-G does nothing for me.. just groups both layers but still see a flashin line over my font… need help wit dis >.

  31. thanx alot, but how can I add the text Gif to my psd file so the work will be completed???

    regards

  32. For CS users, step 10 won’t work. Do not use the CTR +G. Instead, you can do this:
    1.Layer>LayerStyle>Blending Option
    2.Ajust Blending Mode:Normal to whatever other mode till the bar goes underneath the text layer.

    I still have to find out how to merge the gif with the background pic for the final result. Anyone?

  33. For users, step 10 won’t work. Do not use the CTR +G. Instead, you can do this:
    1.Layer>LayerStyle>Blending Option
    2.Ajust Blending Mode:Normal to whatever other mode till the bar goes underneath the text layer.

    I still have to find out how to merge the gif with the background pic for the final result. Anyone?

  34. what will be done when i hit (ctrl + g)?… i am using pscs2..when i hit (ctrl + g) it makes a group.

  35. WOw tut… that’s pretty cool!!
    I’ll add it in my page…
    thnx for the simple tutorial!!

  36. “draw a small rectangle with desired colour”
    how do you draw it and what do you click to draw it and how “place the bar in the last postition down the text” confused help!!!:S

  37. ok I’m pretty good with this sort of stuff.
    This tut was lacking so much info.

    I made it up to ctrl g
    wtf?
    which groups.
    but this works!

    solution Says:
    December 10th, 2005 at 11:23 pm
    Forget about using alg-g, that just creates a group. Instead, what you need to do is hold the alt key down and click on the layers palette between the text layer and the bar layer….you can do this in either imageready or Photoshop.

    thanks to the person who wrote that.
    Too bad you didn’t write this tutorial.

    1. To all of the above frustrated visitors,

      I have updated the tutorial now. True, it indeed lacked many of the necessary things, especially the Ctrl+G shortcut, Rather than the shortcuts, I should have mentioned the original path. Thanks anyway. Hope the tutorial is more clear now 🙂

  38. Pingback: Random Tidbits - IV | Archana Online.com

Comments are closed.

%d bloggers like this: