Labels

ILLUSTRATION AND VISUAL NARRATIVE TASK 3 - WEBTOON STORY & MOTION COMIC

 ILLUSTRATION AND VISUAL NARRATIVE TASK 3  - WEBTOON STORY & MOTION COMIC


13.5.2022 - 1.7.2022 (Week 7 - Week 14)

Er Xin Ru (Melanie) | 0354939 
Bachelor Of Design (Hons) In Creative Media | Taylor's University
Subject: COM61304 - Illustration and Visual Narrative

 Final Project
- Webtoon Story & Motion Comic

INSTRUCTIONS


LECTURES 

Week 7 | 3-Acts Structure
Storytelling basics

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.
Major Theme: An idea that is intertwined and repeated throughout the whole narrative.
Minor Theme: An idea that appears more subtly, and doesn’t necessarily repeat.

2.Conflict
The conflict is what drives the story. It’s what creates tension and builds suspense, which are the elements that make a story interesting. If there’s no conflict, not only will the audience not care, but there also won’t be any compelling story to tell. Conflict is what engages an audience. It’s what keeps them white-knuckled, at the edge of their seats, waiting impatiently to see if the protagonists will overcome their obstacle. 

3. Characters
A story usually includes a number of characters, each with a different role or purpose. Regardless of how many characters a story has, however, there is almost always a protagonist and antagonist.
Central Characters: These characters are vital to the development of the story. The plot revolves around them. 
Protagonist: The protagonist is the main character of a story. He or she has a clear goal to accomplish or a conflict to overcome. Although protagonists don’t always need to be admirable, they must command an emotional involvement from the audience.
Antagonist: Antagonists oppose protagonists, standing between them and their ultimate goals. The antagonist can be presented in the form of any person, place, thing, or situation that represents a tremendous obstacle to the protagonist.

4. Three-Acts Structure
Setup: The world in which the protagonist exists prior to the journey. The setup usually ends with the conflict being revealed.
Rising Tension: The series of obstacles the protagonist must overcome. Each obstacle is usually more difficult and with higher stakes than the previous one.
Conflict: The point of highest tension, and the major decisive turning point for the protagonist.
Resolution: The conflict’s conclusion. This is where the protagonist finally overcomes the conflict, learns to accept it, or is ultimately defeated by it. Regardless, this is where the journey ends. 

Traditional three-acts structure chartF



INSTRUCTIONS - WEBTOON


The Assessment Outline
Can you sense the upcoming battle between these two? Just like the story arcs for this manga/anime, you will be coming up with an UNFORGETTABLE FIGHT SCENE themed comic! You will also get a chance to join an official WebToon competition too!

You are now tasked to create a one shot Web Toon short with the premise of a FIGHT! genre story of your own creation. Consider 3-act structures but with interesting twists and plots and action pack scenes. It can be wordless and presented only with illustrations, or it can be detailed with stories, filled with speeches and texts.

Think of creating a premise for a story that makes your readers creeped out, scared, and of course you can end the story on a happy note too! Use logline visuals to help establish your narrative.

Project requirements:
Must be published at webtoons.com
Story must have 3-acts structure
At least 60 panels
Illustrations (stick man drawing is not an illustration) can either be coloured or greyscale or screentone shaded render.
But if you are interested to join the competition, your Web Toon has to be fully coloured!
Content must be PG-13 and SAFE FOR WORK

*Required visual file and resolutions (JPG only) 

Before i create my Story, here are the steps before create by understanding them.
Setup: Introducing the world the character is in before the story begins. Usually ends with conflict being revealed to audience.

Rising Tension: Series of obstacles to be overcome by the protagonist. Usually is more difficult and has higher stakes than the previous one.

Conflict: Highest point of tension. Major decisive turning point for the protagonist.

Resolution: Conflict's conclusion. This is where protagonist overcomes, accepts or is defeated. This is where everything ends. 

Storytelling Basics

Central Theme:

  • What the story is really about. Can have the author's personal opinion on the subject.
  • Major Theme: Idea intertwined & repeated through the whole narrative.
  • Minor Theme: Appears more subtly & doesn't necessarily repeat

Conflict

  • What drives the story. Creates tension & suspense which makes it interesting.
  • Engages the audience.

Characters

  • Includes a number of them within a story.
  • Each has their own roles & purpose.
  • Central Characters: Characters are vital to the development of the story. Plot revolves around them.
  • Protagonist: Main character. Has a clear goal/conflict. Commands emotional involvement from the audience.
  • Antagonist: Opposes, problematic. Is a obstacle to the protagonist.
