Illustration and Visual Narrative | Task 3 (Project 3 & Final Project)
22nd October 2021 - 5th December 2021 / Week 9 - Week 15
Name: Isaac Yaw Wai Zac (0343197)
Course: Bachelor of Engineering (Hons) Mechanical Engineering
Module: Illustration and Visual Narrative // Ms. Noranis & Ms. Jennifer
Lectures & Class Sessions
All the lecture notes were documented weekly under this post (Lectures and Practicals)
Figure 1.2: Week 10's class session (5th November 2021)
In this week's class session, we were all given the chance to have a review on our progress on task 3 (Final project). Then, we proceeded with the tutorial session where Miss Jennifer demonstrated the use of animation tools under the Adobe Illustrator software.
Figure 1.3: Week 11's class session (12th November 2021)
From this week onwards, there were no more lectures and tutorials because we have completed all of them in the previous weeks. However, we can still stay or attend the classes accordingly to consult our lecturers whenever necessary to update them on our progress on a weekly basis. The consultation sessions in the upcoming weeks were also not compulsory.
There were no lecture overviews documented for the weeks 12, 13, and 14 sessions because all the consultation sessions were too short and no lectures were done.
Task 3 (Webtoon and Motion Comic)
To kickstart this task, Miss Noranis and Miss Jennifer made a briefing on it during week 7's class session and for the first part, we were assigned a simple research homework by utilising the three-point structure that we learned in that week's lesson. For the task assigned, our short story should be horror-themed. All the detailed instructions were listed in the full assignment brief attached below.
Design Research
Figure 2.1: Design Research #1 (1st November 2021)
With some comic design research, my main priority is to look for inspiration in terms of comic styles so that I could mimic or get inspiration to make something similar. However, I have limited proficiency when it comes to digital art or even drawing. Therefore, I try to go with a black and white comic theme so that it would require lesser effort to animate. To me, the example of digital comic style in Figure 2.1 above is still too complicated in my opinion and I think that I could go with a simpler version.
Figure 2.2: Design Research #2 (1st November 2021)
This digital comic style is still relatively detailed and complicated in my opinion. However, it is way simpler compared to the one shown in Figure 2.1. I then went with a digital comic style that is similar to the one above. However, I think that it may not turn out nice or pleasant to my likings because I am very terrible when it comes to drawing human figures or characters. I will try my best, hehe. Upon further research, I think that I could still go for a coloured version because it would turn out way nicer, depending on the story or 3-act structure which I will be developing later on. I leave this decision to be finalised in the upcoming stage. As shown in Figure 2.3 below, a coloured version would be fitting but at this point, I am still on the fence, between those 2 options.
Figure 2.3: Design Research #3 (1st November 2021)
Figure 2.4: Design Research #4 - character design (1st November 2021)
Upon even more research, I needed to come up with my own character design and I found this design style to be relatively simple yet interesting. With the good compilation of different facial expressions, as shown above, I took this design style as an inspiration to develop my character design in the upcoming stage. With that, I will most likely go with a coloured comic style and simpler to match this character design style.
--HOMEWORK--
You will need to prepare a short story for you to base your character on.
Employ the three-act structure, but limit the word count to a maximum of 300 words only.
Short Narrative (Horror) - Story 1 EVIL BULLY (not chosen as final story)
Act 1 - Setup
Once upon a time, there was a cute little girl who was born mature because she was an orphan. She thinks like an adult even though she was only 8. Every day, she gets bullied by her schoolmates for being different. Although having good achievements, she wasn't happy with her life. Living a relatively miserable and sad life, Bella learned to be independent, whilst being taken care of by her aunt in a shed just out of town, beside a huge forest.
Act 2 - Conflict
One day, she was wandering and exploring the forest with her aunt to look for dried branches and twigs to build a swing together. Unfortunately, her aunt fell into a ditch and both her legs were caught in a bear trap. Bella had to visit her aunt every day after school in the hospital due to the terrible injury and isolated herself to cry when she gets back home. Because of that, she had gotten very evil and would like to see people struggle and be tortured as a return of what the bear trap did to her aunt. Because of that too, she made an entire course of booby traps along the trails in the forest, hoping to see other people getting trapped.
Act 3 - Resolution
Until finally, she couldn't stand a group of schoolmates who were teasing her for being boring and were following her when she was walking back home from school. They were constantly kicking her shoes, tripping her, pulling her hair, and calling her stupid names. They also often tease her for staying in a shed and not being able to have a proper house. She got so mad and she chose the forest trail pathway to get to her house. Of course, she made traps there and avoided them each at a time. However, each at a time, her schoolmates either fell into a deep hole or got trapped, she smirked and smiled away. That afternoon, she received a call from the hospital, saying that her aunt could not make it out alive and she passed away the same day.
Moral of the story:
Even at the hardest times, we should not be hard on ourselves and most importantly, do not create hatred feeling with our surrounding people. Life can be very hard sometimes, but it with eventually get better.
Story 1 (sketches)
Figure 2.5 & 2.6: Overview of sketches for Story 1 - EVIL BULLY (as of 3rd November 2021)
Based on Figures 2.5 and 2.6 above, I managed to do some rough sketches for the EVIL BULLY story. However, I thought of recreating another horror story that could be much more interesting compared to this. The story that I want to recreate is based on a real experience that I faced in my junior year back in high school. Therefore, I only managed to complete the sketches for 10 panels for this first story and I will continue working on it if I happen to like this one more than the second one.
Short Narrative (Horror) - Story 2 RED VISION (chosen as the final story)
Act 1 - Setup
Once upon a time, there was a young student named Isaac. Every day, he is out and about because he is an outgoing and hyperactive kid. He was heavily involved in clubs and co-curricular activities and is often involved in camps in his high school, St. Michael's Institution (A haunted school in Ipoh). In his military band, he was a junior when this whole story occurred.
Act 2 - Conflict
One day during training camp at night, he was told by his senior to go up to the third floor, where all the classes were locked due to safety. His senior told him to grab a flashlight and go up there to look for his bottle. It was at the end of the corridor and it was extremely spooky due to the long hallway that was haunted. When he was walking towards the end of the corridor, he heard some clacking sound coming from one of the classrooms. He bent down to take a peek through a crevice in the wooden door to see what it could be. He saw a silhouette of a girl crying at the corner of the classroom. He was worried and didn't know what to do. Isaac trying to be brave, bent over to get another view into the crevice. This time, he only saw a full red spot covering the entire hole. He didn't think too much and hoped not to overthink at that time. Because of that too, he immediately went to the end of the corridor to grab the bottle and left the hallway as if nothing has happened.
Act 3 - Resolution
Until finally, all the campers woke up the next day realising the presence of ambulances and police cars outside the school. The police team was delivering a dead body of a girl, who happens to be one of the students in that school who suicide by hanging herself in one of the classrooms due to bullying. What became the talk of the town is that the girl happens to have a disease where her eyes would turn red when she is in fear or stress. Thinking about it, what could have Isaac seen the night before through the crevice? What could that red spot be?
Story 2 (sketches)
Figure 2.7, 2.8, 2.9, & 2.10: Overview of sketches for Story 2 - RED VISION
(as of 7th November 2021)
After obtaining feedback from Miss Noranis and Miss Jennifer, I decided to go with my story 2 - RED VISION as my final story before proceeding with the digitalised version of it. I like this story more compared to the first one because this was a real experience and I added some extra twists to it to make it more interesting. The overall story was a real one except for the part where there was a red spot through the crevice and also there was no casualty in the actual story. "Nobody was harmed in the making of this story" - Isaac.
Digital Comic Progress
Figure 3.1: Digital comic progress #1 - testing out vectorised version of the sketches
(as of 9th November 2021)
In the initial stage of the digital comic, I traced over the sketches done and I was quite skeptical about it because Miss Noranis mentioned that we must have 30-50 panels in our comic and my sketched comic only had 21 panels. Other than that, I also think that I could do a better job with the panel placements and the composition of each individual panel. So, it is time to redo my sketches, but this time in Adobe Photoshop.
Figure 3.2: Digital comic progress #2 - resketching comic panels in Adobe Photoshop
(as of 10th November 2021)
Figure 3.3: Overview of finalised comic sketches (as of 10th November 2021)
With the newly sketched comic panels, I was very happy about it because it now has a better flow and a very interesting plot where all the panels are connected with one another with good transition. There was a total of 34 panels and 8 pages to this comic that fit the requirements. I went with my own taste and style with a simple and understandable approach so that I could use limited words and speech bubbles whilst obeying the three-act structure of this entire story. Going into week 12's consultation session, Miss Noranis gave me the green light to continue with this progress.
Figure 3.4: Digital comic progress #3 - drawing out all the background elements in Adobe Illustrator
(as of 15th November 2021)
Figure 3.5: Digital comic progress #4 - drawing out all the background elements in Adobe Illustrator
(as of 17th November 2021)
Figures 3.6 & 3.7: Overview of digitised background elements for every comic panel
(as of 18th November 2021)
At this point, I was very happy with my current progress and I showed it to both Miss Noranis and Miss Jennifer in week 13's consultation session. They were happy about it but they also urged me to move on quickly because I still need to complete the characters and fit them into the correct aspect ratio that can be accepted by Webtoon (800px by 1280px). Not to forget, I still have animation and sound production to be completed in the upcoming weeks.
Figures 3.8, 3.9, 3.10: First draft of the RED VISION full comic (as of 20th November 2021)
In just another 2 days' time, I managed to complete my first draft for the full comic after adding detailed elements such as the characters, words, and other elements. I was not really looking forward to the next part of this digital progress because I needed to reorganise every single element into respective groups and layer them properly so that I could animate them conveniently. To ease this process of animating the story, I decided to create individual Adobe Illustrator files in the correct full HD aspect ratio and resolution (1920px by 1080px) so that each file represents 1 or 2 panels only.
Figure 3.11: Digital comic progress #5 - separating each panel and organising groups and layers
(as of 22nd November 2021)
Figure 3.12: Digital comic progress #6 - separating each panel and organising groups and layers
(as of 22nd November 2021)
Figure 3.13: Overview of all the layers organised for each frame before the animation process
(as of 26th November 2021)
Figure 3.14: Overview of individual Adobe Illustrator files to ease the animation process
(as of 26th November 2021)
To my surprise, the deadline for this assignment was pushed earlier and set to be on the 3rd of December 2021. That means I only have exactly 1 whole week to complete my full finalised comic to be uploaded onto Webtoon, my full animation, and most importantly, updating my full blog on this assignment. From this point onwards, everything needs to be done with SPEEEEED!
Animation Progress
Figure 4.1: Animation progress #1 - creating scripts (as of 27th November 2021)
With the given requirements of creating an animation within 1 to 3 minutes, I needed to plan things out well to prevent any failures or problems in the upcoming stages. As shown in Figure 4.1 above, I planned out the timing for each frame to their corresponding voiceover/scripts. This made the whole process a lot easier to be completed with minimal room for errors. All these were done with the help of the Microsoft OneNote software.
Figure 4.2: Animation progress #2 - animating using Adobe After Effects (as of 27th November 2021)
Figure 4.3: Animation progress #3 - animating using Adobe After Effects (as of 28th November 2021)
Figure 4.4: Animation progress #4 - animating using Adobe After Effects (as of 28th November 2021)
This was all on me because I was too ambitious with the animation and therefore, I separated and organised each frame into a huge stack of layers so that many elements can be animated. However, I did not really take into account the time needed to do such detailed animations. As seen in Figures 4.3 and 4.4 above, there were too many layers to be animated but I was hoping that the outcome would turn out good. So, fingers crossed!
Figure 4.5: Animation progress #5 - animating using Adobe After Effects (as of 29th November 2021)
Figure 4.6: Animation progress #6 - exporting current progress into mp4 files using Media Encoder
(as of 28th November 2021)
Figure 4.7: Demonstration of error faced (28th November 2021)
Oh no! Even with the very packed schedule for this assignment, we still have to take into account unnecessary errors which may occur along the way, which I eventually did. As shown in Figure 4.7 above, I faced this problem when Adobe After Effects had problems with missing frames that were there and I did not delete anything in between the process. After fiddling around with this problem, I tried to copy and paste every single layer and rename them to see whether Adobe After Effects can read the missing files or not. Sadly, there was still this problem until I found out that it can read my missing layers if I renamed the files into different names. Weird, but I still have no idea why. So, I duplicated the files, reorganised every single layer, and lastly, named each file 'V2'.
Figure 4.8: Animation progress #7 - animating using puppet tool in After Effects
(as of 29th November 2021)
Isaac trying to be ambitious once again. Oh no! I thought that it would be quite easy and straightforward with animating the leg motion walking up the stairs for my panel 13. However, it was extremely challenging because it would either turn out to be unrealistic or have unnecessary cuts and deformation in between. This is because this puppet tool requires us to set a few static points and a few points which can rotate freely. I needed to move them along the way as the motion continues. So, it was very time-consuming and challenging at the same time. It was still doable and I finally manage to complete this realistic motion after a total of 8 hours spent, just for this motion. I try not to use this tool again in the upcoming panels but I eventually used it for panels 15 and 20 in a simpler manner.
Figure 4.9: Animation progress #8 - animating using After Effects
(as of 29th November 2021)
Figure 4.10: Animation progress #9 - animating using After Effects
(as of 29th November 2021)
The animation for my eyes blinking was a very good touch in my opinion to create a more realistic story-telling effect. As shown in Figure 4.10 above with the keyframes set, I just use 2 layers (eyes opened and eyes closed) and change their opacity from 0% to 100% in a quick manner in a different order.
Figure 4.11: Overview of exporting using Media Encoder and files being organised
(as of 29th November 2021)
Figure 4.12: Animation progress #10 - animating using puppet tool in After Effects
(as of 29th November 2021)
Figure 4.13: Animation progress #11 - animating in After Effects
(as of 29th November 2021)
Figure 4.14: Animation progress #12 - exporting panels 25-30 in Media Encoder
(as of 30th November 2021)
Figure 4.15: Animation progress #13 - finishing up all the remaining panels
(as of 30th November 2021)
Figure 4.16: Animation progress #14 - exporting all the remaining panels in Media Encoder
(as of 30th November 2021)
With all the animations for every panel done, I still had some time to spare and I knew that my first draft for the digital comic can still be further improved so I did that. All the boring outlines for each panel can be improved to be merged comfortably on every page
Figure 6.1: Digital comic progress #7 - repositioning panels (as of 30th November 2021)
Figure 6.2: Digital comic progress #8 - repositioning panels (as of 30th November 2021)
Figure 6.3: Digital comic progress #9 - repositioning panels (as of 30th November 2021)
Figure 6.4: Digital comic progress #10 - merging panels and adding speech bubbles
(as of 30th November 2021)
Figure 6.5: Overview of completed RED VISION comic (as of 30th November 2021)
Figure 6.6: Animation progress #15 - editing video animation doing sound production
(as of 30th November 2021)
For the video editing part, I used the Filmora X software because I have more experience using this software compared to the Adobe Premiere Pro software. It was pretty straightforward but time-consuming. I aligned all the animated frames together and extend or cut them whenever necessary. As for the audio, I used a microphone and use different objects to create similar sounds to represent each motion/movement. I got the help of my roommate to do the voice for the senior whereas I did the voice for Isaac. As shown in the example in Figure 6.7, I used a bag of potato chips and drag it across my table to mimic the sound of a person being dragged.
Figure 6.7: Overview of using a microphone for sound production (as of 30th November 2021)
Figure 6.8: First draft of RED VISION animation/video (as of 30th November 2021)
Figure 6.8: Creating thumbnail to be submitted onto webtoon (as of 1st December 2021)
I almost forgot about this step when I wanted to upload my full comic onto Webtoon. 2 thumbnails were needed to be made in specific resolutions (1080px by 1080px) and (1080px by 1920px). However, this step was relatively easy because I already have all the layers and elements in my Adobe Illustrator files. I just need to copy and paste them to then be repositioned into my desired positions.
Figure 6.9: Uploading full comic onto Webtoon (as of 1st December 2021)
Figure 6.10: Animation progress #16 - round 2 of editing video animation doing sound production
(as of 3rd December 2021)
As can be seen in the first draft of the animation where I only used my voice and my friend's voice together with voiceover, I really hated it because it sounds very cringy and not horrifying enough. I then downloaded some sound effects online which can be seen in Figure 6.11 below, and use them as the more suspenseful and horrifying sound effects to add to the voice I have initially recorded. With a combination of various sounds, I really like the outcome which is documented in Figure 6.16 below.
Figure 6.11: Overview of downloaded sound effects (as of 3rd December 2021)
Characters
1) Isaac
Figure 6.12: Isaac character (Protagonist)
Details: A 13-year-old junior who participated in his high school band camp
Appearance: wears glasses, has messy hair
Personality: timid and shy
2) Shaun
Figure 6.13: Shaun character (Antagonist)
Details: A 15-year-old senior who acted as a hunter during the ghost game in the high school band camp
Appearance: has a big smile, dark coloured skin, and big eyes
Personality: friendly and loves challenges
Full Comic Final Submission
Figure 6.14: RED VISION comic in JPG
Figure 6.15: RED VISION comic in PDF
RED VISION Animation Final Submission
Figure 6.16: RED VISION Animation final submission
Feedback and Reflection(s)
Week 8
Feedback - In this week, we were all showing our first progress on this task. We showed our 3-acts structure and then the feedback was obtained. For my progress, Miss Noranis agreed with my storyline. However, she also mentioned that I could improve it by not making it too 'draggy'.
Reflection - I was glad to get positive feedback, but I think that I could come out with another storyline that could be better because it is based on my past experience.
Week 9
Feedback - In this week, I showed my new storyline which was the real experience I had in high school. Miss Noranis agreed with this new story and advised me to continue to work on this story.
Reflection - I was very excited and eager to work on this story because I find it very interesting and it is a real experience for me. As a reflection for this week, it was a relatively challenging task as I am not good at drawing/sketching and therefore, it was very challenging for me.
Week 10
Feedback - In this week, I was surprised by the comments obtained from Miss Noranis. She mentioned that my progress was fine, but it needs better flow and engagement. To create better engagement, I can use speech bubbles and also reposition the panels.
Reflection - It was a very challenging week as I planned to complete the vectorised comic storyline this week before the next consultation session. However, this journey taught me how to be productive and manage my time well in completing this task.
Week 11
Feedback - In this week, Miss Noranis and Miss Jennifer saw my finished sketches and they were happy about it. They said that it can already be finalised. After showing them some of my initial drafts and progress on the digital panels, they gave me the green light to continue with this digital style.
Reflection - This digital progress this week was very time-consuming and I needed a lot of patience. This is because I needed to layer each element and panel strategically so that they can easily be animated later on.
Week 12
Feedback - Although I was not done with my digital comic this week, I managed to show my progress and the feedback was very positive from both Miss Noranis and Miss Jennifer. They also gave us the notice that the deadline for this assignment is around the corner and we should all plan and manage our time well.
Reflection - It was a very stressful week as I needed to complete the entire digital comic and finalise it by the next class/consultation session. Along the way, there were quite a number of errors and problems faced which were documented above and they made the progress experience very frustrating.
Week 13
Feedback - With the finalised comic and some rough animations, Miss Noranis and Miss Jennifer liked my final comic design, flow, and storyline. They also mentioned that the deadline for this submission was pushed to week 15 instead of week 16.
Reflection - A lot more problems and errors were faced throughout this week in the animation phase such as the problem with reading the Adobe Illustrator layers and the missing files which cannot be extracted by Adobe After Effects. A lot of troubleshooting was done in order to solve these issues and I learned not to procrastinate in assignments especially like this because there is room for unexpected errors to take place at the very last minute.
Week 14
Feedback - All the progress on the comic and animation were shown and I was about 80 to 90% done at this point. Both Miss Noranis and Miss Jennifer were very happy about my progress this week. They also urge us to complete this assignment earlier if we are capable of doing so because the deadline was set to week 15.
Reflection - It was extremely stressful and a lot of time was spent on this assignment and I managed to complete everything by the deadline despite the heavy workloads and busy schedules I am currently going through. I felt a huge relief after the submission and I was very excited to check out the work from my peers too.
Overall Reflection(s)
I would love to document this journey and also all the things I faced along the way whether it may be good or bad. This task was a long and challenging one as it took 7 full weeks just to complete it. Let's just rewind to just a few months ago when I decided to take creative media as my minor just because I like a bit of art, a mixture of digital media, animation, and the main reason is that I like photography. Just 3 months ago, I never touched design software such as Adobe Photoshop, Illustrator, After Effects, Premiere Pro, InDesign, and a few others. This journey was a new one but challenging especially for me because I come from an engineering background where most of my modules involve science, physics, calculations, and a lot of projects. Nothing related to artistic designs, and of course, animation. Phwew...I still think that I am lacking behind by a mile in terms of creativity and designing skills compared to my peers and classmates, but I am glad that I improved a lot and did not expect such outcomes for all three tasks especially this one. Not to forget, I learned so many Adobe software and mastered them in just a short period of time. Of course, it was unfortunate that this entire semester was held online because it would have been so much fun to design with friends and attend consultations with both Miss Noranis and Miss Jennifer physically. Nonetheless, I am very happy with the outcome for this assignment and I will seek opportunities in the future to develop my skills in animation!
Comments
Post a Comment