Illustration and Visual Narrative / Task 3 + Final Project

Week 7 - 16 (09.05.2022 - 12.07.2022)
Yung Siew Weng / 0339847
Illustration and Visual Narrative / Bachelor of Design (Hons) in Creative Media
Task 3 + Final Project

WEEK 7 @ 09.05.2022 - 15.05.2022
NARRATIVE WRITING

PRATICAL @ GRADIENT

Fig 1.1 Progress, Practical week 7 (week 7 /13.05.2022)

Fig 1.2 Final outcome, Practical Week 7 (week 7 /13.05.2022)

Mr. Hafiz also introduced us on "how to animate in Photoshop". Below was the outcome of the exploration :

Fig 1.3 outcome, animated in Photoshop, GIF (week 7 /13.05.2022)

LECTURE WEEK 7 @ 3-ACTS STRUCTURE

1. STORYTELLING BASICS
  • 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 start 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 necessary repeat.
  • 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. 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.
  • Character
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 a protagonist and antagonist.

Central character : The vital of the development of the story.
Protagonist : The main character of the story.
Antagonist : can be presented in the form of any person, place, thing or situation that represents a tremendous obstacle to the protagonist.
  • Three-Acts Structure
Fig 1.4 Traditional 3-Acts Structure Chart (week 7 / 13.05.2022)

1. Setup : the world in which the protagonist exists prior to the journey. The setup usually ends with the conflict being revealed.
2. Rising Tension : The series of obstacles the protagonist must overcome. Each obstacle is usually more difficult and with higher stakes than the previous one.
3. Conflict : The point of highest tension, and the major decisive turning point for the protagonist.

TUTORIALS @ LECTURE REPORT 6

INSTRUCTIONS :
You will need to prepare a short story for you to base your character on. Employ the three-acts structure but limit the word count to maximum 300 words only.

Fig 1.5 example template of short story (week 7 / 13.05.2022)

Act 1 – Set Up

A long time ago, there was a bridge that erected between villages A and B, which served as the only link between them. 

 

Act 2 – Conflict

One day, there was a hippo, named ppopo and a bear, named Brear. Both of them wanted to cross the bridge. The impatient Brear had criticised ppopo yet Ppopo felt mad of him which leads both of them didn't give in; instead, they both backed up so that they could reach the opposite side effortlessly. So they began bickering, pushing each other away, and initiating a conflict. While they were bickering, they were absolutely surprised by an unexpected sound. One side of the bridge began to collapse, going to lead them to fall off.

 

Act 3 – Resolution

Fortunately, Ppopo snagged the last silver lining, the bridge's pine. Ppopo didn't set Brear aside because of the argument and criticism; instead, he took hold of Brear's hand and let Brear to climb upon his body. At the end, they both eventually made it onshore. Of course, they are both embarrassed, apologise to one other, and propose that they fix the bridge jointly. After several days of struggle, they were able to repair the bridge. Popo eventually sent Brear go, inviting him to cross the bridge to get at his destination smoothly. At the end, both of them arrived their destination.


(270 words)
WEEK 8 @ 16.05.2022 - 22.05.2022
E-LEARNING WEEK
WEEK 9 @ 23.05.2022 - 29.05.2022
TRANSITION

LECTURE WEEK 9 @ TRANSITION

1. TRANSITION
  • Moment-to-Moment
Fig 2.1 Moment-to-moment (week 9 / 27.05.2022)

One of the most common forms, metaphorically think of it as a blink or two between seconds of a film, it can be used to slow down and draw out action, but be aware, if over utilized it can make your comics dull and laborious to draw and read. These are both from Dream Life. 
  • Action-to-Action
Fig 2.2 Action-to-Action (week 9 / 27.05.2022)

Action to Action is more or less a less finely sliced version of Moment to Moment, and typically focuses on significant events. or movement from panel to panel, and over larger intervals of time between moments. These examples come from Sea of Red. In the sinking shot the similarity to Moment to Moment is overt, it’s both I think. The next, a more classic example, camera angles change to best suit the action depicted. This makes it more purly Action to Action to my mind.
  • Subject-to-Subject
Fig 2.3 Subject-to-Subject (week 9 / 27.05.2022)

A cut between to related moments, but focusing on a dierent subject in the same scene. Think conversation in a restaurant, or a shift of focus onto another actor in the scene. 
  • Scene-to-Scene
