Illustration & Visual Narrative // Task 3 & 4 - Webtoon & Motion Comic
10.05.2022 - 12.07.2022 (Week 7 - Week 15)
Emelyne How Sok Hing (0352938)
Bachelor of Design (Hons) Creative Media
Illustration & Visual Narrative // Task 3 & 4 - Webtoon & Motion Comic
LECTURES
Week 7:
We were briefed on our next Task 3 & 4 which consists of creating our own webtoon and also animate it.
3-Acts Structure:
1. Central Theme
The theme is what the story is really about. It’s the main idea or underlying meaning. Often, it’s the storyteller’s personal opinion on the subject matter. A story may have both a major theme and minor themes. We also have a major theme and a minor theme.
1. Major theme - Idea that is intertwined and repeated throughout the whole story.
2 . Minor theme - Idea that appears subtly and doesn't necessarily repeat.
2. Conflict
This is what drives the story. Creates tension and builds suspense hence making the story more interesting.
3. Characters
Always a protagonist and antagonist.
1. Central characters - Plot revolves around them
2. Protagonist - Main character of the story. Needs a clear goal to accomplish or conflict to overcome that is he or she needs a purpose. Must command an emotional involvement with the audience.
3. Antagonist - Oppose protagonist. Can be in the form of a place, person, thing or situation.
4. Setup
World in which the protagonist exists prior to the journey.
5. Rising tension
Series of obstacles the protagonist must overcome.
6. Conflict
The point of highest tension. Major decisive turning point
7. Resolution
Protagonist learns to overcome the conflict, learns from it or is defeated by it.
Mr. Hafiz tutorial was about using the gradient tool and also adding noise to a shape so that the latter would look more realistic.
Week 9:
We learned about the different transitions used in a comic and how we could apply them in our webtoon exercise.
Moment-to-Moment
Can be used to slow down and draw out action but cannot be used to much as it can make the comic dull and laborious to draw and read. Think of it as a blink or two between seconds of a film.
Action-to-Action
Less finely sliced version of moment-to-moment. Focuses on significant moments or events and over larger time of interval between moments.
Subject-to-Subject
A cut between to related moments but focusing on a different subject in the same scene.
Scene-to-Scene
Series of events that happen in one location and continuous period of time. A change of location or significant jump in time between panels is considered the end of a scene and the start of a new one.
Aspect-to-Aspect
Can be an interesting way to jump around a scene, taking in key details or letting the characters focus wonder. Good way to introduce the environment to a reader.
Symbolic
Can be seen in a lot of various forms, that is partial montages depicting flashbacks or inner dialog. Those scenes deal with the unreal, the felt, and the imagined.
Rolling Transitions
Images are melded and mixed together. Overlapping and interlacing.
Week 10:
This lecture's topic was about animated comics. It is a form of animation combining elements of print comic books and animation.
Different ways to animate:
1. Parallax (Used to create depth)
2. Secondary action
3. Animated background
INSTRUCTIONS
We were tasked to create our own webtoon based on an 'Unforgettable Fight Scene'. We need to consider the 3-act structures and create interesting plot twists and action packed scenes. It can be wordless and presented with only illustration or it can be detailed with stories filled with speeches and texts.
Things to remember:
Comic panel (webtoon format) - W800 pxl x H1280 pxlMain Thumbnail size : W436 X H436 pxl
Episode Thumbnail size : W160 X H151 pxl
Part 1: Webtoon
Week 10:
First Story Draft (Before Feedback)
Act 1- Setup
A long time ago, there was a girl named ‘Adaline’ commonly known as ‘Ada’, who used to live in a remote place where normally nobody would dare to set feet on the ground, this place was known as ‘Cordolium’. There used to grow flowers in abundance and ironically despite their pretty appearance, they were also poisonous. Ada used to collect and sell those flowers, which only her could handle, to the black market of the nearby town. During her long road trips to the black market, she was always accompanied by her dearest friend Atticus who also lived with her in Cordolium. Unfortunately, both lost their parents in a tragic accident some years ago and hence they have been taking care of each other since then. However, there was one thing, when Ada went to the market everybody thought that she was talking to herself as nobody could see Atticus.
Act 2- Conflict
Ada had the reputation of being a witch and had the ability to see ghost. One day, Ada started to get sick and purplish-black marks appeared on her skin. She tried to hide it as much as possible from Atticus. Until one day, Ada could not bear the pain anymore and suddenly a black stingy monster known as ‘Lillith’ appeared from Ada’s marks. Lillith engulfed both Ada and Atticus to the underworld of darkness where lost souls live. Ada realized that if she wanted to get her and Atticus both out of here safe, she had to kill Lillith.
Act 3- Resolution
Ada summoned up her courage and started to fight Lillith using her magic scepter with everything that she had. However, Lillith was getting the advantage to the point where Ada and Atticus got projected near a river. When Ada went on to check on Atticus, she saw Atticus’ reflection through the river and realized that he was the one killing her slowly but surely. She then got a flashback where she realized that Atticus died a long time ago along with her parents and that he was just a pure concoction of her imagination. The enemy was not Lillith but Atticus. As much as it hurt Ada, she had no choice but to stab Atticus. After that, Adaline was free and returned to ‘Cordolium’ but unfortunately was alone again.
Second Draft (After feedback)
Act 1- Setup A long time ago, there was a girl named ‘Adaline’ also known as ‘Ada’, who used to live in a remote place surrounded by poisonous flowers, this place was known as ‘Cordolium’ which was found near Chernobyl. Ada had the reputation of being a witch. She lived in this little cottage house surrounded by a mist on which she put a spell on in order to protect her surroundings. She used to collect and sell those flowers, which only her could handle by using her magic scepter, to the black market of the nearby town. During her road trips to the black market, she was always accompanied by her familiar Atticus who was a phoenix. Since Atticus was a familiar only Ada could see him.
Act 2- Conflict
One day, on their way to the market Ada felt a tight pain in her chest. Despite Atticus warning, Ada continued to go on her way. On their arrival to the black market, Ada suddenly fell and fainted. Atticus tried to wake up Ada but in vain. When Ada woke up, she was transported to the underworld where people’s worst fear resides. On the top of a hill, there was Lillith. Lillith was Ada’s inner turmoil and she wanted to take possession of Ada’s body to go into the normal world and create chaos. Ada realized that if she wanted to get her and Atticus both out of here safe, she had to kill Lillith.
Act 3- Resolution
Ada tried to summon up her courage and started to fight Lillith using her magic scepter with everything that she had. Despite that, Ada could not stop but feeling terrorized and froze on the spot. Thankfully, Atticus came to her rescue and transformed himself into a gigantic phoenix. By doing so, Atticus was able to defeat Lillith and brought back Ada to the real world. When Ada woke up, she was in the real world surrounded by a bunch of people who were checking if she was okay.
Week 11:
Visual Research
For my character design, I was advised to refer to the 50s or 60s era fashion. After doing some research, I picked the 50s era style as I believe that it would suit my idea more. The pictures below are the research that I made so as to have a reference on what kind of clothes I could illustrate.
![]() |
| Figure 1.0 Visual Research, 10th June 2022 |
![]() |
| Figure 1.1 Visual Research, 10th June 2022 |
![]() |
| Figure 1.2 Visual Research, 10th June 2022 |
![]() |
| Figure 1.3 Visual Research, 10th June 2022 |
![]() |
| Figure 1.4 Visual Research, 10th June 2022 |
![]() |
| Figure 1.5 Visual Research, 10th June 2022 |
Source of images: https://vintagedancer.com/1950s/1950s-fashion-women-get-look/
Sketches
- Adaline
![]() |
| Figure 1.6 Sketch trial 1, 10th June 2022 |
For my sketch 1 & 2, I had the idea of drawing a pleated skirt and a sleeveless shirt for Ada's outfit. I also added some gloves, pearls for her necklace and earrings and also a pillbox hat. Concerning her shoes, I thought that it would be more appropriate to give her flat shoes since she often ventures and has to walk a lot. Additionally, I illustrated her magical scepter which I think kind of looks like flames and could be a reference towards Atticus. I also tried two types of hairstyles on her since I was a bit indecisive of what kind of hairstyle would suit her the best.
![]() |
| Figure 1.7 Sketch, 10th June 2022 |
After much reflection, I decided that short hair would suit her the best and it would also be more coherent towards the 1950s style where most women had short and curly/wavy hair. Additionally, I tried on another type of clothes for her so as to have more options. I believe that Sketch A's clothes give her a stricter/harsher/mature appearance compared to Sketch B where Ada's clothes look more cute and feminine. Therefore, I'm thinking of going with sketch A.
- Lillith
![]() |
| Figure 1.8 Visual reference for my character Lillith, 10th June 2022 Source: https://www.kindpng.com/imgv/TiiwoJJ_dementor-png-download-dementor-harry-potter-drawing-transparent/ |
![]() |
| Figure 1.9 Sketch, 10th June 2022 |
Since I chose, Sketch A as my final for Adaline, I decided to use Sketch B's clothes in figure 1.7 for Lillith. Lillith is a representation of Ada's deepest fears so I wanted her to look like Ada but with a touch of malice. I also thought of taking inspiration from the Dementors in the Harry Potter movie concerning her hands and lower body. My idea was to make her look dominant, fierce and powerful.
- Atticus
![]() |
| Figure 2.0 Sketch, 10th June 2022 |
Process
After sketching out and having a rough idea for my characters, I started to colour them using Adobe Illustrator.
Characters (before feedback)
![]() |
| Figure 2.1 Illustration of my characters, 12th June 2022 |
Adaline - I wanted Ada to look mature but at the same time still young and in vogue. Her outfit is inspired by the 50s era and I chose both cool and warm colours as I thought that they had a nice contrast together. I also made her scepter using warmer tones as a reference to Atticus, her familiar.
Lillith - Since Lillith concept was to be Ada's deepest & darkest fears, I had the idea of making her look more like a shadow instead of going with a typical character antagonist. I wanted her to look powerful, superior and angry as if she had a deep resentment inside of her. I used the colour black and red as I think that they both have nice contrast but also since red and black represents anger and power.
![]() |
| Figure 2.2 Illustration of my character, 12th June 2022 |
Atticus - For Atticus, I wanted him to look wise, cunning and powerful just like Adaline. I was thinking that Atticus could be a representation of Adaline if she was an animal. Hence, the reason to why I also added a tie around Atticus' neck which matches with Ada's pillbox hat. I chose warm colours mostly red and yellow since Atticus is a phoenix.
Week 12:
Visual Research
![]() |
| Figure 2.3 Lily of the valley flower, 19th June 2022 Source: https://en.wikipedia.org/wiki/Lily_of_the_valley |
![]() |
| Figure 2.4 Eclipsa Butterfly, 19th June 2022 Source: https://www.pinterest.com/pin/498281146269802019/ |
Character (after feedback)
After taking into consideration the feedbacks that I got on my characters, I decided to completely change them. I realised that the previous ones were indeed complicated but also a bit too boring. So, I went with a more simple style but also tried to add some minor details which would make them stand out more. I tried to use simpler shapes and colours that would look more lively and catchy.

