Illustration and Visual Narrative / Task 3

 

28/10/2021 - 2/12/2021
Esther Vanessa [0350751]
Illustration and Visual Narrative
Task 3

---

LECTURE 

3 Act Structure

Figure 1.1 3 Act Structure Visualized 

Story Telling Basics

• Central Theme
• A story may have both a major and minor themes
• Major is a theme that can be repeated throughout the whole narrative, while minor is not
• Conflict
• It drives the story, creates tension and builds suspense, makes the story interesting 
• Engage with the audience
• Characters
• Central characters are vital to the development of the story, the plot revolves around them 
• Protagonist has a clear goal to accomplish or a conflict to overcome. Doesn’t always have to be admirable, but they must command an emotional involvement
• Antagonist oppose protagonists, standing between them and the goal. Can be presented in a form of a person, place, thing, or situation
• 3 Act Structure
• Setup
• the world in which the protagonist exists prior to the journey. Usually ends with the conflict being
• Rising tension
• 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 conflicts conclusion. This is where the protagonist either overcomes the conflict, learns to accept it or defeated by it. This is where it ends.

Figure 1.2 3-Act Breakdown

How to create comic/webtoon

• Ideas that come from your experiences are usually the best
• Avoid google and creating ideas from a whim
• Brainstorm
• 4W1H
• Mind Mapping
• Organize the idea
• Practice observing as a designer
• Look at the color, the character design
• Play new games
• Read new manga/comics
• Listen to different genre of music
• Execute ideas into draft
• Write small phrases that changes the idea into reality

Transition in Comics

• Moment-to-moment
• Visual changes to indicate event

Figure 1.3 Moment-to-moment example

• Action to action
• Much more dynamic and isn’t as rigid as moment to moment by utilizing the panel/gutters

Figure 1.4 Action-to-action panels

• Subject to subject
• It focuses on different subject on every panel

Figure 1.5 subject-to-subject example

• Scene to scene
• 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 

Figure 1.6 Scene-to-scene example

• Aspect to Aspect
• Taking in key details or letting the characters focus wonder. It’s also a good way to introduce their environment to a reader, though the players eyes perhaps or inviting them to wonder away from the players a bit

Figure 1.7 Aspect-to-aspect example

• Symbolic
• Symbolic transitions deal with the unreal, the felt, and the imagined. Moving the readers from an imagined or recalled space to either another, or a real one

Figure 1.8 Symbolic example

• Rolling transition
• Utilizes transition of subject to subject/aspect to aspect instead of panels

Figure 1.9 Rolling transition example

• Non-sequitr
• It doesn’t make sense. or does it?
• The most enlightening thing to learn about them, is how resilient the desire in readers is to perceive a narrative between juxtaposed moments or things 

Figure 1.10 Non-sequitr example

---

INSTRUCTIONS

In this task, we are assigned to come up with a horror-themed webtoon comic. Consider 3-act structures but with interesting twists and plots. 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 readers creeped out, scared, and of course we can end the story on a happy note too! Use logline visuals to help establish our narrative.

Project requirements:

• Must be published at webtoons.com

• Story must have 3-acts structure

• Min. 30 - Max. 50 panels

• Illustrations (stick man drawing is not an illustration) can either be colored or greyscale or screen tone shaded render

• Content must be PG-13 and SAFE FOR WORK

TASK

(Click here to jump to Final Results)

I started working on the project by writing the story. Here is what I have in mind in the beginning. 

