Information Design - Project 2: Kinetic Typography & Recipe Motion Graphics

We also got into our groups for our Project 2 and started to brainstorm things. I was grouped up with Alicia, Hu YaoPing, Wang Ji Heng, Ma Xiai, Chika and Li Shi Qing.

The song we went with for our project was "Good Time" by Owl City and Carl Rae Jepsen. I was delegated to doing the first verse of the song.

Week 7

The class was mostly giving each group time to present their progress for the project and continue working on it in class.

Feedback:

Try give a bounce for "Right Side" in [Woke up]
Change background to fully encapsulate the comp and kick out the other lyrics [Slept in]
Find a stronger background graphic [Hopped in]
Zoom out to whole comp for half a sec or less (ten frames) [I'm in]
Discuss about the 3D aspect of the kinetic typography

Week 8

The class was mostly giving each group time to present their progress for the project and continue working on it in class.

Feedback:

Try to not use the graphics as decoration
Keep it as simple as possible
Discuss with team about art direction
Composition alignment of [Hands Up]
Square up alignment of [Woke Up]
Composition and graphics of [What's Up] is perfect.

Week 9

I couldn't go to class this week because of transport problems but my team showed the progress of our compiled parts during class.

Week 10

We started to move on with the Final Project but Mr. Martin also checked on everyone's progress of the Recipe Motion Graphics.

Feedback:

The motion graphics of the video is quite solid so far.
Just need to adjust the size of the text in the Ingredients section of the video.
Adjust the knife slicing to cut off the last slice because it feels like an unneeded slice.
Keep up the work.

Week 11

This week was also just continuing on working for the Final Project. I didn't get to show my Motion Graphics progress but I understood the general idea of what to do to finalise it.

▲ back to top ▲

3. KINETIC TYPOGRAPHY PROGRESSION

3.1 Brainstorming

We got into our groups and started to think of what song we wanted to do for our project. Because of the way the tables were in class, it was a bit hard to communicate with each other + some weren't too fluent in English and that added to the difficulty too; so, we decided to try mainly communicate through our WhatsApp group.

We all suggested a song and I gave "Can I Call You Tonight?" by Dayglow as a suggestion. In the end, "Good Time" by Owl City and Carly Rae Jepsen won the vote.

Fig 3.1.1 Song vote via WhatsApp poll.

Video 3.1.1 "Good Time" by Owl City and Carly Rae Jepsen. [YouTube]

Afterwards, we separated the parts of the song into sections to delegate each person's task. I decided to take on the Verse 1 because I had an idea already for what I wanted to do for the lyric animation.

We referenced this website for the lyric separation: https://genius.com/Owl-city-and-carly-rae-jepsen-good-time-lyrics

Fig 3.1.1 Delegation of tasks.

▲ back to top ▲

3.2 Moodboard

After settling the tasks, we went into deciding the fonts next because that would be an crucial part of the kinetic typography video. After discussion in the group chat, we went for one main font and 4 secondary fonts (Fig. 3.2.1).

Fig 3.2.1 Chosen Fonts

Fig 3.2.2 Moodboard.

We wanted our project to feel like a sunset drive so the colour palette we chose were based off of that vibe.

▲ back to top ▲

3.3 Animation

Starting on my part, I laid out the Verse I was working out into lines:

Woke up on the right side of the bed
What's up with this Prince song inside my head?
Hands up if you're down to get down tonight (Mm-mm-mm)
'Cause it's always a good time
Slept in all my clothes like I didn't care
Hopped into a cab, take me anywhere
I'm in if you're down to get down tonight
'Cause it's always a good time

From here on, I'll refer to each line by the first two words like [Hands up] and [Slept in]. Going into After Effects, I started to layout and separate the words in [Woke up].

Fig 3.3.1 Arranging words in the composition.

After that, I played with a null object like we did in the kinetic typography practice in Week 5.

Fig 3.3.2 Arranging words in the composition.

For [What's Up], I used a graphic of a simplified human head shape and created a path for the words to slide into around the head.

Fig 3.3.3 Using graphics with the lyric movement.

I wasn't too sure what to do for [Slept in] but I decides to play around the words with maybe having clothes graphics appear when the word "clothes" slides in.

Fig 3.3.4 Playing around with placement of the words.

Since I'd added the graphics of the clothes, I decided to also add pillow graphics to [Woke up] because I thought it'd be fun to make them bounce on the worlds to simulate a sort of bed image.

Fig 3.3.5 Adding graphics and changing the colours using effects.

Feedback:

Try give a bounce for "Right Side" in [Woke up]
Change background to fully encapsulate the comp and kick out the other lyrics [Slept in]
Find a stronger background graphic [Hopped in]
Zoom out to whole comp for half a sec or less (ten frames) [I'm in]
Discuss about the 3D aspect of the kinetic typography

At this point, the total number of scenes I had were 8; 1 scene for each line of Verse 1.

Fig 3.3.6 Entire setup of compositions/scenes.

Here I animated the bounce effect for the left side of the [Woke up] scene. The words on the left would bounce/fall out of frame when the pillow lands on its side.

Fig 3.3.5 Adding bounce movement to the motion graphic of [Woke up].

For [Hands up] I had the idea to make the line use the same 'down' word since it appears twice in the line. To do that, I laid it the words and aligned it so that 'down' would smoothly fall down to the next use of it.

Fig 3.3.6 Animating the shared "down" word of the lyric.

When playing around with graphic use, I thought that maybe I could use a simple trick to give a fun composition for [What's up] by duplicating the head graphic into different colours make them pop out when "my head" plays.

Fig 3.3.7 Making the head 'pop-out' in colour

Video 3.3.1 Kinetic Typography Progress.

Then I brought all the clips together and edited them to be smoothly transitioned together. My teammates thought my part was very good and nice but of course, we had to ask Mr. Martin for feedback for our individual parts.

Feedback:

Try to not use the graphics as decoration
Keep it as simple as possible
Discuss with team about art direction
Adjust composition alignment of [Hands Up]
Square up alignment of [Woke Up]
Composition and graphics of [What's Up] is perfect and effective.

I changed parts of my video according to the feedback and finalised it with the group to make sure everything was okay as well.

Video 3.3.2 Final Kinetic Typography Video.

Google Drive View: https://drive.google.com/file/d/1QIwDhcj2k5lji9tq3exjYCdmbGOjw_AW/view?usp=drive_link

Video 3.3.3 Verse 1 by me.

Google Drive View: https://drive.google.com/file/d/12G8W_H6KhcukmtXGSccEwZBH9ASaLHGR/view?usp=drive_link

▲ back to top ▲

4. RECIPE MOTION GRAPHICS PROGRESSION

4.1 Storyboarding

To refresh a bit, I went through the Recipe Poster Design Proposal to get the vibe I wanted to portray with the motion graphic.

File 4.1.1 Final Proposal of Project 1 [PDF].

Afterwards, I started to draw out a storyboard for the motion graphic. The main idea was that the motion graphic wouldn't rely too much on text to get the message across. I had a bit of an ambitious plan for the motion graphic so I tried to prepare myself for the workload especially with working on both Project 2 and my other modules ( ◡̀_◡́)ᕤ

Video 4.1.1 Recipe Storyboard.

As for the background music, I searched for some copyright-free music and landed on using 'honey jam' by massobeats. You can find the music here: https://freetouse.com/music

4.2 Creating Assets

For the creation of the assets, I went to Flaticon.com again to find some graphics that would quicken my process somewhat so that I didn't have to draw every single graphics in the motion graphic video. I took from the original poster a lot; mainly from the ingredients section and the main illustrations.

The rest of the graphics pertained to the motion of the video so for example, in the Fish Filling Section, I'd plan to show the sort of layer of ingredients of the dish so I had to create some pouring graphics and all the different layers of the dish.

Fig 4.2.1 Fish Filling Assets.

Fig 4.2.2 Roux Sauce Assets.

Fig 4.2.3 Assembly Assets.

▲ back to top ▲

4.3 After Effects

I separated the motion graphics into 7 different parts: Title Card, Ingredients, Prep, Fish Filling, Roux Sauce, Assembly and End Card.

Title Card

To start the motion graphic, I created a simple 5 second title card that was of a fishing line and hook bringing up the Fisherman's Pie title and subtitle to the center of the composition.

Fig 4.3.1 Animating a fishing line.

Video 4.3.1 Final Title Card.

Ingredients

I brought in the ingredients icons from the poster and lined them up for the ingredients showcase. My initial idea in the storyboard was to have them slide in a single composition altogether but I realised it'd be a bit too busy to have them all appear at the same time. So, I planned out a showcase of sorts where the ingredients would be shown one-by-one with their labels and measurements.

Fig 4.3.2 Lining up ingredients in one line.

Fig 4.3.3 Animating a slide-in animation for the ingredients.

Video 4.3.2 Ingredients Progress.

Feedback:

Just need to adjust the size of the text in the Ingredients section of the video since right now it feels slightly cluttered.

I lowered the font size of the labels slightly so that they didn't overflow too much on the sides of the other ingredients that were faded.

Fig 4.3.4 Adjusting the font size of the ingredient labels.

Video 4.3.3 Final Ingredients Section.

Prep

For Prep, I had a bit of fun with the animation because it had me emulating peeling a potato and the motion of the potato masher was fun to play around with; especially with the curves.

Fig 4.3.5 Animating the potato peeling.

The transition from peeled potato to cut potato was also fun because it felt like I was actually cutting the potatoes themselves with the quick motion I added to the knife. I also played around again with the graph editor and overall curves of the keyframes.

Fig 4.3.6 Animating the potato cutting.

Fig 4.3.7 Playing with the graph editor.

Feedback:

Adjust the knife slicing to cut off the last slice because it feels like an unneeded slice.

Video 4.3.4 Final Prep Section.

Fish Filling

I was a bit nervous for Fish Filling because it was a much longer segment of the recipe so I was worried it'd be too long. But I pushed that worry aside for a bit and started by animating the title card for the section.

Fig 4.3.8 Animating the title card of the fish filling section.

The animation for the overall section wasn't too bad. It was cool to see the layers of food coming together in the dish as I animated the ingredients being added to it.

Fig 4.3.9 Emulating oil pouring from the bottle into dish.

Fig 4.3.10 Creating a saute motion for the pan.

Fig 4.3.11 Fading in mushrooms being poured from the pan.

I also created an oven overlay for the baking scenes that was just a simple rectangle with a cutout in the middle and an "Oven Grill" made from a line pattern that the dish rested on.

Video 4.3.5 Fish Filling Progress.

After contemplating, I felt that there were some parts that needed clarification on what what happening so I added short text to support the graphics.

Fig 4.3.12 Adding in some text.

I also adjusted the font weight of some text to give attention to the main point of the sentence/step.

Fig 4.3.13 Changing the font weight to emphasise the temperature.

Video 4.3.6 Final Fish Filling Section.

Roux Sauce

I was stumped a bit on how to execute the stirring part of the Roux Sauce section of the video but I eventually found out I could just give the spoon a sort of "mask" for it to only appear in certain parts which in this case would be over the roux but below the front of the pan. The mask in question, however, is only the a custom shape that I'd made the spoon track matte to.

Fig 4.3.14 Masking the area where the spoon is visible.

I brought back the bow of cooking liquid from fish filling and made a pouring animation of it into the pan.

Fig 4.3.15 Pour animation for liquid.

I did a similar thing to the other graphics that were adding something to the pan but for the seasonings I added a more quicker motion to them using the graph editor.

Fig 4.3.16 Playing with graph editor for salt and pepper shake.

I messed around with the scale transformation of the roux when it was pouring to give a simple yet noticeable motion of it transferring onto the dish.

Fig 4.3.17 Pour animation of roux into dish.

Video 4.3.7 Final Roux Sauce Section.

Assembly

I did a similar thing to the potato masher as I did for the spoon in Roux Sauce where I 'masked' the area where it would be visible. I was reminded of the Prep section when I was doing the mashing motion.

Fig 4.3.18 Masking where the masher will be visible.

It was fun to animate the spoon smoothing out the mashed potato layer because for some reason it felt like I was a kid again playing make-pretend cooking food (๑ᵔ⤙ᵔ๑)

Fig 4.3.19 Animating spoon smoothing out the potato layer.

I played around with the repeater and trim path function to create the steam lines for when the dish comes out the oven.

Fig 4.3.20 Animating steam layer using repeater and trim path.

I added the sprinkling animation from Fish Filling to here also but this time it was for sprinkling parsley over the dish.

Fig 4.3.21 Sprinkling of parsley.

Video 4.3.8 Assembly Progress.

I felt there was something still missing so I added text of the steps to certain parts of the composition.

Fig 4.3.21 Adding some text.

Video 4.3.9 Final Assembly Section.

End Card

Finally, I'm onto the end card. I planned a quite simple animation where bite marks would be taken from the pie and reveal the "Fin." text that indicated the end of the video.

Fig 4.3.22 Creating the plate graphics in AE.

To achieve the eating animation, I creating a bite mark shape and repeated them across the composition until the pie was fully covered. Then, I pre-composed them and adjusted the timing of the appearance of each of the bite marks. I then made the pie invert-track matted to the bite composition.

Fig 4.3.23 Layering the 'bite' shapes.

Fig 4.3.24 Using inverted track matte to achieve bite marks animation.

The progress video here included the colour palette accidentally but you can get the gist of it still.

Video 4.3.10 End Card Progress.

I decided to add a bit of detail to the end card and went ahead to add crumbs on the plate after the pie was finished being eaten.

Fig 4.3.25 Adding crumbs to plate after pie is fully gone.

Video 4.3.11 Final End Card Section.

~~~

Fig 4.3.25 Arranging and editing the sections into one final composition.

The actual final step was to make all the sections smoothly transition to one another and that meant playing with the movement of each section's title cards. One thing to note was that I made a wave transition between the Title Card and Ingredients section of the video.

Video 4.3.12 Final Recipe Motion Graphics Video.

Google Drive View: https://drive.google.com/file/d/1u56XljTzNik3CrjhkcixZ4tv3yrA2WrM/view?usp=drive_link

▲ back to top ▲

5. FINAL

5.1 Kinetic Typography

Video 5.1.1 Final Kinetic Typography Video.

Google Drive View: https://drive.google.com/file/d/1QIwDhcj2k5lji9tq3exjYCdmbGOjw_AW/view?usp=drive_link

Video 5.1.2 Verse 1 by me.

Google Drive View: https://drive.google.com/file/d/12G8W_H6KhcukmtXGSccEwZBH9ASaLHGR/view?usp=drive_link

5.2 Recipe Motion Graphics

Video 5.2.1 Recipe Storyboard.

Google Drive View: https://drive.google.com/file/d/1Po40oPC8HLXjDd_RTsZu_ul8s6uKkpes/view?usp=sharing

Video 5.2.1 Final Recipe Motion Graphics Video.

Google Drive View: https://drive.google.com/file/d/1u56XljTzNik3CrjhkcixZ4tv3yrA2WrM/view?usp=drive_link

~~~

For the full project files of both projects, you can view in the link below.

Google Drive Folder Link: https://drive.google.com/drive/folders/1EJuLlmZNxRPjwUXlRFG4RTyw0N4NmLNp?usp=drive_link

▲ back to top ▲

6. REFLECTION

These two projects were definitely a feat to work on simultaneously. With both being motion graphic heavy, it was definitely a bit stressful to work on them so closely to each other. But fortunately, I'd been able to finish both of them up with satisfaction.

For Project 2 Kinetic Typography, it was quite smooth for me to work on my part since all was good from the start. However, we did encounter some disagreements and problems in the group regarding them not being able to show their work in time which was definitely a downer at times since we'd mainly only communicated through WhatsApp group chat even during class hours; which in turn made communication even harder when trying to get our points across about each other's feedback. I tried to provide as much help as I could in the group chat but Alicia took the brunt of the problems with her being the team leader and all. The thing I wish I had done different was maybe to help shoulder some of Alicia's guiding a bit because it is a group project after all so we should all be there to help each other.

As for Project 2 Recipe Motion Graphics, it was quite a fun ride despite working on it simultaneously with the Kinetic Typography group project. I did regret however being quite slow with my progress of things because I started to become slightly too ambitious with my plans of the motion graphics as I strayed a bit further away from the storyboard I created. But I feel like the end results is up to my expectations with only small doubts/hiccups I think I could have adjusted like the use of text in some parts.

All in all though, I'm quite happy with how things turned out for both parts of Project 2 and hope that the final project will end on a similar note as well ! (˶˃𐃷˂˶)

▲ back to top ▲

Qistina Nuralya Maria Binti Azly (0354180)

Search This Blog

Information Design - Project 2: Kinetic Typography & Recipe Motion Graphics

Table of contents

Comments

Post a Comment