Illustration and Visual Narrative - Final Assignment

Final Assignment

For this assignment, we need to create a 15–20 second animated video with a poetic, life-lesson message and caption. I chose the quote: “Thousands of candles can be lighted from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared.” – Buddha. I picked this quote because I imagined a beautiful fantasy scene with light shining in the dark. The meaning of the quote also feels personal to me. I’ve met people who made me feel better when I was down, and they inspired me to do the same for others. Even a small moment of happiness can spread and brighten someone’s day.

Quote

“Thousands of candles can be lighted from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared.” – Buddha

My understanding from this quote, you can light many candles from just one, and it won’t lose its flame. In the same way, sharing happiness with others doesn’t reduce your own happiness, it can actually spread and grow. 

What I have learned from it:

• Sharing joy or kindness doesn't cost you anything.
• Helping others can make everyone feel better, including yourself.
• Happiness grows when it’s shared.
• Be generous of spreading happiness.

Inspiration

When I first read this quote, the most direct visual that came to mind was a candle. But instead of showing a literal candle, I decided to use little light spirits to make the illustration feel more magical and meaningful. This is because instead of just doing a straightforward translation of the quote into the illustration, I want to turn it into a simple visual story that feels emotionally engaging and motivating. I thought of a story that matches both the message of the quote and the visuals I wanted to create. The story begins with a girl who finds a lonely light spirit in the darkness. She shares her light and helps it shine. Then, more and more light spirits start to appear. In the end, the girl and the spirits float into a rainbow, and the whole scene becomes bright and full of joy.

After receiving feedback from my lecturer, I decided to explore the idea more deeply, especially the meaning behind each element, how the story in my illustration connects to the quote, and whether the audience will understand that connection. One concern raised was that the quote begins with “Thousands of candles...”, but my original illustration only showed a single light. To address this, I decided to add a new panel at the very beginning, showing many light spirits glowing at first, then slowly fading away until only one is left. This not only aligns better with the quote but also acts as a strong hook for the story that follows.

Moodboard

For the moodboard, my quote is about candles, but I’m replacing them with light spirits that grow from one to many. So, the idea is simple, glowing visuals in the dark, with bright and colorful lights. The inspirations I found on Pinterest are mostly hand-drawn with organic shapes. Since I’m using Adobe Illustrator, I’ll make the style more vector based. Still, I want the visuals to feel full of wonder, hope, and happiness.

Moodboard

Storyboard

Mr. Hafiz said it’s more advisable to write a storyboard first before starting the illustration. This is because brainstorming and writing only take a few minutes, while creating the illustration takes much more time. For this task, the quality of the illustration doesn’t matter as much, it’s more about the visual message you want to convey through the quote, and how you express its meaning through the illustration.

Storyboard

After having a clear direction and idea of how each storyboard has its own rationale and meaningful elements, I began working on the detailed sketches, refining both the elements and the composition. Since the format is portrait and the art style I chose is simpler, I applied compositional techniques such as the golden spiral, rule of thirds, and trigonometry. Below are the refined sketches along with their compositions.

Panel 1 (Golden Spiral)

Panel 2 (Rule of Thirds)

Panel 3 (Trigonometry)

Panel 4 (Golden Spiral)

After finalizing the sketches and art direction, I began digitizing them in Adobe Illustrator. As usual, I started with the outlines using the Pen Tool and basic shapes, then combined them to complete the illustration.

For the colouring process, I gathered references from Pinterest and imported them into my workspace. I observed how other artists use colour and gradients to create glowing effects in dark settings. Inspired by that, I used the Mesh Gradient Tool for most of the elements, especially for the light spirit. Since I wanted the light spirit to appear glowing from the center, I made the inner area brighter and used warmer, softer tones toward the outer parts. To enhance the glowing effect, I also applied an Outer Glow effect on the light spirit.

The use of gradient allows for smoother transitions between shades, which adds depth and a more realistic lighting effect. It also helps to create a dreamy and atmospheric feel, making the visuals more engaging.