A girl woke up at 4am and went to the bathroom, did her business and went to wash her hands. When washing her hands, she looked up to the mirror and saw a dark figure with a straight face looking right into her eyes. She looked back to check if anybody’s there but there’s no one. She quickly finishes drying up her hands and went back to her room. However, when she was about to step into her bed, she heard a noise that sounds awfully similar like her hand washing soap fell from the sink to the floor. She was going to ignore it but the noise continues like one by one everything on her shower rack fell. Shaking, she went back into her bathroom, and still, there is no one there. She picked everything up and put it back on the place, realized that the window was left open in the bathroom and maybe the wind pushed her amenities to the floor. With a sigh of relief, she went back to her bed. That’s when she saw the same figure, stood smiling eerily at her in front of her windows beside her bed. She was too scared and passed out right there and then. The next time she woke up she was sweating and her clothes are all wet. She then checked the phone because it’s still dark outside, it was 12am of the same day. She assumed it was just a dream and went back to sleep, little did she know there was still a figure, smiling outside her window, waiting for her to open the curtains.

I got several feedbacks including that it fell flat after she passed out. Ms. Anis suggested that I should change the ending a little bit. I made the necessary changes without removing too much of the plot. Here's is the final storyline. Changes are indicated in italics.

The next time she woke up she was sweating and her clothes are all wet. She went to her closet to get a change of clothes and went back to the toilet. Once she was in the toilet everything she was holding fell from her hand as she saw her toilet is a mess with blood written on the walls saying “i see u”.

After Ms. Anis and Ms. Jen gave me the greenlight, I went ahead and start working on initial sketches. Personally it took me quite a while to start the work. I had ideas but I didn't know how to execute it. However, I talked to my friends and consult with seniors who are also in the design course and gave me references which then I can input in my work. 

Here is the initial sketches, keep in mind that it is just a sketch so my work was not as neat as I want it to be. 

This is the final sketch after Week 12's feedback. Finishing the initial sketches, I went ahead to Illustrator to start illustrating there. 

Illustration

Illustrating is HARD and SLOW. I am pretty sure the problem is me because I haven't really master all the tools perfectly and my work flow is not fluid when using pen tool and all that illustrator things, but nevertheless Ms. Jen mentioned that it's going to be alright (and as a good student, I believe in her) so I think it's going to be alright, I just hope future me is not too mad at the me right now. 

Figure 2.1 Illustrating the first page