Fig 2.4 Scene-to-Scene (week 9 / 27.05.2022)

A Scene is a 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
Fig 2.5 Aspect-to-Aspect (week 9 /27.05.2022)

Aspect to Aspect can be an interesting way to jump around a scene, 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.

  • Rolling Transition
Fig 2.6 Rolling Transition (week 9 /27.05.2022)

This form of transition from one ‘panel’ or idea to the next.

WEEK 10 @ 30.05.2022 - 05.06.2022
CONSULTATION WEEK
WEEK 11 - 14 @ 06.06.2022 - 03.07.2022
SELF-DIRECTED CLASS

TASK 3 + FINAL PROJECT : 

MODULE INFORMATION


TASK 3 + FINAL PROJECT INFORMATION


INSTRUCTIONS :
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.

TASK 3 @ WEBTOONS
Create a story with 3 -acts structure, at least 60 panels and published at webtoons.com

IDEA AND EXPLORATION 
At the very beginning of this task, I did some idea exploration on the storyline and created a story on the week 9 (23 - 29.05.2022).

Act 1 – Set Up

A long time ago, there was a bridge that erected between villages A and B, which served as the only link between them. 

 

Act 2 – Conflict

One day, there was a hippo, named ppopo and a bear, named Brear. Both of them wanted to cross the bridge. The impatient Brear had criticised ppopo yet Ppopo felt mad of him which leads both of them didn't give in; instead, they both backed up so that they could reach the opposite side effortlessly. So they began bickering, pushing each other away, and initiating a conflict. While they were bickering, they were absolutely surprised by an unexpected sound. One side of the bridge began to collapse, going to lead them to fall off.

 

Act 3 – Resolution

Fortunately, Ppopo snagged the last silver lining, the bridge's pine. Ppopo didn't set Brear aside because of the argument and criticism; instead, he took hold of Brear's hand and let Brear to climb upon his body. At the end, they both eventually made it onshore. Of course, they are both embarrassed, apologise to one other, and propose that they fix the bridge jointly. After several days of struggle, they were able to repair the bridge. Popo eventually sent Brear go, inviting him to cross the bridge to get at his destination smoothly. At the end, both of them arrived their destination.


I named the story as PPOPO and BREAR, which 'PPOPO' means to hippo, whereas 'BREAR' came from the basis of a BEAR.

Then, I started to sketch up the idea of story. Meanwhile, I took a longer time to create the storyboard, sketching the idea on Procreate (a drawing application on iPad) :

Fig 3.1 draft, sketch #version 1 - PDF (week 12 /19.06.2022)

WEEK 12 / 19.06.2022
FEEDBACK
The idea of booming the tummy is cute. Overall, great but make sure it consists of at least 55 panels.

Following Ms. Anis's feedback, I began to experiment with drawing the idea for the entire form of my plot. The following are the idea sketches that I developed and produced using Procreate:

Fig 3.2 final sketch #version 2 (week 13 /26.06.2022)

After the full sketch was ready, I started my adventures on digitalising the sketch on Adobe Illustrator (AI). I documented the process in the PDF below (feel free to scroll it!) :

Fig 3.3 Progress, digitalisation in AI - PDF (week 15 /04.07.2022)

After the experiment, I created the final compilation for my motion comic (POPPO and BREAR). The final compilation in PDF was recorded below :

Fig 3.4 Final outcome, 'PPOPO and BREAR' - PDF (week 15 /05.07.2022)

According to the task requirements, we are required to upload the entire comic in JPG format into the google drive, as well as uploaded to webtoons.com.

Fig 3.5 screenshot, uploaded to google drive (week 16 /12.07.2022)

The process while uploading the motion comic to webtoons.com :-
Based on the webtoons.com requirements for thumbnails, I created it according to the stated ratio (square thumbnail, vertical thumbnail and thumbnail).

Square thumbnail (1080x1080 px) :

Fig 3.6 screenshot, progress of square thumbnail (week 15 /12.07.2022)

Fig 3.7 Final outcome, square thumbnail (week 15 /12.07.2022)

Vertical thumbnail (1080x1920 px) :

Fig 3.8 screenshot, progress of vertical thumbnail (week 15 /12.07.2022)

