first u create ur own psd after blending images etc.. if u want.. or start with simple like me..
1. create a new psd in PS with black background.
2. write ur text in new layer with desired font and style.
3. export to imageready..or u can do the steps one n two in imageready itself. for more stylish designs prefer PS.
4. create a new layer on top of your text layer.
5. draw a small rectangle with desired colour, and rotate it into required degree..(ctrl+t for transform)
6. place near the top part of ur text such tat it does not cover ur text
7.duplicate ur current frame.
8.place the bar in the last postition down the text.
9.add motion tween btwn first and second frames, (with reqd frames, n properties)
10. press ctrl+g on the bar layer, so tat it acts as mask to the text layer.
u r done..
my test gif:
Tags: animation, flash, gif, Internet, Links, photoshop, tutorial
August 15th, 2005 at 8:35 pm
Nice tut there diamond
Jeba
August 16th, 2005 at 8:48 pm
Nice Tut Blue
September 14th, 2005 at 8:03 pm
thanx bro,
this will be my first GIF, i never tried to make an animation besides my 3DS Max and Flash, let me try PS
September 25th, 2005 at 5:53 am
I liked that alot it was easy and left alot to the other people to tweak. @!!@
September 28th, 2005 at 3:42 am
on your results, how did u get the white rectangle to be transparent while going back and forth? plz
September 29th, 2005 at 12:32 am
man u need to give more information..
October 3rd, 2005 at 8:31 pm
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;)
October 8th, 2005 at 8:29 pm
amzing tut dude
October 9th, 2005 at 1:00 am
hi jason.. the rectangle is not transparent.. i just filled it wit light colors..
October 12th, 2005 at 10:28 pm
It would be a lot better if you actually wrote that damned tutorial in LITERATE English, rather than gibberish.
October 19th, 2005 at 7:00 am
when i push ctrl+g i go to save it and it says that it doesnt support animation.
October 21st, 2005 at 8:13 pm
DONT USE TXT LANGUAGE IN ENGLISH DOCUMENT WRITING. ARGH. I PITY THE FOOL
October 22nd, 2005 at 1:56 am
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…
October 22nd, 2005 at 3:22 am
I’ve tried this but the bars on either side only flash, they do not go over my text, help me please
October 22nd, 2005 at 2:31 pm
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?
October 23rd, 2005 at 5:25 pm
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
October 23rd, 2005 at 6:01 pm
I still can’t get it to flash just over the text
what am I doing wrong?
November 9th, 2005 at 6:14 am
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?
November 9th, 2005 at 7:40 am
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…
November 15th, 2005 at 4:56 pm
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
November 23rd, 2005 at 12:13 pm
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
November 27th, 2005 at 2:52 am
mayb u did somtin rong works for me:D
November 30th, 2005 at 3:13 am
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!
December 4th, 2005 at 12:34 am
What program did you use to make that?
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.
December 13th, 2005 at 10:31 pm
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?!
December 20th, 2005 at 4:00 am
hmm yea i got a prob with this alt plus w/e… any hints?
December 20th, 2005 at 4:10 am
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
December 29th, 2005 at 3:17 pm
I am confused to be honest… I did try the ctrl+g and it didnt work. Could someone please advise?
Thanks for the tutorial..
January 2nd, 2006 at 9:20 am
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 >.
January 6th, 2006 at 3:34 am
thanx alot, but how can I add the text Gif to my psd file so the work will be completed???
regards
January 26th, 2006 at 3:26 pm
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?
January 26th, 2006 at 3:26 pm
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?
February 28th, 2006 at 6:56 pm
what will be done when i hit (ctrl + g)?… i am using pscs2..when i hit (ctrl + g) it makes a group.
March 29th, 2006 at 11:40 am
WOw tut… that’s pretty cool!!
I’ll add it in my page…
thnx for the simple tutorial!!
April 2nd, 2006 at 9:52 am
“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
April 8th, 2006 at 4:54 am
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.