Line Animation
This tutorial we will show you how to create text that looks like its glowing.
Created on: 4/30/08
Created by: Majesticlicks
Program used: Adobe Photoshop cs2
Step 1
Now, we’re done with Photoshop, we’ll start editing with ImageReady: click-shift+ctrl+m |
|
Step 2ImageReady will open. |
|
Step 3Window > Animation to show the animation window: |
|
Step 4
Now, we will show the Layer 3 (that we already hided in Photoshop) by setting the eye back. |
|
Step 5Drag the Layer 3 in the Layers Panel to the “Add a mask” button in the bottom to create a mask of that layer. Select the Brush tool and clean up the white area in the mask. Then unset the link between the layer preview and the mask: View my layer mask |
|
Step 6 Here’s the tricky part. Although it can be done in many ways, but i find this way the easiest. Select the Brush Tool set the foreground color to #ffffff (white) and select the following Brush: |
|
![]() |
Step 7Make sure the mask is selected! draw with you free hand a line like this (Note that you will only see this line in the Mask preview in the layer panel) |
Step 8You should see in the Layers panel the following: see how it looks in layer panel |
|
Step 9
Let’s start with the animation now. Press the 1st Frame in the Animation windows and press “Duplicate current frame” icon to duplicate the layers |
|
Step 10Now make sure the mask of the layer 3 is selected, select the Move tool and Press Shirt + Right like 25 times to reach the following state: |
|
Step 11
So, we have moved the line mask from left to right. It’s time to animate it! The frame 2 is selected, hold CTRL and click on frame 1 to make them both selected. Then press the Tween icon: view tween icon |
|
Step 12
Apply the following Tween settings: |
|
Step 13
A set of frames will be created for you. Select the 1st frame, scroll to the end, hold SHIFT and click the last frame. You will have all the Frames selected. Click the delay drop down on any of the selected frames and choose Other: enter 0.3 seconds as a delay between the frames: |
|
Step 14
Now select the last Frame alone by clicking on it, and set its delay to 5 seconds: |
|
Step 15We’re done. It’s time to save the animation as gif. Make sure the format in the "Optimize" panel is GIF: |
|
![]() |
File > Save Optimized As! Open it with Firefox, because Firefox renders the Gif formats faster than Internet Explorer (I’m not sure about Safari or other browsers |
|
|
![]() |
![]() |
![]() |