In terms of colour palette, I chose analogous colors for harmony and softness. Analogous colours naturally blend well together, creating a cohesive and calming mood. This choice supports the magical and gentle tone of the scene, especially between the light spirit, the little girl, and her umbrella.

Mesh Tool + Gradient + Outer Glow

Use of mesh gradient + Analogous colour

Considering that we will need to animate the illustration later, I applied a consistent method to most of the elements to maintain visual coherence and the overall art style. This also helps ease the animation process, as each panel is linked by similar elements and background settings. By doing so, it avoids abrupt transitions between scenes during the animation. Below is the outcome of my illustration for each panel.

• I stylized the light spirit consistently across all the story panels, only adjusting the scale, flame direction, and color gradient.
• The yellow light spirit in panels 1, 2, and 3 remains in the same position to ensure visual comfort during animation, as this avoids any noticeable misalignment.
• Similarly, the light under the umbrella in panels 2 and 3 is kept in the same position for consistency. While I adjusted the position of the girl and the umbrella slightly, I ensured that their placement still aligns logically with the light source under the umbrella, maintaining a natural and cohesive look.

Panel 1

Panel 2

Panel 3

Panel 4

For the video animation, before I began animating, I created an animatic to plan out the overall flow. This included considerations of animation timing, narrative pacing, background music, and other elements to help visualize how the final animation would look. I used CapCut to arrange the sequence, set the timing, and test the audio components.

• Background Music: I sourced the background music from CapCut’s sound library. I searched using the keyword "抒情" (translated to English as "lyrical" or "emotional") and found a track that stood out. Compared to other options that started off too softly and failed to grab attention, this track had a catchy opening. The melody hits a soft decline at around the 15-second mark, which works perfectly as a closing point for my video animation.
• Narration Voice: For the voiceover, I used AI-generated speech from ElevenLabs, as their voices are more human-like and expressive (though still not quite as natural as a real human voice). I looked for a gentle tone that would suit the mood of the story and generated the narration accordingly.

Animatics

After deciding on the flow of the animation, I began exporting my Adobe Illustrator file into After Effects. I created all the animations in After Effects, and to maintain consistency, I avoided using too many effects. Instead, I kept it simple to match my art style and to ensure the overall visuals felt peaceful and comfortable. I also imported the background music and narration audio to use as a reference in the timeline.

• Wave Warp: I applied this effect to each of the light spirits to give them a sense of movement and make them feel alive.
• Opacity: To create fade-in and fade-out animations, I adjusted the opacity of each element from 0% to 100% and arranged them in sequence to control the timing of the transitions.
• Rotation: I slightly rotated the stars in the final scene to give a subtle sense of movement and liveliness.

Overall, the animation turned out well. The trickiest part was adjusting the timing and sequence of each element’s fade-in and fade-out to match the background music. This took quite a bit of time, as I had to fine-tune each element imported from Illustrator for the best result. As a beginner using After Effects, I also spent time learning the basic functions before diving into the actual animation process.

Wave Warp

Opacity

After Effect Working File

After completing the animation and feeling satisfied with the result, I exported it and imported it back into CapCut to add subtitles. To maintain consistency, I used fade-in and fade-out animations for the subtitles as well. You may view the final outcome below under Submission.

Submission

Adobe Illustrator File - Google Drive Link

Final Video

Documentation

Reflection

Through this assignment, I learned a lot not just about using Adobe Illustrator or After Effects, but also about how to tell a story through both visuals and words. It wasn’t just about making nice artwork, but about how to combine a quote with visuals in a way that people can understand and connect with.

This project made me think about how to show the meaning of the quote through design using colors, characters, composition, and small details. Every element in the artwork had a purpose. I wanted the visuals to support the message and help tell the story in a clear and emotional way.

I also learned how animation can make a big difference. With simple effects in After Effects, I turned still images into something more lively and engaging. It made the quote feel more real and relatable, like bringing it to life instead of just showing plain text.

Overall, this assignment taught me how powerful it can be when words and visuals work together. It helped me understand how to create something meaningful, not just pretty, something that speaks to the audience through both what they see and what they feel.