Animated Christmas Lights

Your lights or designs look empty, without life. With this tutorial you will learn to create some animated lights and your design will really look alive. We this tutorial you will also learn how to animate something in ImageReady.


Step 1>

Making the Lights

Open a new document 300×300 pixel. Fill it with white. Set the foreground to white. Now from the Layer panel choose Channels. Make a new channel. Select your Line Tool and make these settings.

Animated Christmas Lights

Now go to View > Show > Grid. Now start drawing. After you made the stroke, fill it up with white.

Animated Christmas Lights

Go to Filters > Gaussian Blur and enter size 4.5 or 4. Now go to Image > Adjustments > Levels. 80/1.25/125.

Animated Christmas Lights

Now turn back to the Layers and make a new one. Select > Load Selection. Pick Alpha 1 and ok. Fill the selection with red (#e61e35). Go to Layer Style > Inner Glow.

Animated Christmas Lights

Now take your line tool again. Set the size to 3 px and make a little line.

Animated Christmas Lights

Go to Layer Style > Outer Glow.

Animated Christmas Lights

Add some rectangular at the bottom and the final product should be this.

Animated Christmas Lights

Step 2

The Animated Part

Now duplicate the layer so that you have other lights. Go change their color go to Image > Adjustments > Hue/Saturation. Play there and you will find other colors. Then adjust the outer and inner glow and there you are.
On your right Panel, at the bottom, you have a button that will send the picture to ImageReady. Hit it. Before you hit it, make sure you have selected the layer with the first light. Now you are in ImageReady.
In the Animation Panel you have the first frame. Set the Delay to 1 sec.

Animated Christmas Lights

You have a selection around the light that is selected. Go to the other layers and disable the outer glow. You do this by clicking on the eye.
Now make a new frame from the little arrow you have in the right up corner of the animation panel. Now you have a selection around the second light. Enable the outer glow of this one and disable the outer glow of the others. Do the same thing with the third light.

Animated Christmas Lights

Now go to File > Save Optimized As…
The final result is this.

Animated Christmas Lights


Web hosting

Web hosting services on servers located in Romania and SUA. Available control panels: CPanel and Plesk.