Create Your Own Holiday Light Animations — A Beginners’ Guide

The Workplace

Open Tittle Light App, login or register if you don’t have an account. After logging in, click the “…” button at the bottom right corner and select the “Paint” feature to start designing your light animation.

At the Paint feature page, it is still blank because you currently have no custom light animations. Click the “+” button at the top right corner to create your first animation.

Rotating Animation

Our first task is to create a tree which is 2-layer thick. We will start working on layer 4 and 5 as it will make the tree stay at the centre of the Light.

Select the first frame and tap the “pen” just above it. You will see an 8x8 layer. Go to the 4th layer, select a green color at the bottom of the app, and start painting like the example above.

After creating the body part of the tree, you can pick a brown color to paint the root, and also a yellow color for the top as a decoration.

Now you will see a flat tree. Because we are going to make it 2-layer thick. We will repeat the previous step and create an identical one on layer 5. (*Tips here: you can save the color by pressing the “+” button on the color wheel page, so you don’t need to select again when you want the same color.)

​​After you finish editing layer 5, click “Done” and you can preview it on an 8x8x8 scale.

Now if you click the “play” button, you will not see any animation because there is just one frame. To make a simple rotating animation, we will have to add another frame to the Christmas tree. You can click the “+” button next to frame 1, and it will show a blank frame.

This time is a bit tricky, as we are going to create a 90-degree rotated one, we will have to imagine how the tree looks like when it is separated into 8 layers. 

      

​​If you are still unsure about the conversion, we have provided a breakdown of each layer, so you can just follow this time.

  

 

After filling in the colors, go back to the main page. You can click the “Play” button and you will see the animation running. I know this looks a bit over-simplified, but the goal of this tutorial is to ease you into the “Paint” feature. We don’t want to scare you away with complex animations.

Yet, the 90-degree rotation is just a start. We are sure you don’t want to stop here. The next task is to create a moving animation, from the back to the front of the light.

 

Moving Forward Animation

Next, we will create a moving animation in which the tree will move from the back of the light to the front, and then move back again. This is even simpler than the previous one. You just need to use the same tree, but pasting it to different layers of different frames.

Let’s create the forward motion first. You will need 8 frames, which in the the first frame, you put the tree in the last layer, and you put the tree in the second-last layer of the second frame, and etc. When you finished it and play, you will see a tree moving forward. 

​​For the backward animation, you just need to do reverse what you did in the forward portion, and you will create the whole animation.

  

Add some decorations on the tree

​​Duplicate the first frame, and randomly replace some other colors to the green portions. Repeat it if you like for more animations.

An 3D tree

Now you should be familiar with the Paint feature and have the capacity to create more complex ones. Here is a challenge for you: create a 3D Christmas tree.

​​If you can make a Christmas 3D tree like the above, congratulations, you now understand the skills behind. Let’s create your own animations and unleash your creativity!