Comment/Tagboard

100x100 Avatars Trans. PNGS Wallpapers Layout Index Div Layouts Table Layouts Photoshop Articles Misc
Memory P H O N Y U Divine Designs Cinematic Parade Tenshi-Ai Designs The Forgottten Lair Towairaito Graphics Apply? (eh) Stats/Info. Link Exchange
Do Not Copy Who Links Fight Spam!

Word flash animation

Makes this wicked flash over your text/image, like a light flash.
- I have heard from people that their Photoshop version doesn't have some properties that I used in this tutorial.

Since the results have to be on gif. file, your image can't be huge. The best results are on an avatar or a signature.

Step 1

Get your image or text ready. I'll use this.

It's improtant that you don't add a lot of layer styles on top of your text/image, or else the flash won't be seen. Effects that go around the text/image will work ( drop shadow, stroke, etc. ). So effects like gradients or overlay colours won't work.

Step 2

Click on the gradient tool on your tool bar, then choose a colour for the flash. I generally use black or white, to have the light reflection effect. The foreground colour is your flash colour and the background is nothing; you're going to erase it anyways. For this example, I chose white. Click here for gradient settings.

Create a new layer over your text/image and hover the cursor in the middle. If you don't know how to use this tool, play around with it. The white part of the example means the width of how long you 'pulled' your mouse across while pressing down.

Then use the magic wand and take out the colour that you don't want in your flash. In this case, erase all the black as much as possible.

Back in your layer panel, make sure that the layer of your gradient is above the text. Right click on the gradient layer and click on 'create clipping mask'. The gradient layer should be seen only in the text. If nothing shows, up, then you probably have layer styles that you shouldn't have used for your text.
If you want, you can change the gradient's layer style to something else than normal so that it's not hard and solid. I changed mine to lighten.

Step 3

On the top navigation, go to windows >> animation. Your animation table should be up.

Move the gradient bar on the outside of the corner of the text, just so until you can't see it.

On your animation bar, duplicate the first frame so that you have two now. On the second frame, move the gradient bar to the other side of the outside corner of the text. It's a bit confusing spoken in words, so look at the example for a better explanation.

The white circles and dots indicate where the gradient should be. The text 'frame 1' and 'frame 2' shows where the gradient bar should be in what frame. The red arrow shows the movement.

Step 4

The final step is to tween it. So click on the icon that has bubbles generally fading. A small window should pop up that will give you an option on how many frames you want to tween. I used six frames. The more frames you have, the slower the flash will become. Click the thumbnail to see the settings.

Once you hit ok, several frames should come up on your animation bar. Click on thumbnail to see the results.
This is optional, but on the last frame I made the time period 1 second so it has a pause until it re-runs again.

On the top navigation, click on file >> save of web..., then save.

VOILA! You have your FLASH. :D If you have any questions or comments, please ask on the tagboard.