(Hello. This is Esther from the future. Ms. Jen was right, it turns out fine. So long as you're patient and want to give extra time for your work, it will turn out fine.)

Now, let me break down the process of my work. For the most part, it is pretty straightforward. Initially, I 'traced' from my sketches using the pen tool. I also made sure to copy and recycle assets (work smart not just hard, kids!) to lessen the workload.

Figure 2.2 Illustrating Process

Figure 2.3 Illustrating Process

One thing I noticed when I was illustrating was that I am not as careful and as organized (with my layers) as I want it to be. This I will regret a little bit in the near future. 

Then comes the part where I have to illustrate the creature. The creature in the initial sketch was not final and I knew from the start it was subject to change. The creature from the sketch lacks something interesting that will be the main focus for the viewers.

So I ventured out into Pinterest and look for ideas for a monster. Here's what I had in the beginning and what I found on the internet.

Figure 2.4 What I had in the beginning

Figure 2.5 Reference

Figure 2.6 Reference

I love these designs. They're not exceptionally scary in which I myself (who is a notoriously known scaredy cat amongst my friends) can still enjoy studying and looking at them. I then take one step further and look up on YouTube how to create textures. I found out that there's this stylize option in Illustrator. I think it's fitting for my creature. From this too, I was suggested by a friend to name the character as ScribbleMan. Further on, I also used this to name the series for the webtoon.

After I got the foundation for ScribbleMan down, I proceed to create a creepy expression for him. 

Figure 2.7 Process

Figure 2.8 Process

After some contemplation, I settled for this specific design for ScribbleMan.

Figure 2.9 Final ScribbleMan

Figure 2.10 Final ScribbleMan (zoomed in)

From then on, Illustrator-wise, it is pretty smooth sailing. I added more details, adjusted the colors which I mostly just darken it to emulate a creepier and trippy emotion. After finishing the details, I tried to carefully organize, delete certain non-existent paths, group each panel together and separate them between pages. Another thing though, Scribbleman's asset is very heavy, it made my Illustrator lag every time I want to move around my work. (My laptop worked REALLY really hard for this project overall). Not only that, Illustrator has gotten on my nerves once or twice as it would suddenly shut down. Thank goodness Illustrator has recovery files, it would still lose a little bit of progress towards the minutes before it shut down. 

One other thing we have to create are the thumbnails to post into webtoon. This year it has slightly different criteria. That is we have to have 2 different version for the main thumbnail; vertical thumbnail for phone users and normal square thumbnail for web. We also have to have an episode thumbnail in also a square dimension. I had pretty much know the design for the thumbnails.

Figure 2.11 Thumbnail making process

Figure 2.12 Me, so close to throwing my whole laptop away (or throw up myself..) because Illustrator likes to act up

After I uploaded the whole webtoon to the website. I went ahead and started the animation process. 

Animation

SIGH. I do not enjoy this as much as I want to. It is very tedious and I'm walking on eggshells while working on animating this. I am never much of a fan working on animation. However, I got the hang of it a little bit by the end of this project. 

First of all, what I did was making separate documents for each page. In this separate documents, I separated the assets that I want to animate. I also had to make sure the aspect ratio of 1280:720 is maintained through out. 

Figure 2.13 Separating the document in Illustrator

I then imported the assets to After Effects and started working on the animation. I used the basics tools such as opacity and position to animate simple things. 

Figure 2.14 Animating process

I also used masks and mask path to create certain characters animation such as the following where I want the text to show up according to the path. 

Figure 2.15 Mask Path

Another note is I also used a parent layer for certain assets like the wind in the window scene.

Figure 2.16 Parenting a layer

Another interesting process is when I want to animate the eye opening and closing. For this I have to also use mask. Essentially, I had to create a shape that resembles the eye and set the alpha matte to the layer I want it to cover (which is the black filled layer). Here are the pictures of the process.

Figure 2.17 Process

Figure 2.18 Process

Attached above is the video of the result of that process. 

With that, I am done with the hardest part of the animation. Next, I moved on to Premiere Pro in which I compiled all the mp4 video from each page and add sound effects and background music.  What I did in Premiere Pro was pretty given. I fixed the transitions and snip sound effects to fit in the whole animation. 

Figure 2.19 Compiling and editing process

Figure 2.20 more process

Now that that's done, I am pretty much finished with the project. So without further ado, here's the final submission for Task 3. 

Final Submission

Webtoon Link

Fig 2.21 Final Submission Webtoon (PDF) 

Fig 2.22 Final Submission Motion Comic (MP4)

---

Feedback

3-Act Story

• Was a bit flat after the scene going to the bathroom, make necessary changes to the ending

On the Sketch

• Work with the shading
• Merge the panel where she put back her bottles and the window open together
• Change the "remember me" text to "I see u"
• Change the onomatopoeia of the bottle falling to crash or splatter

On the Illustrator

• Should add the sfx "unlock" at the panel where she opens the door

On After Effects

• Create a solid color for background to indicate the panel to panel animation

---

Reflection

A pat (or two) in the back for me for actually accomplishing this. I have only been using Illustrator for less than 5 months in my entire life; even lesser for After Effects and yet I am assigned for this sort of project which I myself cannot say is small. The work is tedious and I have to be meticulous. This might be the only project for the entire semester 1 where I had to actually pull an all-nighter until 5 am just to do very minimal progress because I realize that I am a bit slow with my work. From this project, I learnt so much about story telling and how to visualize it. I also learnt a LOT about animation and the working curves of it. This project is also a slap to my face to be more organized. (pls. for the sake of your health.) From this I also learnt so much about the basics of illustrating more than ever, explore more on ways to bring the 2d illustrations into life. 

Nevertheless, it is very rewarding to see the webtoon and the motion comic comes to life. I know for sure I can improve more in the future if I ever encounter a similar project. I enjoyed thoroughly visualizing the scenes and actually creating it in illustrator; made me laugh for a minute or two with the comical expressions I had drawn for my character.