Fig 3.9 Final outcome, vertical thumbnail (week 15 /12.07.2022)

Thumbnail (160x151 px) :

Fig 3.10 screenshot, progress of thumbnail (week 15 /12.07.2022)

Fig 3.11 final outcome, thumbnail (week 15 /12.07.2022)

After the thumbnails were created, i continued the progress on uploading my motion comic to webtoons.com.

Fig 3.12 screenshot, webtoons.com (week 16 /12.07.2022)

Fig 3.13 screenshot, webtoons.com (week 16 /12.07.2022)

Fig 3.13 screenshot, published on webtoons.com (week 16 /12.07.2022)

FINAL OUTCOME FOR TASK 3 @ WEBTOON


Final Compilation in PDF :
Fig 3.14 Final outcome, Task 3, 'PPOPO and BREAR' - PDF (week 16 /12.07.2022)

FINAL PROJECT @ MOTION COMIC
Based on the webtoon you created in Task 3, you are to animate the visuals according to sequences and flow of the story. Consider timing and transitions of the visuals that strongly reflect the narrative through characters, panels, particle effects, texts etc. You can consider using parallax or limited animation on movements and background using After Effects.

IDEA AND EXPLORATION 
SUMMARY : Based on the webtoons.com outcome, I transformed the entire artboards (layers) from Adobe illustrator to Photoshop to animate it. I used the features of [timeline > create video animation] to create the motion comic. Then, use Adobe Premiere Pro to insert the final audio and sound effects.

The application used : AI, PS, PR

At the very first, I separated the panels from AI, framing them to different artboards, export them as PNG and animated through PS.

Fig 4.1 screenshot, framing into different artboards, AI  (week 15 /10.07.2022)

The progress in Photoshop :
I export all the panels (in different layers from AI) to PS and start to frame it.

Fig 4.2 Before positioning, frame 1 (week 16 / 11.07.2022)

Fig 4.3 After positioning, frame 1 (week 16 / 11.07.2022)

I even adjust some layers by converting them to smart object, free transform, animated them (some shaky, walking effects). 

Fig 4.4 free transform (week 16 / 11.07.2022)

Next came the other layers/panels, I framed a total of 27 frames to animate the video.

Fig 4.5 Screenshot, label of 27 frames (week 16 / 12.07.2022)

After a series of framing, I got the final result of the full video, with no audio adjustments.

Fig 4.6 Final outcome in Photoshop, without audio (week 16 /12.07.2022)

The progress in Premiere Pro :

Fig 4.7 screenshot, progress in Premiere Pro (week 16 /12.07.2022)

I tried several background music as well as sound effects to reach the most suitable audio outcome :

Fig 4.8 screenshot, sound effects testing (week 16 /12.07.2022)

The materials (audio - BGM and sound effect) that used to construct the video :

After a long period of effort and investigation, i eventually obtained the finalised result. I exported it as MP4.

Fig 4.9 screenshot, export from Premiere Pro (week 16 /12.07.2022)

FINAL OUTCOME FOR FINAL PROJECT @ MOTION COMIC

Fig 4.10 Final outcome, Final Project, 'PPOPO and BREAR' (week 16 /12.07.2022)


FEEDBACK

The following feedback was received by Ms. Anis, the module lecturer :

WEEK 12 / 19.06.2022
FEEDBACK
The idea of booming the tummy is cute. Overall, great but make sure it consists of at least 55 panels.


REFLECTION

Throughout the task, my main thought was that I was pleased I had the idea to complete it. As someone who's not good at drawing, fight scene manga seems like a daunting thing to me. Conflict-based comic, in my opinion, should evolve into a sense of action, such as fighting, murdering, and so on. Whatever it is, all formations appear challenging to me, and it is not my thinking or style. 

At first, it was quite difficult. To acquire the concept, I watched a lot of anime and cartoons. But I'm glad I was able to come up with the idea and execute it after the exploration. Yet, I discovered that everyone has their own way of doing things; the same is true of design; each piece reflects the author's psyche and style.  

Overall, even though I just finished my project at the eleventh hour, I missed a lot of sleep and entertainment, but it's the same; when I see the outcome, when I share it with my family and friends, I'm still extremely delighted to get compliments! There are no words to adequately capture this delight. <3

Comments

Post a Comment