Information Design - Project 2
4/1/2022-25/2/2022 ( Week 2- Week 8 )
Sasilvia Cheong Pei Hoong / 0345031 / Bachelors of Design in Creative Media
Information Design
Project 2- Motion Graphic and Exercise
Lectures
Week 2- Animation vs Motion Graphics
Animation- Images that create illusion of movement
4 type of Animation:
- 2D animation
- 3D animation
- Stop motion animation
- Motion graphics
Fig. 1.1 Motion graphics
Motion Graphics Anatomy
- Text animation: Kinetic typography
- Graphic animation: Graphics elements
- Chart visualization
- Character animation
Fig. 1.2 Motion graphics anatomy
Kinetic Typography
- Word by word
- Animated paragraph/excerpts with final composition
- Good text animation mixed both
Fig. 1.3 Kinetic typography
Kinetic Typography in After Effects
- Text layer > Character (Size, leading, kerning) > Align
- Animate > Position, scale, opacity
- Keyframing: Range selector > start 100% > 0% easy easy/F9
- Keyframing: Graph editor
- Motion blur
- Composition: Paragraph, guide lines, title safe
- Composition: Null object > Parenting
Week 3: Motion Graphic Charts
A chart is a graphical representation for data visualization.
- Pie chart/ Donut chart
- Bar chart
- Line chart
INSTRUCTIONS
Practical: Week 2- Lyric Kinetic Typography
Mr. Martin taught us how to create a kinetic typography animation in Adobe After Effects and taught us how to use the null object.
Fig. 1.2 Final Kinetic Typography (13/1/2022)
Exercise 3 : Kinetic Typography
In our exercise 3 we were tasked to create a typography animation together with our group. Mr. Martin gave us the choice on whether we want to us the song given by him which is "So What" by P!nk or a song of our choice. My group members had a discussion in our discord group and we planned to use back the song given by Mr. Martin.
Right after that we decided to look at the lyrics breakdown and see if there are any duplicates of the lyrics and highlight them in a certain colour so that it is easier to separate them out. After that we listed out the existing lyrics and let each other pick which lines they wanted to do.
Fig. 2.1 Dividing the lyrics (11/1/2022)
Visual Research
After separating the lyrics with each other we decided to come up with a moodboard. Adeline and Alicia chose the typefaces while I picked out the colour pallete. Adena send us the lyrics video of One Direction "Kiss You" and we all agreed that it was nice and we can use it as reference on how our video should look like.
Fig. 2.2 Moodboard (11/1/2022)
Fig. 2.3 Lyrics animation reference (11/1/2022)
After Effects
For my animations, I am not really good at using after effects so I went on YouTube to do some practice and research on how to make my animations look better and professional.
Fig. 2.4 Typewriting animation (21/1/2022)
For the lyrics "I'm Alright" and "I'm Just Fine" I wanted to make the words change but keep the "I'm" as it is while the other two lines will be change with a typewriting transition.
Fig. 2.5 Opening up to reveal word animation (22/1/2022)
The "Rock star" part I made a transition where there is a bunch of "rock" words that is creating this somewhat a door and opening up from the top and bottom to reveal the "star" word. 2 null object layers were used to create this effect.
Fig. 2.6 Circle kinetic typography animation (22/1/2022)
Next for the "tonight" part, I wanted to make it like a CD rotating in a CD player so I went to look up on YouTube for tutorials on how to recreate it. The eclipse tool was used to make the words into a circle and then I had to readjust the spaces in between so that it would look neater. To animate the circle to go clockwise I had to make keyframes in the first margin. After that I had to duplicate the layer and create the stroke layer for the words and resize it to fit in the shape. To make the stroke layer go counterclockwise I just set the value to negative in the first margin keyframe. Right after that is a never ending cycle of duplicating the layers and resizing them.
Fig. 2.7 Circle kinetic typography animation layers (22/1/2022)
Animated parts
After I was done animating with the parts. I cut them into 3 parts since there was a blank in between which someone else will be doing. I then exported them and went through media encoder to resize the file. All the files were uploaded into google drive and Diane compiled them together, while Yi Ki uploaded it to YouTube.
Fig. 2.8 Lines 19,20,21,22,23 (22/1/2022)
Fig. 2.9 I am a rock star (22/1/2022)
Fig. 2.10 And I don't want you tonight (22/1/2022)
Final Outcome
Fig. 2.11 Final Exercise 3 Kinetic Typography "So What-Pink" by Group 2 (23/1/2022)
Exercise 4: Motion Graphic Chart
In week 3 we were tasked to create a motion graphic chart and everyone was assigned to a different kind of chart. I was assigned to do the donut chart where the topic is about "Impact of COVID-19 on Inbound student mobility".
Link:
https://thepienews.com/news/covid-19-significantly-impacts-mobility-of-students-survey/
Fig. 3.1 Donut chart and topic (22/1/2022)
Fig. 3.2 Colour pallete (27/1/2022)
Before I started creating my animation I went on google to look at colour pallete examples that I could use for my donut chart.
Fig. 3.3 Animating in After Effects (27/1/2022)
To create the donut chart animation I followed the tutorial slides that Mr. Martin gave and adjusted the percentage according the information I was provided with, where I had to use trim paths and adjust the end keyframes for both the start and ending of the keyframes. Where the start will have the percentage of 0 and the end with the percentage that we want After that, I had to highlight both keyframes and change them to easy ease. The effect used for the numbers is the slider control but first I had to change the code for the source text to Math.round(effect("Slider Control")("Slider")) . Then move back to slider control where we adjust the value that we want. Last but not least for the lines I used the same method like the donut chart where I used trim paths and change the keyframes to easy ease. The other effects used are just opacity and position. Since my donut chart was too small in size I had to create a null layer so that I can change the scale and position of the donut chart without effecting the animation that I have done.
Final Outcome
Fig. 3.4 Final Donut Chart (27/1/2022)
Project 2 : Animated Infographic
Use the assets from Project 1 Instructable infographic poster into a 60 secs motion graphic.
Once again, capture the aesthetics and narrative of the poster with movements, SFX and music.
Requirements:
Max 60 seconds infographic video 720p: 1280x720pixels (H26/mp4) published on YouTube (set to unlisted)
Composition
Before moving to AE I did the compositing of the layers in an Illustrator artboard size HDV 720. Then I separate the layers and group the elements that I will be animating.
Fig. 4.1 Compositing to HDV 720 artboard (13/2/2022)
Fig. 4.2 Separated layers in Illustrator (13/2/2022)
Animating
Fig. 4.3 Animating in AE (17/2/2022)
For the text animation I decided to go with a typewriting style animation and used the same technique I learned when I was doing the typography lyrics animation.
Fig. 4.4 Shaking and vibrating effect (17/2/2022)
Fig. 4.5 Effect used for shaking effect (17/2/2022)
For the shaking effect I used the wave warp effect and change the wave type to smooth noise to give a feeling of how a bowl will feel like when we touch it while using a hand mixer. The vibrating effect was created by rotating the lines and creating a bunch of copy of the keyframes to make it loop.
Fig. 4.6 Effect used for flame moving effect (18/2/2022)
The same effect was also used on the flames but instead of the smooth noise type I used the default one which is sine.
Editing
Fig. 4.7 Music (19/2/2022)
I stumbled upon this music channel where they produced free non copyrighted music and the music there was amazing so I picked the one I liked the most which was "biscuit".
Fig. 4.8 Sound effects (19/2/2022)
After I was done with the animation in After Effects, I went over to YouTube to find a bunch of suitable sound effects and music that I will be editing into my video.
Fig. 4.9 Editing sound effects and music (19/2/2022)
I edited all the composition of the animation and cut out some unwanted parts in Premiere Pro. The music was used throughout the video while sound effects was placed at certain parts when the elements are moving. I also had to adjust the sounds since they were to loud and I reduced them at audio gain.
Final Infographic Video
Fig. 4.10 Final Animated Infographic Video (19/2/2022)
REFLECTION
AE is not my strong point I can say but being able to develop my skill throughout the exercise and projects felt like I achieved something great. The kinetic typography animation work gave me mixed emotions, I did not know how to make my parts complex and unique so it always cam out as being plain and felt like things were lacking. But I can not let my members down so I went to YouTube and search for multiple tutorials on how to make better kinetic typography animation. From there I was able to use what I learned and place it in my part of the animation which I was very happy about the outcome.
The motion graphic chart was fun to make, it was very satisfying to see how a plain round donut shape can be made into something so much more. Certainly I went to YouTube for some tutorials to enhance on my design so that it looks so much better.
As for my animated infographics, I was thankful that I learned how to separate each layers of the vectors from Illustrator to AE from Illustration module last semester. It gave me a base of what I needed to do and also prevented me from messing up. I liked how my animation turned out it was simple and clean which gives off a refreshing feeling to after watching it for a couple of times. I really love adding sound effects and music while editing too, it adds something that is missing from the whole animation. Without music and sound effects it was like cake without icing.
REFERENCES
Lectures
Fig 1.1-1.3
Animation vs Motion Graphics lecture slides
Fig. 3.2 Colour pallete (27/1/2022)
https://hookagency.com/blog/color-schemes/
https://hookagency.com/blog/color-schemes/
Fig. 4.7 Music (19/2/2022)
https://www.youtube.com/watch?v=EtZ2m2Zm3vY
Sound Effects used:
Mixing sugar
https://www.youtube.com/watch?v=Jwb-8fhaZlI&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=21&t=151s
Burning gas stove
https://www.youtube.com/watch?v=Sm-ABi9Qnaw&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=22
Dish noise
https://www.youtube.com/watch?v=GPTndT_As-I&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=33
Hand mixer
https://www.youtube.com/watch?v=wLJrm8n4GIs&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=24
Keyboard typing
https://www.youtube.com/watch?v=Z70MOUHQ3TI&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=32
Kitchen sounds
https://www.youtube.com/watch?v=wD-mcyoCHBw&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=26
Knife cutting
https://www.youtube.com/watch?v=sNdG_1935Yw&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=34
Paper sound
https://www.youtube.com/watch?v=eibsYJlaNsg&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=35
Pouring hot water
https://www.youtube.com/watch?v=XiZe6mU3Nec&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=31
Pouring water
https://www.youtube.com/watch?v=3aOnFCVz9iY&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=20
Toaster oven ding
https://www.youtube.com/watch?v=j69pFn2vCtA&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=27
Water plop
https://www.youtube.com/watch?v=Y4wlIkWzBxU&list=PL3LSmkSDSkEJViSZPv-Vxbt4-m9GPt_wT&index=25
Comments
Post a Comment