Animated Shining Text Effect

Result of this tutorial:

Shining text effect is great for banners, animated logos and avatars. Open Adobe Photoshop and create a new 4x4 px file and zoom it in 1600 times.

We are going to use this small image for attractive banner background. Take Pencil tool , set it's size to 1 px and use three grey colors to make the same image. (You can experiment with different colors and sizes):

Now go to Edit-Define Pattern.

Create a new file. I took a classic banner size 468x60 pixels. In the upper menu go to Edit-Fill, and in a new window choose the pattern you have just created:

Press OK. Photoshop automatically creates a new background from our 4x4 px image:

Now we are going to add some text using Type tool I used Concepto font. You can download it from Fonts page. Also you could find the installation instructure there.

Let's align our text. Take Move tool , then press Ctrl+A on your keyboard to select all.

Now click on the indicated icons to align your text horizontally and vertically:

Now text is properly aligned:

Let's add some bevel and emboss effect: Layer-Layer Style-Bevel and Emboss. You can add any other layer effects if you want.

Your image should look like that:

In the layer window (F7) create a new layer.

Choose Brush tool Hold Shift and draw a straight vertical yellow line. It should be positioned to the left of your text.

Add a couple of effects to this line. Layer-Layer Style-Outer Glow:

Layer-Layer Style-Inner Glow:

Now our line looks like a glowing light:

Now it's time for younger sister of Adobe photoshop- Adobe Image Ready. Before starting this program i recommend you to save your image in psd format. Ok, click on the ImageReady icon.

You can see your banner in a new program:

In animation window click on the indicated icon to create a duplicate frame:

Duplicate frame has been created:

Make sure that your yellow line layer is active in layer window:

Now move your yellow line to the right of your text:

In the upper menu go to Layer-Create Clipping Mask. It will make the effect when your shining line will appear on the text only.

Yellow line layer has been changed:

There is no yellow line in the main window:

In the animation window click on the Tween icon:

In the new window put 20 frames:

As a result we have 20 new frames between first and second frames, and Photoshop will automatically create smooth effect between them. The more intermediate frames you have, the smoother will be the effect and bigger the file size. All you have to do is to click Play and choose a Forever mode:

And enjoy your animation %) :

Save your animation: File-Save Optimized As in gif format:

Have a good animation!