Photoshop: Animation tutorial (reflective text)
Posted: Thu Dec 09, 2004 5:39 pm
ok this is a text animation tutorial. this will make your text do like in this siggy.
I will provide many step-by-step screenshots too.
Ok, first, open up adobe photoshop and make a new document that is however big you want it. since im gonna b making a sig, im gonna make it 400x120. Make a background to your liking. now, make some text on it. make the text any color except white. i would recomend a dark color such as dark blue or red or w/e. now make a new layer right above the text layer and select your gradient tool. use these settings for your gradient.
Then make your gradient on that layer and make it really small and make it right in the middle of the sig so it will be long. also u might want to angle it a little for a kool effect. here is what it should look like.
now invert that layer so it is white(ctrl+I). Now press ctrl+g to make that gradient only be on the layer it is above. now open the image in adobe image ready by pressing ctrl+shift+m or by going to File>Jump to> Adobe Image Ready. It should now look like this.
now move the gradient layer to the very edge of the text, just out of sight. now on the animations bar, click the little arrow that is in the circle and pointing to the right. then click "New Frame".
you should now have 2 frames that look the exact same. now select the second frame. select the move tool and then hold shift. move the layer of gradient all the way over to the opposite side of the text and again, have it just out of sight. now click on the tween button which is the one that is on the bottom of the animations bar and looks like alot of overlapping circles. you should no have this on your screen.
now use this as ur settings but it doesnt really matter about the # of frames to add cause the more frames just makes the reflction go slower and less makes it go faster.
now press the play button. if you notice that some of the white is smaller than the text at the edges, either move the gradient layer down or up, whichever you need, or make it less at an angle. this it my final product.you may also wanna put a delay on the last one by clicking on the ting that sais 0 sec and changing it.also when u go to save it, click file, and then save optimized as.
here is my final result
I will provide many step-by-step screenshots too.
Ok, first, open up adobe photoshop and make a new document that is however big you want it. since im gonna b making a sig, im gonna make it 400x120. Make a background to your liking. now, make some text on it. make the text any color except white. i would recomend a dark color such as dark blue or red or w/e. now make a new layer right above the text layer and select your gradient tool. use these settings for your gradient.
Then make your gradient on that layer and make it really small and make it right in the middle of the sig so it will be long. also u might want to angle it a little for a kool effect. here is what it should look like.
now invert that layer so it is white(ctrl+I). Now press ctrl+g to make that gradient only be on the layer it is above. now open the image in adobe image ready by pressing ctrl+shift+m or by going to File>Jump to> Adobe Image Ready. It should now look like this.
now move the gradient layer to the very edge of the text, just out of sight. now on the animations bar, click the little arrow that is in the circle and pointing to the right. then click "New Frame".
you should now have 2 frames that look the exact same. now select the second frame. select the move tool and then hold shift. move the layer of gradient all the way over to the opposite side of the text and again, have it just out of sight. now click on the tween button which is the one that is on the bottom of the animations bar and looks like alot of overlapping circles. you should no have this on your screen.
now use this as ur settings but it doesnt really matter about the # of frames to add cause the more frames just makes the reflction go slower and less makes it go faster.
now press the play button. if you notice that some of the white is smaller than the text at the edges, either move the gradient layer down or up, whichever you need, or make it less at an angle. this it my final product.you may also wanna put a delay on the last one by clicking on the ting that sais 0 sec and changing it.also when u go to save it, click file, and then save optimized as.
here is my final result