FINAL PROJECT: ANIMATED INSTRUCTABLE POSTER
March 15| 2026
NAME: Miao Xinjun
STUDENT I.D: 0379525
Information Design / Bachelor of Design in Creative Media / Taylor's University
Final Project: Animated Instructable Poster
TABLE OF CONTENT
1. Instruction
2. Process
2.1 Task Separate
2.2 Selected Instructable Poster
2.3 Storyboard & Timing Map
2.4 Draw vector images
2.5 Animation Production
3. Final Submission
4. Feedback
5. Reflection
1. INSTRUCTION
1.1 Lecture
During the lecture, Mr. Kannan explained the content and details of the task in detail and showed us works from past students. Under Mr. Kannan's guidance, we successfully completed the task.
1.2 Instruction
For the Final Project, we will work in pairs to complete this final task. First, we need to choose one poster from the two posters as the source material for the final task, 'Animaed Instructable Poster', then draw the storyboard, and work together to complete the production of the Animaed Instructable Poster.
2. PROCESS
2.1 Task Separate
- My Work (Miao Xinjun):
- Drawing storyboards
- Draw vector images
- Animation Production
- My partner's work （ABANG TAWFIQ IRFAN BIN ABANG AZLAN):
- Timing Map
- Animatic
- Dubbing
2.2 Selected Instructable Poster
After discussion and feedback, my partner and I decided to use my poster for this task.
My partner Tawfiq and I shared my posters and recipe videos, as we both needed to familiarize ourselves with the steps before starting the work.
2.2 Storyboard & Timing Map
The final project began in week five. Reviewing the class materials, I realized we first needed to create a timing map to plan the time allotted for each step of the recipe in the animated video. We also needed to create a storyboard to help us visualize how materials would appear in the animation and how different scenes and steps would flow smoothly.
I used Procreate to create the storyboard beforehand, while my partner was responsible for the timing map. In the subsequent in-person lecture, I showed the instructor my storyboard and, together with my partner, explained our vision for the animation production.
After showcasing the initial storyboard, we received very helpful feedback. The transitions between most of the storyboard content and the appearance of related elements were clear and smooth; however, some areas still require further improvement.
First, adding a cover and ending would enrich the video's visual appeal and make it appear more complete. Second, for steps that need to convey the passage of time, such as 'leaving the dough overnight to ferment' or 'baking in the oven for a certain time,' changes in ambient color can represent the transition from day to night, and the ticking of a clock can also indicate the passage of time. This would help viewers understand the animation's content more efficiently. Finally, the instructor reminded us that in the subsequent animation production process, rhythmically varying the movement speed of certain elements can significantly improve the animation's visual appeal. For example, in the 'chopping vegetables' step, instead of simply having the sketch move across the screen at a uniform speed, it could pause briefly in front of the cutting board before quickly moving across to chop the vegetables.
Since I created the storyboard, I was responsible for completing all the necessary improvements.
Based on the feedback, I further refined the storyboard and successfully presented it at the next in-person lecture.
The improved storyboard was deemed complete and smooth enough, so I shared the complete storyboard with Tawfiq. His timing map was also nearing completion, and our collaboration went very smoothly.
Next, my partner successfully completed the timing map based on my storyboard and shared it with me. As required, he proceeded with the animation production. This step helped us develop a general idea for the subsequent animation work and allowed us to produce the animation more efficiently.
Meanwhile, I was responsible for using Illustrator to create the source files needed for importing into Adobe Effects for animation production.
Once we have confirmed the feasibility of the Timing Map and Animatic through discussion, we will soon officially begin the next phase of our group work.
2.4 Draw vector images
Next came my main work segment. While my colleagues were creating the Timing Map and Animatic, I was completing the Illustrator files to prepare for the subsequent animation production.
Using Storyboard and Animatic, I realized that creating a recipe animation required far more vector images than I could draw on the poster. Therefore, my first step was to compile the necessary vector images for the animation based on the Storyboard and Animatic, and then draw them specifically.
Initially, I tried using Procreate to draw the vector images because it allowed me to export my drawings as Photoshop, which I could then open with Illustrator. However, I found that using Procreate resulted in blurry vector images in Adobe Effects. So, I imported my Procreate line art as a draft into an Adobe Illustrator file and began drawing the vector images using Illustrator.
I roughly divided the vector images that need to be drawn into two scenes—Scene 1 (normal) and Scene 2 (fireplace).
After finalizing the color scheme, I began changing the line art colors. Instead of using pure black, I used the low-saturation and dark-saturation colors of each vector image as their respective line art colors. I made the same adjustments to the shadows of each element.
Meanwhile, based on the latest feedback I received, I needed to reserve space for text information in each scene's interview section. Placing text information at the top or other locations in the animation might make it difficult for viewers to notice, reducing readability. In Scene 2, the large number of bricks I originally drew for decorative purposes occupied the space at the bottom of the image. So, I removed the large area of bricks under the oven in Scene 2. I then found that this not only improved the visual effect of the vector image but also enhanced the readability of the text information in Scene 2.
Therefore, I successfully completed the drawing of the vector image before the next offline lecture.
In addition to completing the line art I had drawn in Procreate, I also drew other elements to make the animation smoother, such as a wine bottle being poured.
The vector image rendering for Scene 2 was also successfully completed.
2.5 Animation Production
After completing the vector animation, I officially began working on the recipe animation.
However, before starting the main content, my partner and I held an online meeting to discuss the fonts we would use in the animation and the font combinations for the cover. My partner always has excellent taste in fonts; he found several fonts online and sent them to me, which I then downloaded and experimented with different combinations. After comparing four cover font combinations, we chose the first one. The main title font we used was Sauce Bolognese Demo - Regular, the subtitle used Century Gothic Paneuropean - Italic, and for the remaining text, we used Century Gothic Paneuropean - Thin.
Next, I started to make the animation. Our group had already finished detailed storyboards and a timing map, which helped me picture how each vector image would appear and how scenes would change. This made my animation work much more efficient. I created the animation step by step in order of the timeline using Adobe Illustrator.
Following Mr. Kannan’s advice, I added text labels and voiceover words at key parts so the information could be delivered clearly and effectively. I chose a handwritten font called Chalkboard because it looks more fun and matches the style of my animation. To tell the text labels and voiceover words apart, I used Chalkboard - Regular for labels and Chalkboard - Bold for the voiceover text.
At the beginning of the animation, I needed to make the effects of pouring flour, water and salt into a bowl one by one.
At first, I simply tilted the flour bag and water bottle, and then let the ingredients appear in the bowl.
But after getting feedback, I realized adding the falling effects of flour and water would make the animation richer and look better.
So I used the Puppet Pin Tool on the flour bag layer to make it deform when pouring, and also added a new layer for the falling flour.
For the water part, I added a layer for pouring water, and used a moving mask alone to create the slow emptying effect of the water
According to the storyboard, the first scene of Scene 2 is about preheating the oven.
At first, I used what I learned from Exercise 4. I only added scale keyframes to the flame vector image to make the flame appear. However, this part was very short, so the flame looked like it popped out suddenly. In the next feedback, Mr. Kannan suggested creating a separate "fire light" layer or making the flame rising process clearer to improve the visual effect. To make better flame animation, my partner and I searched YouTube for tutorials about how to make burning flame effects in Adobe After Effects. I found useful guides and improved my flame design.
First, I added the Wave Warp effect to the flame layer and adjusted the Wave Height and Wave Width to make the flame move and shake naturally. Then I added the Glow effect to both flame layers. I set a much higher Glow Threshold for the upper flame layer, so the light flickers along with the burning fire. Finally, I used scale keyframes on both flame layers. Different from before, I made the flame grow slowly step by step until it reached the final size. After these changes, the burning flame effect looked much better.
The last scene of the animation shows the bread fully baked in the oven. I wanted to create a good, cartoon-style glowing effect to highlight the final step of making the bread. I drew lights inside the oven in two different colors on two separate layers. First, I used an oval mask layer with position and scale keyframes to make the light shine out from the oven. Then I used opacity keyframes to make the two oven-light layers flash one after the other.
I was very happy with the final effect, and by then, I had finished making the main part of the animation.
It should be mentioned that the vector images of the tablecloth and plates used in the ending part were drawn by my partner.
Next, I started to make the ending part of the animation. I created a new Adobe After Effects file alone to produce the ending animation. Since this part is designed to show a nice closing visual effect, in the new file, I first arranged the vector images to form the closing scene I wanted and set position keyframes, and then began to make the transition animation effects.
After placing the vector images, I sent a screenshot to my partner and got his approval.
Since I had planned ahead to use a page-flip transition effect between the main part, the opening, and the ending of the animation, I wanted to show the finished food in the center of the screen first, and then switch to the closing scene where the food is placed on the table. I finished making this part of the animation successfully, and the effect looks great.
At the end of the animation, I drew some "smoke for the food aroma". I used the mask skill I had learned before. With a separate oval mask that has position keyframes and scale keyframes, I made the effect of aroma rising from the food.
Then I let the final words of the animation pop up after the aroma dissipates.
Finally, I rendered and exported the animation videos of the opening, main content and ending parts separately. Then I combined them, added transition effects, and finished the complete final animation.
After that, I shared the full animation with my partner via Google Drive. He will add the voice-over, and then we will submit our group's final work.
3. FINAL SUBMISSION
- YouTube Link Here:
4. FEEDBACK
WEEK 5:
1. We'd better add a cover and an ending to enrich the visual effects of the video and make it look more complete.
2. Secondly, for steps that show the passage of time, such as "let the dough sit overnight to ferment" or "bake in the oven for a certain period of time", we can use changes in the environment color to show the transition from day to night. Meanwhile, the moving time on a clock can also show time passing. This helps viewers understand the animation more easily and quickly.
3. Finally, our teacher reminded us that in the later animation production, making some elements move with a rhythmic speed change can greatly improve the viewing experience. For example, in the "chopping vegetables" part, do not just let the draft move across the screen at a steady speed. Instead, let it pause briefly in front of the cutting board, then move quickly to chop the vegetables into small pieces
WEEK 6:
1. We can properly add text information in the animation to help convey information. For example, add text labels next to the ingredients at the beginning, so viewers can know what each ingredient is more quickly. Meanwhile, we can also add voice-overs below to explain the specific content of each step.
2. The voice-overs should be placed in an easy-to-read position
WEEK 7:
1. For the first step of the recipe, adding extra effect layers showing flour and water being poured into the bowl will make the animation more vivid.
2. In the first frame of Scene 2 in the animation, fire is an important element for the "preheat the oven" step. We can create a separate "fire light" layer or make the burning fire more obvious to improve the visual effect of this step.
3. Add motion blur effects properly.
4. A rotating clock effect can be added in the bread-baking step to show the passage of time.
5. Finally, the light shining from the oven can be made with two light layers of different colors
5. REFLECTION
Experience:
Through the Final Project, I participated in a two-person team and experienced the entire creative process in full, from early planning, material drawing, animation production, video integration, to final submission. Meanwhile, my comprehensive abilities have been greatly improved.
At the initial stage of the project, my partner Tawfiq and I discussed together and decided to base our creation on my Instructable Poster. We got familiar with the content of the poster and recipe video, and made a task execution plan for our group. Starting from Week 5, we officially began the final production. I was responsible for drawing the storyboard with Procreate. During offline classes, we presented our plan to the tutor and received feedback. According to the tutor's suggestions, I further revised the storyboard. After that, my partner made the Timing Map and Animatic. At the same time, I drew vector images with Adobe Illustrator to lay a solid foundation for the subsequent production. Before making the animation, my partner and I confirmed the color matching, font selection, voice-over, and other details through several group meetings. Sufficient communication ensured great teamwork.
I took the lead in the later animation production, while my partner was in charge of the post-production voice-over. Based on the completed storyboard and Timing Map, I produced the animation in After Effects (AE). Combined with weekly feedback, I kept optimizing details: improved the dynamic deformation and mask effects of pouring flour and water; learned tutorials on YouTube by myself, and optimized the fireplace burning animation with wave distortion and glow effects; added motion blur to chopped vegetables; created the oven light effect with two layers of lights in different colors and mask opacity keyframes, and hand-painted aroma smoke to create an atmospheric ending. The materials for tablecloths and plates for the end were drawn with the help of my partner. I independently rendered the opening, main content, and ending parts separately, then spliced them and added transition effects. Finally, my partner dubbed the full video, and we submitted the finished work. With a clear division of labor and mutual help throughout the process, I deeply participated in the core creation and multiple rounds of revision.
Observation:
During the project, I found that reasonable division of labor and early planning are the keys to improving creative efficiency. We finished the storyboard, timing schedule, and animatic in advance, clarifying the duration of each frame, the appearance order of elements, and scene transitions. This made the follow-up animation production well-organized, avoiding blind creation and repeated rework. I was in charge of image drawing and animation operation, while my partner managed the rhythm, made the animatic, and recorded the voice-over. Our complementary division of labor kept the project progressing steadily. In addition, multiple rounds of feedback from the tutor were indispensable for our team. That’s why I kept up with the progress, showed our group’s work to the tutor, and asked for suggestions every time. I believe these professional comments effectively helped me find shortcomings of the work and make improvements to pursue perfection.
I also noticed that tool selection and software skills play a major role in the visual presentation. Procreate is not suitable for making vector materials for AE; only switching to Illustrator can ensure high-definition image quality. Simple scale keyframes cannot create smooth flame and pouring effects, but combining masks, wave distortion, glow effects, motion blur, and other functions can produce vivid animations.
Findings:
The core of animation creation lies in early preparation and later optimization. Complete and clear storyboards as well as accurate timing planning, are the foundation of efficient production. A high-quality finished product cannot be made on the first try. From picture composition, color matching, and movement rhythm to special effect details, repeated revisions based on professional suggestions are required. We need to add necessary layers and optimize visual effects continuously, so as to balance excellent visuals and clear expression of recipe information. For example, when facing problems such as blurry materials and stiff flame movements, I adjusted methods and skills in a timely manner, searched for useful tutorials, and improved my technical abilities. My software operation skills and problem-solving abilities have been enhanced significantly as a result.
Giving full play to respective advantages and coordinating working time are also vital for teamwork. I am good at drawing and creating good visual effects, so I was responsible for vector drawing and animation production. Meanwhile, my partner left for a few days due to festival celebrations, but he quickly got back to work after the holiday and efficiently finished his part. Moreover, good team communication is essential. Timely sharing of progress and ideas is the secret of our efficient cooperation, which was also suggested by Mr. Kannan.
Comments
Post a Comment