15/02/2026 - 07/03/2026 / Week 6 - Week 7
Gabriella Grace
Christyanti / 0371915
Information Design / Creative Media / School
of design
Final Project
1. Instructions
2. Lectures
3. Process Work
4. Final Output
5. Feedback
6. Reflection
1. INSTRUCTIONS
For our final project, we were asked to create an animated video based on the poster we previously designed. We could either work individually or in pairs. The goal is to transform the static poster into a motion design piece while keeping the original concept, message, and visual style, using animation to make the design more engaging and visually dynamic.
Motion Graphic Animation
StoryBoard
We created our storyboard in Procreate, starting by planning the sequence from the opening scene to the ending. After discussing the ideas together as a team, we organized the flow of the animation. Once the storyboard was ready, we consulted Sir Martin for feedback. He suggested that we keep the animation simple first, so the focus would be on the clarity of the concept and movement before developing it further.
After creating the storyboard, we made a moodboard. This moodboard helped us communicate the overall style we wanted to use, including colors, fonts, and visual references. It served as a guide to ensure that our design choices were consistent and aligned with the concept of the cooking tutorial animation.
We selected a video from Pasta Grannies that demonstrates the process of making pesto gnocchi. The video clearly shows the ingredients and the step-by-step cooking process, which helped us better understand the flow of the recipe. This made it easier for us to visualize the scenes and translate them into our design project.
This infographic poster by Jycee is the reference we used for our project. We chose it because the cooking steps are presented clearly and the layout is structured in an easy-to-follow way. The organized design helps us understand how the information flows, which inspired us when planning and designing our own cooking tutorial infographic.
Fig 1.1 Jy's Infographic Gnocchi Pesto
The animation style references we used are Cooking Mama making gnocchi and the curry recipe example provided by Sir Martin. We chose this style because it presents the cooking process in a clear and playful way. This approach helps visualize each step of making gnocchi while keeping the animation engaging and suitable for our cooking tutorial concept.
Reference Style Vector
For the vector illustration style, Jycee used several references. Some elements, such as making and chopping the dough, were inspired by Cooking Mama, while the rest of the vector style was developed in her own way. This allowed Jycee to add a more personal approach and create a unique visual identity.
After further discussion, Jycee and I decided to split our tasks for this project. Jycee focused on vector illustrations, while I handled the After Effects. Even though our work is divided between AI and AE, we still help each other, with the AE and AI. We also hold regular Google Meet sessions since I had returned to Indonesia, which helps keep our collaboration smooth despite the distance.
There were also times when I needed assistance. For instance, one of my After Effects files encountered issues where several Illustrator elements became mixed up or reversed during animation. Jycee helped by opening the file, carefully identifying what could be adjusted, and troubleshooting the issue step by step. She reviewed everything thoroughly to locate the source of the problem before making corrections.
Google drive links:
Adobe Illustration Progress
Adobe Illustration Part 1
After our discussion, Jycee began working in Adobe Illustrator. She divided the work into three parts to prevent the files from becoming too heavy, as there were 36 storyboard frames in total. Her progress included creating the introduction and ingredient sections, which served as the foundation for the animation. She used the Pen Tool to create shapes and colors, mimicking real objects to achieve a more realistic look.
The main focus of Part 1 was the potatoes. Jycee created three red potatoes using the Pen Tool.
Next, she designed the cooking scene, including the timer, cooking pot, fire, and stove. She separated elements such as the pot lid, timer hand, and fire so they could be animated independently in After Effects.
She then worked on the peeling and smashed potato scenes. For the peeling sequence, she followed the reference provided by Sir Martin. For the smashed potatoes, she used a high-angle view to make the composition more visually appealing. She also designed the potato masher and prepared it as a separate element for animation.
Finally, Jycee created the initial gnocchi dough scene, which continues into the second file. She designed the wooden board using basic shapes and added details with the Pen Tool, along with shaping the flour to prepare it for animation.
Adobe Illustration Part 2
In Part 2, Jycee continued with the dough-making process and pesto preparation. She reused several elements from the previous section and adjusted them using the Pen Tool and basic shapes to fit the new composition.
She also separated elements into different layers for smoother animation. For example, she divided the salt into smaller pieces to create more natural movement. Other elements, such as oil and water, were also separated for easier animation in After Effects.
For the dough mixing scene, Jycee faced some difficulty creating the hands. She used Cooking Mama as a reference and slightly darkened the skin tone so the hands would stand out from the wooden board. She created two hands—one holding the board and the other mixing the dough—to make the action clearer and more natural.
In the gnocchi shaping section, Jycee illustrated the cutting and shaping process. She created three stages: raw dough, partially shaped gnocchi, and the final form. All elements were produced using the Pen Tool.
She then designed the strainer scene, separating the water into different components for animation. For the pesto-making section, she illustrated a mortar and pestle to give a traditional feel. This part took the longest, as she had to duplicate and arrange multiple ingredients such as basil leaves, pine nuts, and parmesan, while separating them individually for animation control.
In the final part, Jycee created the concluding scenes of the animation. She illustrated the pesto being poured over the gnocchi using the Pen Tool and basic shapes.
She then designed the garnishing scene by reusing the basil leaf element and adjusting its placement for the final dish composition.
For the ending, Jycee and I planned an animatic-style sequence inspired by a childhood game. In this sequence, the dish is gradually eaten, leaving bite marks. Jycee created four bite marks using shapes to produce a playful and nostalgic effect.
During consultations, Jycee made several revisions based on feedback. Some elements were initially positioned outside the artboard, causing issues when imported into After Effects. She adjusted all elements to fit within the artboard to avoid cropping and alignment problems.
For the flour in the dough-making scene, Sir Martin noted that the shape looked messy. To improve this, Jycee created two flour layers—a mound and a bowl shape—and added a pointing finger to suggest forming the flour into a well. She also refined the flour packaging for a cleaner appearance.
The pointing finger was created by modifying an existing hand model using the Pen Tool. This required careful attention to anatomy and proportions to maintain consistency with the overall style..
Another revision involved the dough-cutting scene, which initially looked unnatural. Based on feedback, Jycee properly divided the dough into slices using the Pen Tool and the Minus function, making the cutting action more realistic.
I also requested an empty mortar design, which Jycee created by separating the background layers to give a hollow appearance, allowing ingredients to be animated later.
Additionally, I asked for adjustments to the pesto sauce so it would have a more rounded tip with a slight swiggle effect, which Jycee refined accordingly.
Finally, Sir Martin suggested improving the stop-motion ending. Instead of having both the gnocchi and plate being eaten simultaneously, Jycee separated the elements so the gnocchi is eaten first, followed by the plate, resulting in a smoother and more natural animation.
Click here to access Adobe Illustrator Files
Adobe After Effects Progress
Overview
For my part of the project, I worked on the animation in Adobe After Effects. Similar to Jycee’s workflow in Adobe Illustrator, my work was also divided into three parts to match the structure of the storyboard and to keep the files organized and manageable.
I mainly followed the storyboard that we had prepared earlier, using it as the foundation for timing, transitions, and scene arrangement. Only minor adjustments were made where necessary to improve the flow of the animation.
After Effects Part 1
When Jycee sent me the first Illustrator file, I immediately began testing and preparing the animation setup in After Effects.
Font Selection
Before starting the animation, I first explored and selected suitable fonts for the title and ingredient sections. The fonts were chosen from Google Fonts to match the playful and cooking-themed style of the project:
-
Title font: Nothing You Could Do (Regular)
-
Section title ("Ingredients"): Indie Flower
-
Ingredient text: Exotc350 Bd BT Demi-Bold
These fonts were selected to create a clear visual hierarchy while maintaining a consistent and engaging aesthetic.
INITIAL LAYOUT AND PANELS
After finalizing the fonts, I created a rough layout of Part 1 in After Effects based on Jycee’s Illustrator assets. The animation was structured into panels following the storyboard sequence:
-
Panel 1: Title screen displaying “Pesto Gnocchi”
-
Panel 2: Section title “Ingredients”
-
Panel 3: Ingredients list (garlic, olive oil, parmesan, and salt), with corresponding illustrations placed above the text
-
Panel 4: Additional ingredients (flour, pine nuts, water, basil leaves, and potatoes), also arranged with illustrations on top and text below
-
Panel 5: Title card “How to Make Gnocchi”
Each panel was designed to clearly present information while maintaining visual consistency with the illustrated assets.
Panel 6
For the cooking section, I made a slight adjustment from the storyboard. Instead of separating the boiling process into multiple panels, I combined everything into a single panel for better flow.
This panel includes:
-
Stove and fire
-
Cooking pot and lid
-
Potatoes
-
Timer
-
Steam/smoke effects
This approach helped simplify the sequence while keeping the visual information clear. Basic animation was also tested in this panel, which was further refined later in the process.
Panels 7–8
The next panels focused on the preparation of the potatoes:
-
Panel 7:
-
Three unpeeled potatoes
-
Three peeled potatoes
-
Potato peels
-
-
Panel 8:
-
A mortar
-
Peeled potatoes in a bowl
-
Mashed potato effects
-
Potato masher
-
From this point onward, the animation relied more on visuals, with little to no text, allowing the actions to communicate the process.
Panel 9
The last panel of Part 1 also slightly differs from the storyboard. While the original storyboard spreads this sequence across multiple panels, I combined it into a single scene.
This panel includes:
-
A wooden board/tray
-
A flour bag
-
A pile of flour
This marks the transition point to the next stage of the animation, where the dough-making process begins.
ANIMATION DEVELOPMENT
After completing the initial layout and panel arrangement, I proceeded to develop the rough animation for Part 1. This stage focused on applying basic motion, transitions, and timing to bring Jycee’s illustrations to life while still maintaining a rough draft approach.
Title Animation (Panel 1)
To begin, I enhanced the title screen (“Pesto Gnocchi”) by introducing a pesto sauce animation. I reused a pesto splatter asset from Part 2 and modified its color slightly to better match the overall palette.
I animated the pesto sauce falling downward and used a null object to guide and control its movement. As the pesto landed, it specifically interacted with the letter “O” in both “Pesto” and “Gnocchi”.
To create the effect of the letters being “stained” by the sauce, I duplicated the letter “O” and placed it directly on top of the original. I then timed its appearance so it only became visible when the pesto covered the letter. This created the illusion of a color transformation without using opacity or blending effects.
For the title text animation, I applied a Fade In Per Character preset (Range Selector), allowing the text to appear smoothly instead of abruptly.
Transition to Ingredients (Panel 2)
The transition from the title to the ingredients panel was designed to follow the motion of the falling pesto sauce. The camera effectively moves downward, guiding the viewer into the next section.
In this panel, the “Ingredients” title was animated using the same Fade In Per Character effect to maintain consistency.
Additionally, I created a background gradient transitioning from a light cream color to a soft baby blue. This was initially challenging, as I was unfamiliar with creating gradients in After Effects, but I learned the technique through tutorials. Once completed, I reused this gradient across multiple panels for visual consistency.
Ingredients Animation (Panels 3–4)
For the ingredient panels, I focused on simple motion to establish timing and placement.
-
The ingredient illustrations (e.g., garlic, olive oil, parmesan, and salt) were animated using basic position keyframes, making them appear to rise upward and settle into place.
-
The movement was intentionally simple, with minimal physics, as this was still a rough draft.
-
I applied Easy Ease to the keyframes to smooth out the motion.
To reveal the ingredient names, I used a Typewriter effect, animating the text word by word. Each ingredient appears sequentially (garlic → olive oil → parmesan → salt), creating a clear and readable flow.
For transitions within the ingredient section, I animated the panels to slide horizontally. Since the ingredients appeared from left to right, I matched this direction by moving the scene accordingly, creating a continuous flow between items.
In the next ingredient panel (flour, pine nuts, water, basil, and potato), I reused the same animation approach. However, due to the rough stage, some elements (such as pine nuts and basil) were grouped in single layers, resulting in less realistic motion, such as objects appearing to “float” or ignore gravity.
Transition to Cooking Section (Panels 4–5)
The transition into the “How to Make Gnocchi” section was driven by the potato animation.
After appearing, the potato rolls across the screen, passing through the ingredient text and continuing into the next panel. The rolling motion also acts as a visual guide into the next section.
The “How to Make Gnocchi” title appears as the potato continues rolling along the bottom of the frame, ensuring that it does not obstruct the text.
Cooking Animation (Panel 6)
In the cooking panel, I introduced several layered animations:
-
The potato drops into the pot, initiating the scene
-
The pot lid closes using position animation
-
The lid then rattles slightly using rotation (small angle shifts such as -2° to +2° repeatedly)
-
The fire is animated using scale, appearing when activated and disappearing afterward
-
Steam is added using scale and opacity, growing larger and fading out as the lid opens
These combined elements helped simulate the boiling process, even in a simplified form.
Peeling Transition (Panel 7)
After cooking, the potatoes transition into the peeling stage:
-
Unpeeled potatoes appear first
-
Potato peels then appear below them
-
The potatoes quickly switch to a peeled version through timing (frame replacement rather than morphing)
-
The peeled potatoes move upward while the peels move downward, separating the elements visually
This creates a clean transition into the next step.
Mashing Scene (Panel 8)
In this panel, I animated the preparation process using the mortar and pestle:
-
The mortar appears first in an empty state
-
Three peeled potatoes fall into it one by one from different directions
-
Top-left
-
Top-right
-
Slightly right of center
-
-
The falling effect was created using position and scale, making the potatoes appear to drop from above
The potato masher is then introduced:
-
Animated using position and scale to simulate depth and perspective
-
Performs a repeated smashing motion (approximately three times)
-
After the action, the masher exits the frame, and the mortar shifts aside to prepare for the next transition
Final Panel of Part 1 (Panel 9)
The final panel introduces the dough preparation setup:
-
A wooden tray drops into the scene using position and scale
-
The flour box appears, scaling from small to normal size to simulate depth
-
A pouring flour effect is created using a separate layer
For the flour animation:
-
The flour pile expands using scale, with the anchor point adjusted to make it appear as if it is pouring out
-
A dedicated “flour pour” layer enhances the pouring effect
-
The flour box tilts and retracts after pouring, completing the action
FINAL REFINEMENTS AND POLISHED ANIMATION
After completing the rough animation, I moved on to refining and polishing Part 1. This stage focused on improving timing, motion realism, visual consistency, and overall presentation, while also incorporating feedback and making adjustments based on time constraints.
Timing and Pacing Adjustments
Due to the requirement of keeping the animation within approximately one minute, I refined the timing across several panels:
-
The title animation (“Pesto Gnocchi”) was sped up so it appears more quickly
-
At the same time, I allowed the title to remain on screen slightly longer after appearing, giving the audience enough time to read it
-
Similar adjustments were applied to the “Ingredients” title, where the animation is faster but followed by a short pause
These changes helped balance readability with overall pacing.
Background and Color Refinements
I also revised the color palette to create a more cohesive and visually appealing look:
-
The original light green background was adjusted to a warmer yellow-green tone, giving it a softer and more natural appearance
-
The second panel background was modified to a lighter and more muted version of the same color, ensuring consistency while maintaining variation
-
The “Ingredients” text color was changed from black to a dark, muted green tone, making it blend better with the overall theme
Additionally, I standardized the background colors across Panels 3 and 4 so that there were no abrupt color changes between scenes.
Layout and Composition Adjustments
To improve visual clarity and professionalism, I refined the layout of all panels:
-
I used the safe margins (title/action safe guides) in After Effects to ensure that important text and visuals remained within visible boundaries
-
All elements were repositioned accordingly, while still allowing certain elements to extend beyond the safe area when needed for visual emphasis
This ensured that the composition remained clean and readable across different screen formats.
Improved Ingredient Animation (Panels 3–4)
The ingredient animation was one of the most significantly improved sections.
In the rough version, the ingredients simply floated upward. In the refined version, I adjusted the motion using more detailed keyframing:
-
Each object now follows a three-point motion (start → midpoint → endpoint)
-
The movement begins quickly, then slows down as it approaches the peak, simulating resistance against gravity
-
When falling, the object briefly slows before accelerating downward, creating a more natural motion
This was achieved by carefully positioning keyframes and adjusting them with Easy Ease, particularly shifting the timing of midpoints to control acceleration and deceleration.
Rotation and Natural Motion
To enhance realism, I added subtle rotation to each ingredient:
-
Each object rotates at a slightly different angle to create variation
-
The rotation values were intentionally varied across items to avoid uniform movement
-
This creates the impression that each object has its own weight and balance
Bounce and Impact Details
After landing, most objects were given secondary motion:
-
Garlic: lands on one side, bounces slightly, then tilts
-
Olive oil bottle: bounces on one edge, then settles upright
-
Parmesan and flour: use scale squash and stretch to simulate softness
-
Salt: only bounces normally
These small details helped make the animation feel more dynamic and physically believable.
Layer Separation and Physics Improvements
In the refined version, I improved the realism by separating previously grouped elements:
-
Pine nuts were divided into multiple layers (approximately eight), allowing each piece to fall independently
-
Each piece was animated with different timing and rotation, creating a more natural falling effect
-
Basil leaves were also adjusted individually instead of moving as a single object
This eliminated the unrealistic “grouped” movement from the rough animation.
Special Motion for Basil Leaves
The basil leaves were treated differently due to their lighter weight:
-
Instead of a standard up-and-down motion, they follow a curved, loop-like path
-
The movement resembles a stretched oval shape, simulating air resistance
-
The leaves slow down at the top and accelerate as they fall
-
After landing, they slide slightly before stopping smoothly
This variation helps distinguish them from heavier ingredients.
Water Animation Enhancement
For the water element:
-
I added an internal liquid motion effect inside the container
-
During movement, the water shifts slightly to suggest motion but does not spill
-
Rotation was intentionally avoided to maintain realism
This added subtle detail without overcomplicating the animation.
Potato Interaction and Typography Adjustment
In the earlier version, the potato would bounce and immediately roll through the “potato” text, which felt unnatural. Based on feedback, I revised this interaction:
-
The potatoes now land first before any movement occurs, improving realism
-
When the third potato lands, it interacts with the text instead of passing through it
-
The word “potato” is animated like a trapdoor, with the left side (letter “P”) acting as the anchor point
-
The text tilts downward, allowing the potatoes to roll off naturally
-
After tilting, the text swings slightly, adding secondary motion
Transition and Color Revisions
Originally, the transition used a sauce-like effect with a color that matched the earlier palette. However, due to the updated background colors, I revised this:
-
The transition effect was changed to a blue liquid flow, resembling water
-
Background colors for the panels were unified into a more saturated blue tone, slightly darker than the earlier baby blue
-
Panels were visually combined during transition to create smoother continuity
Panel Combination and Camera Adjustment
Another key feedback point was the transition between the “How to Make Gnocchi” section and the cooking scene:
-
Previously, the camera followed the potato falling downward, which caused confusion
-
To resolve this, I combined two panels into a single composition
-
Top half: “How to Make Gnocchi”
-
Bottom half: cooking scene (pot)
-
The camera now performs a controlled zoom-in toward the pot instead of following the potato directly
This creates a clearer visual hierarchy and smoother transition.
Potato Falling Animation (Cooking Scene)
The potato animation was further refined:
-
Each potato falls with slight timing differences instead of appearing simultaneously
-
Small gaps were added between each potato to avoid clustering
-
Subtle rotation variations were introduced to make the motion more natural
Fire, Timer, and Steam Enhancements
Several improvements were made to the cooking elements:
-
Fire animation:
-
Added subtle scale fluctuations to simulate flickering
-
Used the Puppet Pin Tool to create more organic movement
-
Timer animation:
-
Set to 15 minutes to match the cooking process
-
The clock hand rotates from the center anchor point
-
Added text (“15 minutes”) using the Menlo font with a typewriter effect
-
Steam animation:
-
Enhanced using scale and Puppet Pin Tool
-
Movement adjusted to feel more fluid and natural
-
Fades out smoothly when the lid opens
Additionally:
-
The pot, lid, and timer were animated using null objects to control their entrance and exit smoothly
Peeling Animation Using Linear Wipe
One of the more complex refinements involved the potato peeling sequence:
-
The peeled potato layer was placed beneath the unpeeled version
-
A Linear Wipe effect was applied to gradually reveal the peeled surface
-
The wipe direction was aligned with the shape of the potato skin
At the same time:
-
The potato peel layer uses a reverse Linear Wipe, gradually appearing as it separates
-
Peeled potatoes move upward, while peels fall downward
-
Once fully separated, both elements move independently
This creates a convincing peeling illusion without requiring complex morphing.
Mashing Scene Adjustment
In this section, a missing visual element was restored:
-
The mashed potato effect was reintroduced
-
A scale squash effect was added when the masher presses down
-
The mashed potato slightly expands back after impact, enhancing the sense of pressure
Additionally:
-
A subtle rotation was applied when the mortar exits the frame
-
This small detail prevents the movement from appearing too rigid
Final Panel (Flour Scene) Revision
Based on feedback, the flour visual was redesigned:
-
The original flour asset was replaced with a cleaner vector from an earlier panel
-
The flour bag now enters from the bottom-left corner, instead of scaling from afar
-
It tilts naturally and pours flour from the side
For the flour animation:
-
The anchor point was adjusted to the bottom to create a more realistic pouring effect
-
The flour pile expands upward using scale
Additionally:
-
A new flour-pour asset was used (adapted from another scene) for a more natural look
-
The pouring layer was positioned behind the flour pile, allowing it to be hidden smoothly after use
After Effects Part 2
For Part 2, the focus was mainly on refining and polishing the animation, rather than documenting every step of the process. This section highlights the key animation techniques and improvements applied to enhance realism, smoothness, and visual storytelling.
Dough Formation and Mixing
After the flour was placed on the wooden surface, an illustration of a hand (provided by Jycee) was animated to move in a circular motion using position keyframes. This creates the illusion of the finger digging into the flour pile and forming a bowl shape.
To enhance this effect, the flour was separated into two layers:
-
Front layer: shaped like a curved surface to simulate a bowl
-
Back layer: the original flat flour pile
By placing the front layer above other elements, any ingredients added into the “bowl” appear partially hidden, creating a subtle 3D illusion.
Pouring Animations and Liquid Effects
For pouring sequences (olive oil and water), separate animations were created using rotation and position to tilt the containers naturally. The liquids themselves were animated using Linear Wipe effects:
-
A first wipe reveals the liquid as it flows out of the container
-
A second wipe removes it gradually from top to bottom, maintaining realistic downward motion
Additional refinements were applied for realism:
-
Olive oil gradually changes to a darker green as it blends into the mashed potatoes
-
Water is animated with lower opacity, then fades out to simulate absorption
-
A darker “wet potato” layer appears to represent the mixture after liquid absorption
Salt and Ingredient Integration
The salt animation was more complex due to the number of layers involved. Each shake of the salt shaker releases multiple particles, which fall individually and fade into the mixture.
This fading effect gives the impression that the salt is dissolving into the dough rather than simply sitting on top.
Dough Mixing and Transformation
Hand animations were used to transition the mixture into dough:
- As the hand passes over the mixture, the texture transitions into a finished dough
- The right hand moves in a flattened oval motion to simulate mixing
Both hands then shift into position and perform an up-and-down motion to simulate rolling. During this stage:
-
The dough stretches into a thinner, elongated form
-
A subtle asset swap is used once the dough reaches the correct shape
Cutting and Transition to Close-Up
The slicing of the dough was enhanced based on feedback from Sir Martin. Instead of relying solely on visual effects, the dough pieces were animated to physically separate and fall.
The animation then transitions into a close-up:
-
One dough piece is tracked as it falls
-
The camera follows this piece downward
-
A smooth opacity transition swaps it into a new shape as it lands on a fork
This creates a seamless transformation between stages.
Gnocchi Shaping Sequence
The shaping of the gnocchi on the fork was achieved using a combination of:
-
Linear wipe
-
Opacity transitions
-
Multiple illustrated stages (raw dough → almost gnocchi → final gnocchi)
As the dough rolls down the fork, it gradually transforms into its final shape. This sequence creates a strong visual illusion of the gnocchi being formed in real time and was one of the most successful parts of the animation.
Additional details include:
-
Multiple gnocchi pieces interacting with each other
-
Subtle positional movement to simulate weight and gravity
Boiling and Straining
The boiling sequence reused earlier animation assets (pot, steam, timer) for consistency.
The straining process was animated using a curved motion path:
-
The strainer enters the pot
-
Hidden gnocchi layers are revealed using opacity
-
Water drips are looped using repeated position animations
This creates the illusion of scooping and draining without requiring complex simulations.
Ingredients for the pesto were animated individually:
-
Basil leaves follow curved motion paths with rotation for a natural falling effect
-
Pine nuts are animated with both position and rotation
-
The filling level inside the bowl gradually rises
Cheese grating was achieved by:
-
Individual cheese particles appearing with Linear Wipe and falling separately
-
Repeated up-and-down zigzag motion of the cheese block
The pestle animation uses simple vertical motion, with each impact triggering:
-
A decrease in the filling layer
-
The appearance of the final pesto texture through scaling
After Effects Part 3
The final dish assembly uses layered scaling and positioning:
-
Plate appears first
-
Gnocchi and pesto follow
-
Sauce is revealed using scaling from the anchor point to simulate pouring
A final garnish (basil leaf) is animated with a looping motion before settling on top.
For the ending:
-
A bite effect is created using masks and slight position adjustments
-
The plate is also humorously “eaten” as a stylistic choice
-
The text “The End” appears using the same character-based fade-in effect used earlier, ensuring visual consistency
Click here to access Adobe After Effects File
Sound Effect And Background Music
After consulting with Sir Martin, we were advised to incorporate sound effects and background music into our project. Since Gaby had already contributed significantly to the After Effects work, I took responsibility for handling the audio elements. I worked directly in After Effects to integrate the sound effects and background music, as it allowed for a more efficient and seamless editing process.
Before starting with the sound effects, I sourced free audio from the website Freesound, which had previously been recommended by Sir Martin.
I downloaded several sound effects that I needed and organized them into a single file. I specifically selected sounds that matched each scene to ensure they aligned well with the visuals and enhanced the overall experience.
I imported all the audio files into the After Effects project and began synchronizing them with the timeline, carefully matching each sound effect to the appropriate timing of the scenes.
I began working on the first segment, from 0 to 10 seconds. In this scene, I initially used a sauce sound effect, followed by subtle “tap” sounds to represent the ingredients. I also adjusted the audio waveform to ensure the sound was not too harsh, balancing the levels carefully for a smoother and more controlled output.
From 12 to 17 seconds, the scene mainly features boiling and cooking sound effects, along with a potato peeling sound. This section required a lot of adjustments, as the timing had to be very precise especially to match elements like the timer and ensure everything synced properly with the visuals.
For the potato smashing scene, I used a punch and splat sound effect to emphasize the impact, making it feel more dynamic and expressive. After that, during the dough-making process, I incorporated sound effects such as pouring flour, oil, water, and salt. I also found a kneading dough sound effect, which realistically captures the texture and movement of the kneading process.
For the pesto sauce preparation, the sound effects were quite similar to those used in the potato smashing and dough-making scenes. However, since the ingredients are pounded twice, I layered the splat sound effect twice to match the action.
I also combined elements from the dough-making sounds, as the scene involves pouring ingredients and then crushing them together into pesto sauce, creating a more cohesive and realistic audio experience.
For the final sound effect in the ending scene, I used a biting sound. This part was quite challenging because the bites happen quickly and repeatedly, so it was a bit difficult to synchronize them precisely. However, I managed to achieve a result that I’m satisfied with. There are also some repeated sound effects in certain parts, as the processes shown are similar, which helps maintain consistency throughout the sequence.
4. FINAL OUTPUT
5. FEEDBACK
Feedback on the First Consultation
During our first consultation with Sir Martin, we presented our storyboard and received overall positive feedback on our progress. However, he pointed out an issue with the potato transition. Initially, the potato fell from the left side of the panel, which caused confusion. He suggested simplifying the motion by having the potato fall directly in the middle instead of rolling in from the side.
Feedback on the Second Consultation
For the second consultation, progress was still limited as only Jycee had completed the Adobe Illustrator file, while the After Effects composition had not yet been started. Sir Martin advised us to prepare a rough composition by Wednesday so that he could better evaluate the overall timing and transitions of the animation.
Feedback on the Third Consultation
By the third consultation, we had a rough version of the animation. Sir Martin noted that the potato falling straight through the “potato” text felt unnatural. He recommended adding a pause where the potato lands briefly before rolling off.
Additionally, he commented on the flour box design, which he found unsuitable. As a solution, we decided to reuse the flour asset from the ingredients panel (panel 4) for consistency.
There were also a few incomplete elements at this stage. The smashed potato effect had not been implemented yet due to the potato being out of frame in the Illustrator file, causing it to be clipped. Furthermore, Sir Martin pointed out that the dough-cutting scene lacked clarity, as it did not show the dough being divided into multiple pieces. He advised us to include this detail to improve the visual storytelling.
Feedback on the Fourth Consultation
During the fourth consultation, Sir Martin emphasized improving the timing, as some text transitions were too fast. He also suggested that the potato should fall behind the “How to Make Gnocchi” text, while the title itself should float upward for a more dynamic effect.
In addition, the potato falling sequence needed to transition smoothly into the sixth panel. For the dough sequence, he recommended a clearer transition by having the cut dough pieces lead into the next scene, specifically showing them landing on a fork before being shaped into gnocchi.
Feedback on the Fifth Consultation
In our final consultation, Sir Martin found the transition between the fifth and sixth panels confusing, particularly due to the camera movement. He was concerned that it might not be clear to the audience. To resolve this, he suggested simplifying the transition by scaling down panels five and six as the potato falls.
He also recommended adding sound effects to enhance the overall animation. As the workload for After Effects had been quite heavy, Jycee stepped in to assist with the sound design, ensuring that the final output was more complete and engaging.
6. REFLECTIONS
Overall, this project was a valuable experience in both technical skills and teamwork. Throughout the process of creating the kinetic typography and animation, I was able to deepen my understanding of Adobe After Effects, especially in terms of using keyframes, position, scale, opacity, and effects such as Linear Wipe to create smooth and believable animations.
One of the key things I learned was how important planning is. By following the storyboard as a guide, the workflow became more organized and efficient. However, I also realized that not everything in the storyboard works perfectly when translated into animation. This required me to make adjustments, such as combining panels or simplifying certain scenes, in order to improve the overall flow and clarity.
Another important learning point was the use of layering to create depth and realism. For example, separating elements into front and back layers helped simulate a 3D effect, while opacity changes allowed different ingredients to blend naturally. Small details, such as color changes and timing of animations, also contributed significantly to making the visuals feel more realistic.
I also gained experience in problem-solving. Some parts of the animation, such as the gnocchi shaping and camera-follow sequence, were quite challenging and required multiple attempts before achieving a smooth result. Through this process, I learned how to experiment with different techniques and refine my work based on trial and error.
Feedback from Sir Martin played an important role in improving the project. His suggestions, such as making the dough pieces separate more clearly and focusing on a specific piece during the transition, helped enhance the storytelling and visual clarity of the animation. This showed me the importance of being open to feedback and continuously improving the work.
In terms of teamwork, dividing tasks clearly between illustration and animation helped make the workflow more efficient. Communication was also important to ensure that assets created in Adobe Illustrator could be effectively used and animated in After Effects.
In conclusion, this project not only improved my technical skills in animation but also strengthened my ability to plan, adapt, and collaborate. If I were to improve further, I would focus on making the animations even more detailed and refining timing to achieve an even smoother and more professional result.
Comments
Post a Comment