Planning the Story

The story begins with two girls playing haunted games called "The Coined Spirit". The main character Mel is so afraid of this game, but she has no choice and is forced to play with her best friend, Xinru. Everything went smoothly, and nothing odd happened after the game. When Mel went to school the next day, she realized many abnormal things were happening continuously. Most of her classmates' belongings have been lost, and later on, many students are vomiting in the canteen. Some students found more dead animal bodies in their bags some more...

After these scary scenes keep on happening, Mel notices that her best friend is not in school. So she went to Xinru's favorite hangout place to look for her. Suddenly, Mel saw Xinru looking at a bird weirdly, then suddenly Xinru grabbed on the bird and bit its head on the spot... then spit the bird's head on Mel's face. So Mel was so scared and shocked, so she cried out loud and ran to the teacher and reported to her everything. 


The next day, the teacher was found dead on the staircase, and Mel was so scared; she didn't know what to do and felt so helpless. Then Xinru brings Mel to a very strange place and walks into an abandoned house. Xinru changed her emotion from frightening to evil and pushed Mel into the abandoned house and lit up the house, trying to kill Mel. Luckily, there are a few boys playing football nearby, and they quickly call for help, and Mel is saved. When Mel's brother heard about the incident, he immediately came to the hospital, and Mel told her every odd thing that happened to her. Mel's brother thinks that this is not an easy situation, and he goes and looks for his friend Zoe's help. Zoe's a psychic and has many experiences. When she saw Xinru's behavior, she immediately saw Xinru possessed by a middle-aged ghost. The middle-aged ghost was a criminal who kidnapped and killed many teenage girls, which is why after his death, he still remained to seek teenage girls for possession.


Near the end, while Mel is sitting on the swing alone, Xinru sneaks to her back and abuses her. Luckily, Zoe quickly appears and uses her ability to transfer the ghost from Xinru to her body. After the ghost left Xinru's body, she felt disgusted and afraid, so she puked out. When everyone thought it'd ended already, suddenly Zoe has lost her conscious and is controlled by the ghost. Zoe suddenly ran to Mel and Xinru to try to kill both of them, but Zoe tried her best to awaken back her consciousness; lastly, she seemed like won over the struggle. While everyone was celebrating, Zoe's face suddenly showed an evil smile... And the story ends here...


Sketching Panels

After I was satisfied with my story and I proceed with my sketching panels. Since I don't have an iPad, i used to draw using a pencil and paper and plan to scan it using an scanner apps called Cam Scanner.  Firstly, I roughly drew out all the panels to make it easier for future me to trace them out using an Artline pen, and get an idea of how many panels to fit into a page.  

Here are some of my sketches after drawing with pencil and scan it using Cam Scanner to save it as pdf:


Figure 1 - Cam Scanner my sketching work progress 

Figure 2 - Put the Scan Sketches artwork in Ai to saved as pdf

Figure 3 - Sketches Panels PDF

Sketching Panels after I was satisfied with the story as well as the planning of panels, I decided to sketch them using an artline pen to make it more clearer and to touch up some of the scene I missed. Here are how it seems after I used Artline pen to drew again of my sketching, since drawing using pencil is not obvious enough.


Figure 4 - Using Artline pen to trace my Sketches

Figure 5 - Put the Sketches with Artline pen trace in Ai to saved as pdf

Figure 6 - Sketches Panels with Artline Pen in PDF

Digitizing WebToon
I transferred the sketches into Adobe Illustrator & photoshop for further editing. Firstly, I used photoshop to edit the colour of the image line become more darker as remove the background as png of the photo will  make the line become thinner. After that, I used a function in Adobe Illustrator u called image trace to make the outline out. Below is the process:

I choose this scene as one of the example how I do with Image Trace in Adobe Illustrator:


Figure 7 - Photoshop edit 1

Figure 8 - Photoshop edit 2

Figure 9 - Total 20* panels (left one)

Figure 7 - First step of image trace

Figure 8 - Second step of image trace

Figure 9 - Third step of image trace

Figure 10 - Final step of image trace

Next is process of How I colour it in Adobe Illustrator, 

Figure 11 - Process of colour the whole story Panels

Here are what its mean in the artboard,
Left : Sketch picture with Artline pen 
Middle: Final colouring 
Right: Image trace - Clipping mask and adjust the panels before colouring