Figure 2.5 Character Illustration, 19th June 2022
For Adaline's character, I wanted to make her look more vivid and easy to remember. So, I tried to add some details which were simple but I think catchy enough to remember. I referenced to a poisonous plant called Lily of the Valley for her hat. I also wet with a warmer colour scheme so as to hint that her and Atticus are related.
This time, referencing to the character that Miss. Anis suggested to me that is 'Eclipsa Butterfly', I simplified Lillith's look but also tried to give her some character so that she could easily be referenced as an antagonist in my webtoon. I went with cooler colours so as to hint that her and Adaline are enemies.
![]() |
| Figure 2.6 Character Illustration, 19th June 2022 |
Concerning Atticus, I mostly simplified some lines but kept the overall appearance.
Week 13:
Figure 2.9 Draft of my sketches for the webtoon, 23rd June 2022
Week 14:
Draft of my webtoon
I used Adobe Illustrator to design my webtoon. Using this app was a big challenge but I do think that I managed to get through it. I tried to keep my palette of colours consistent throughout the webtoon so that it would not look like a big mess. I wanted to use colours that were coherent together but also not too boring.
Figure 3.0 Webtoon draft using Illustrator, 1st July 2022
Draft of my motion comic without sound
To animate my video I used Adobe After Effects. Honestly, since I've never used this app before it felt very overwhelming at first. When I tried to upload my file from Illustrator I had some problems. As a back up plan, I tried to download every layer as a PNG file with transparent background and indeed that took me a very long time to finish. After getting used to the app, the animation went on quite smoothly and I did it pretty quickly. I would not say that using this app is hard but it takes some time to get used to it and also get the hang of it but otherwise it was pretty fun doing this video.
![]() |
| Figure 3.1 Process of animation using After Effects, 1st July 2022 |
Figure 3.2 Draft of my motion comic without sound, 1st July 2022
Draft of motion comic with sound
Figure 3.3 Draft of motion comic with sound, 1st July 2022
Youtube link- https://youtu.be/5-G_78l2auo
Week 15:
Final Task 3: Webtoon
Originally, I used the font 'Papyrus' for my webtoon. However, after uploading it on the webtoon site, it was very hard to read and I had to change it. I used 'Amatic SC' this time.
Webtoon link: https://www.webtoons.com/en/challenge/cordolium/cordolium/viewer?title_no=785686&episode_no=1
Figure 3.4 Final Task 3: Webtoon
Summary of the story
This a one-shot story about a witch named Adaline who lives with her familiar Atticus. One day, on her way to the black market she get transported to another world called the 'Underworld', where people's deepest fear resides. She unexpectedly meet someone who wants nothing but revenge. She quickly realised that in order to survive she'll have to fight. Is she gonna win? The only way to know the answer is to read the story!
This a one-shot story about a witch named Adaline who lives with her familiar Atticus. One day, on her way to the black market she get transported to another world called the 'Underworld', where people's deepest fear resides. She unexpectedly meet someone who wants nothing but revenge. She quickly realised that in order to survive she'll have to fight. Is she gonna win? The only way to know the answer is to read the story!
Final Task 4: Motion Comic
Sound that I used for my video:
Kingdom hearts- A walk in Adante
Link: https://youtu.be/mp8CeGs714Q
Umitaro Abe - Reperages pour piano
Link: https://youtu.be/aVbmOC-cLpQ?list=PLGn12rIC7xcTkm-_dXY13SauJwZWh9-et&t=93
I also used some other sound effects for some expression or motion during my animation.
Youtube link of my video- https://youtu.be/UxP0MBdpgHM
Figure 3.5 Final Task 4: Motion Comic, 12th July 2022
FEEDBACKS
Week 10:
Miss. Anis told me that my idea was good but I had to do some major change due to the lack of information about some characters in my story. She helped me to find some ideas which would make my story more interesting and have more connection. After making the necessary modifications, Miss. Anis told me that I was good to go and could start sketching my characters.
Week 12:
After showing my characters to Miss. Anis, she told me that I should simplify them and try to refer to the comic 'Star vs. the Forces of Evil' and more precisely the character 'Eclipsa Butterfly'
Week 13:
After showing my draft for my webtoon, Miss. Anis said that it was nice, short and sweet.
REFLECTIONS
Week 9:
Coming up with a story was pretty hard at first for me as I had quite a lot of ideas in my mind. However, I tried to choose an idea where I knew that I would enjoy to illustrate but that would also be easy for me to do. Then, after writing my first draft the idea came up pretty easily.
Week 10:
After Miss. Anis feedback, even though I had to change some parts in my initial story, I felt like it was for the better and I also like the fact that by doing so I had more interesting ideas. However, I'm pretty much anticipating the moment where I'll have to illustrate my panels as I already know that it is going to be a lot of work.
Week 15:
This final project felt like a roller coaster. I've had my ups and downs but mostly downs. At first, I felt quite excited of doing the first few panels but after some days after I already felt tired and saw how demanding this project was gonna be. Using Adobe Illustrator was very annoying as not only we cannot really blend the colours like other apps do but it also lagged very much. The amount of time where the app crashed is uncountable and this really tested my patience. On a more positive side, I could say that now I'm pretty much used to Illustrator compared to my first few weeks when the semester just started. I saw how much progress I've made and felt pretty happy about it. I also realised that doing a webtoon is much more demanding than what I expected. I had to do a lot of research since I'm not used to read webtoon at all. It was a bit challenging to show the different expressions mostly for the fight scene. There was some time where I wanted to do some effects but did not know how to do it so it was frustrating as the outcome did not come out like what I wanted to. Additionally, I learned that during the process of doing characters, it is important to consider if I would be able to repeat the same detail again and again as it might become tiring in the long run. I tried to keep this in mind when I had to redo them. Concerning the animation, it went on pretty easy when I got used to it after some time. I would say that this is one of the most difficult project that I did during this semester but I'm quite satisfied of what I did despite the difficulties.
















.png)


Comments
Post a Comment