During this process, I touched up some of the areas and image as I missed in the sketches. After that, I proceed it to colouring. Below was my screenshot in the middle of the process. As the story is quite mystery and have a creepy feelings, I decided on using colour of gradient grey, black & white with some red colour attach with it to express the whole storyline.

FINAL DIGITALIZING/OUTCOME

Total 60dpi | 20 pages

Figure 12 - Final digitalize with colour of my story panels [800pxl x 1280pxl]

Thumbnail/Cover of "The Coined Spirit"
Figure 13 - Digitalize Story Panels 1

Figure 14 - Digitalize Story Panels 2

Figure 15 - Digitalize Story Panels 3

Figure 16- Digitalize Story Panels 4

Figure 17- Digitalize Story Panels 5

Figure 18- Digitalize Story Panels 6

Figure 19- Digitalize Story Panels 7

Figure 20- Digitalize Story Panels 8

Figure 21- Digitalize Story Panels 9

Figure 22- Digitalize Story Panels 10

Figure 23- Digitalize Story Panels 11

Figure 24- Digitalize Story Panels 12

Figure 25- Digitalize Story Panels 13

Figure 26- Digitalize Story Panels 14

Figure 27- Digitalize Story Panels 15

Figure 28- Digitalize Story Panels 16

Figure 29- Digitalize Story Panels 17

Figure 30- Digitalize Story Panels 18

Figure 31- Digitalize Story Panels 19

Figure 32- Digitalize Story Panels 20

Animating Motion Video

After that, I arrange my storyboard panels at Adobe Illustrator and ready to transport the storyboard panels into Adobe After Effects. Here are all the process and I'm ready to create my animation. Below is how I managed my compositions.

          

Figure 33 - Animating Motion Video - Story Board

Figure 34 - Animating Motion Video - Story Board 1

Figure 35 - Animating Motion Video - Story Board 2

Figure 36 - Animating Motion Video - Story Board 3

Figure 37 - Animating Motion Video - Story Board 4

Figure 38 - Animating Motion Video - Story Board 5

Figure 39 - Animating Motion Video - Story Board 6

Figure 40 - Animating Motion Video - Story Board 7

Figure 41 - Animating Motion Video - Story Board 8

How I manage my StoryBoard before putting in Adobe Effect

Figure 42 - Animating Motion Video - Story Board PDF

After that, I arrange my composition and image to rearrange them neatly to avoid messiness in the end. Here are all the steps how I create my animation in Adobe Effects.

Figure 43 - After Effect Step 1


Figure 44 - After Effect Step 2 Timeline arrangement

Figure 45 - After Effect Step 3 animation arrangement

After I compiled all the compositions together, I added the following audio:

For the music, I decided to use this 2 songs and sound effect as I thought it was quite match with the storyline which give the feel of mystery and creepy tone of the songs. I also choose few of the song to match it with some of the scene to have different contrast when seeing it. After that, I uploaded in my YouTube videos.

Upload on my Youtube

FINAL SUBMISSION:

Link to WebToon: https://www.webtoons.com/en/challenge/the-coined-spirit/list?title_no=786514 

Comic Link: https://www.webtoons.com/en/challenge/the-coined-spirit/the-coined-spirit-1-20/viewer?title_no=786514&episode_no=1

"THE COINED SPIRIT"


Figure 46 - WebToon - "The Coined Spirit", PDF.

YOUTUBE VIDEO LINK: https://youtu.be/RkfT-G3m2X8

Video 1 - Youtube Video Final Project "The Coined Spirit", Youtube. 2min

Final Project "The Coined Spirit", documentation, pdf.

REFLECTION

Firstly, It was really hard for me. But I was always curious and wondered how people created WebToons, but now I finally know. I used to think I could never do it, but I enjoyed the process very much as I can learn so much, even with my struggle to constantly draw with new creations and ideas. I also have never fully built a story so intimately unlike this one. Usually, I don't read any comic or write my own story, but this project forced me to think more about how things look like, and made me realize how important settings are, and how characters are portrayed to the viewer. I am grateful for that, as I don’t think I would have realized the importance of it had it not been for this project. Also, this project provided a great learning experience on how to transfer Adobe Illustrator to After Effects for animation that I am actually not good at. Overall, I’m happy that I've successfully done with this final project, and the knowledge I’ve gathered along the way.


Labels:

Comments

Post a Comment