Illustration and Visual Narrative / Task 3

14.10.2021 - 25.11.2021 (Week 8 - Week 14)

Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Illustration and Visual Narrative / Taylor's University
Task 3 : Graphic Novel

LIST

LECTURES
<back to top>

L E C T U R E

Week 7: 3 Acts Structure

Today, Ms. Anis introduced us on "How to Make a Story" for our next assignment, webtoon. So, ms. Anis introduced us about the basic in storytelling:

Theme

What the story about
Often : storyteller's personal opinion about something

Major theme : base theme
Minor theme : following the major theme (not mandatory but can create more complex story if used)

Conflicts

What drives the story
Create tension and suspense
Engage the audience

fig. 1, storytelling basics, source; lecture video, Week 7 (07/10/2021)

Characters

Have role, mostly always a protagonist and an antagonist

Central Character : vital
Protagonist : usually the main character, must command emotional involvement from the audience
Antagonist : opposing of protagonist, usually standing between the protagonist goals. (can be place, thing, or situation.)

fig. 2, characters, source; lecture video, Week 7 (07/10/2021)

Three Act Structures

Setup : the world of the story
Rising Tension : the rising problem, before the conflict
Conflict : the main problem (have to be interesting)

fig. 3, three acts structure, source; lecture video, Week 7 (07/10/2021)

fig. 4, illustration of three act structure, source; lecture video, Week 7 (07/10/2021)

Week 8: Transitions

Comics = frame to frame storytelling

fig. 5, idea, source; lecture video, Week 8 (14/10/2021)

ALWAYS start with keywords!!

Ideas can come from = experiences / imaginations, never came from browsing google aimlessly.

fig. 6, browsing aimlessly, source; lecture video, Week 8 (14/10/2021)

Best way to come up with an idea;

fig. 7, come up with and idea, source; lecture video, Week 8 (14/10/2021)

"THE MORE YOU STRESS ON FINDING THE IDEAS THE MORE IT WILL STRAY YOU" - Ms. Yvonne

fig. 8, how idea born, source; lecture video, Week 8 (14/10/2021)

Week 9: Transitions in Comics

Gutters

Empty space between panels
Can indicate the comics's storyline flow, since comic is static
Example:

fig. 9, example of gutters, source; lecture, Week 9 (21/10/2021)

Gutters use the principle of closure, means if the character's going to be hit with axe in panel 1, and the next panel says "EEYAA!!", it's up to the reader to decide what happen, and how it happens.

"Closure = observing the parts, but perceiving the whole." - Scott McCloud.

Gutters act as an invisible messenger within comics in that they pass information but are simply an empty space. Comic artists need gutters as well as the reader’s participation in drawing conclusions from them in order for time and motion to take place.

Transition

Comics have various style of transitions:

1. Moment to Moment

Indicate changes of time / story in the narrative
Example:

fig. 10, example of moment to moment, source; lecture, Week 9 (21/10/2021)

2. Action to Action

Mostly in superhero comics
Require forms of actions
Dynamic gutter and panels
Indicate the movement of the characters
Example:

fig. 11, example of action to action, source; lecture, Week 9 (21/10/2021)

You can see the subject keep moving faraway, and the guy is battling. The right one showcase the utilize of the dynamic panels. Panel to panel panel is stiff while this panel and gutters help the action.

3. Subject to Subject

Similar to moment to moment
Involving characters
Example:

fig. 12, example of subject to subject 1, source; lecture, Week 9 (21/10/2021)

As you can see in the example, the first panel shows a woman eating then moved to the second subject, so we can know there's a conversation between them.

fig. 13, example of subject to subject 1, source; lecture, Week 9 (21/10/2021)

We get to see that the woman has an eye contact with the man, also the author shows the back of the man which means the man has something to do with the woman.

4. Scene to Scene

What continues between a period of time
Can show change of locations
Example:

fig. 14, example of scene to scene, source; lecture, Week 9 (21/10/2021)

In the first picture, we can see that the location located in a building, showed by the window and the furniture. Then, the author drew a "Hollywood" to indicate a different place, and in the next panel it's showed specifically in a house. So, the location came from a building to exactly on a house in Hollywood.

5. Aspect to Aspect

Method to jump around the scene
Concentrate on small details
Reader as if in a floating device
Example:

fig. 15, example of aspect to aspect, source; lecture, Week 9 (21/10/2021)

We can see that the location is on a dinner. The place is still on a dinner when the place is zoomed out to the inside of the dinner's. Then, we saw that the woman eats a mashed potato there.

6. Symbolic

Interesting way to visual elements
Can use abstract manner
Can utilize colors
Example:

fig. 16, example of symbolic, source; lecture, Week 9 (21/10/2021)

The one in the left indicates the slow moving of time. The second is people that live in a city but actually feeling lonely by seeing the box.

7. Rolling Transitions

Similar to aspect to aspect
Not using specific panel
Has flow
Rolling motions
Example:

fig. 17, example of rolling transition, source; lecture, Week 9 (21/10/2021)

8. Non Sequitur

Make no sense but make sense
Abstract, surreal

fig. 18, example of non sequitur, source; lecture, Week 9 (21/10/2021)

In the end there're no rules as long as long as the story make sense and the readers know what happening in the plot.

Onomatopoeia

How we visual the sound that happen on the scene.

fig. 19, onomatopoeia, source; lecture, Week 9 (21/10/2021)

Click here for the full further reading about the book.

P R A C T I C A L

Week 8: Part I, Draft

This week demonstration, Ms. Jennifer showed us on the first step of making the web comic in Adobe Photoshop. We have to decide the placement of the panel / how we'll tell the story.

fig. 20, panelling, source; lecture video, Week 8 (14/10/2021)

Then, we make a rough sketch for the next step of making the comic.

fig. 21, sketching, source; lecture video, Week 8 (14/10/2021)

The next is adding shadows. This can make us plan ahead where the light source came from, etc.

fig. 22, shading, source; lecture video, Week 8 (14/10/2021)

Week 10: Part II, Animating

A. Adobe Illustrator

On week 10, Ms. Jennifer demonstrated our next step after we made our sketch. First, we have to create new file, using the film animation preset, here's how it'll be:

fig. 23, New File, source; lecture video, Week 10 (28/10/2021)

After that, the AI interface will look something like this with the green ruler which is a scale for something like TV, etc.

fig. 24, animation 1, source; lecture video, Week 10 (28/10/2021)

Before making the animations, we have to prepare our object to be grouped per part based on what'll we make for the movement.

fig. 25, animation 2, source; lecture video, Week 10 (28/10/2021)

The drawing can be made by using a color and line for the details.

fig. 26, detail, source; lecture video, Week 10 (28/10/2021)

For typographical elements, it's better to use create outline like this so the other software can easier to recognize it.

fig. 27, create outline, source; lecture video, Week 10 (28/10/2021)

NOTE FOR ADOBE ILLUSTRATOR:

Group the object, to make easier adjustment.
If we use After Effects, it'll recognize the layer as a one object, so better use AI.
When we grouped an object, it'll locked as a one object, but we can move it by dragging it out or "Release to Layers".
Rename the layer for easier recognition.
It's ok to create lots of files rather than in a file.

B. After Effects

So, after we finish with adjusting things in Adobe Illustrator, we can continue making the animation in After Effects.

NEW COMPOSITION:

To start, go to Composition > New Composition > Adjust the width and height (Rec Ratio: 1280 : 720) > Adjust the fps (Rec: 25 fps) > Adjust Resolution (Rec: HDV 720, but depend on computers).

fig. 28, AE setting, source; lecture video, Week 10 (28/10/2021)

After creating the composition we have to Import > File > Select the file > Import (using Composition - retain layer size) > Open.

fig. 29, file-new, source; lecture video, Week 10 (28/10/2021)

ROTATION

To duplicate a movement, just select the points and easily use ctrl c and v as usual.

fig. 30, AE rotation, source; lecture video, Week 10 (28/10/2021)

OPACITY

We can also play with opacity:

fig. 31, AE opacity, source; lecture video, Week 10 (28/10/2021)

LINKING

To link an object to the other object, you can use this:

fig. 32, AE linking object, source; lecture video, Week 10 (28/10/2021)

To make the object stay within the background, select the object layer then use Effect > Set Matte, or you can directly right click on the object, then choose Effect.

fig. 33, AE set matte, source; lecture video, Week 10 (28/10/2021)

Then, choose the background layer.

fig. 34, bg layer, source; lecture video, Week 10 (28/10/2021)

FINALISING

For the final, we have to make a new composition, and add the composition we've made:

1. From here,

fig. 35, AE finalizing, source; lecture video, Week 10 (28/10/2021)

2. Drag to the composition window,

fig. 36, AE finalizing 2, source; lecture video, Week 10 (28/10/2021)

3. Re adjust the yellow thing that create sequences.

fig. 37, AE finalizing 3, source; lecture video, Week 10 (28/10/2021)

MASKING

Ms. Jennifer also taught us how to make a simple masking:

(select the object > right click > mask > new mask)

fig. 38, AE masking, source; lecture video, Week 10 (28/10/2021)

You'll see a white square like this:

fig. 39, AE masking 2, source; lecture video, Week 10 (28/10/2021)

Then, we can adjust the mask and create something like this:

fig. 40, AE masking 3, source; lecture video, Week 10 (28/10/2021)

RENDERING

Then, Ms. Jennifer taught us how to render it:

(Export > Add to Render Queue > for this assignment choose Quicktime.)

fig. 41, AE rendering, source; lecture video, Week 10 (28/10/2021)

Then, choose the best setting.

fig. 42, AE rendering 2, source; lecture video, Week 10 (28/10/2021)

Choose Quicktime as the video output.

fig. 43, AE rendering 3, source; lecture video, Week 10 (28/10/2021)

NOTE FOR AFTEREFFECTS:

When importing AI layers to AE, objects won't be rasterized, to solve it we have to:

For object with no animations:

(Click on the logo)

fig. 44, importing, source; lecture video, Week 10 (28/10/2021)

For object with lots of animation:

(Select object > right click > Create > Create Shapes from Vector Layer)

fig. 45, vector layer, source; lecture video, Week 10 (28/10/2021)

Anchor point always represent the joint in the anatomy.

INSTRUCTIONS

<back to top>

VISUAL RESEARCHES & IDEA EXPLORATION
<back to top>

Overall Idea (pose, framing, composition)

I did some researches for how I'm going to draw, what pose am I going to draw, what comes next, etc. Here I compiled them all as one pdf so it won't be a lot of scrolling:

fig. 46, idea 1, Week 11 (01/11/2021)

I also researched for some cat actions references in https://www.boredpanda.com/jumping-cats/

Characters Design + Storyline Adjustment

I think drawing too much cat will be very overwhelming for me, because I'm not used to draw animal, so I changed "the cats" into cat.
For the main protagonist, I changed form she to he, because I think it'll suit better with the story.
I made the antagonist using a woman-snaked monster reference I remembered from some culture. (Can check further reading for more)
I skipped and cut some part of the story so the panel wouldn't exceed the number given.

fig. 47, adjusted idea 2, Week 14 (25/11/2021)

Description:

I choose the cat to be white colored, since black will mostly used for the setting (because it's not bright), and white color does represent positivity, purity, and safety.

Coloring

I planned to make my comic using monochrome color, using black and white color scheme. It's not because I'm lazy, but I think since it's a horror comic, it'll suit best.

I also read some thriller-horror webtoons, and many of them using black and white colors, if not, monochromatic:

fig. 48, references, Week 14 (25/11/2021)

I found out it's more creepy, so I planned to use the similar vibes. Also, I read in Quora that black-grey-white color can suggest somberness and moodiness.

Typefaces

Since my comic is a semi silent comic, only using onomatopoeia, I searched for some suitable typefaces I planned to use:

fig. 49, typefaces, Week 14 (25/11/2021)

EXERCISE

<back to top>

1. Storyline and Planning

After learning about the three act structure, I made my first story. The lectures said that inspirations and ideas often came from our experiences.

I'm actually a horror-phobic person, I never wants to do things about horror. The last time talking about horror, I was traumatized that I can't sleep for a week when I was in elementary school. So I want to relate it a bit with my feeling throughout my surroundings. I planned to do something about "horror psychology". I also wants to add the terms of schizophrenia because I was inspired with some drawings in my idea explorations, so, I made this story:

fig. 50, adjusted idea 2, Week 11 (01/11/2021)

Ms. Anis said my story is good but the ending is a little bit flat, maybe need some adjustment, the endings kinda don't fit in, so I adjust my story into this:

fig. 51, adjusted idea 2, Week 12 (11/11/2021)

I'm actually quite not confident with my story, I thought it was too random and magical instead of horror, but Ms. Anis encouraged me that my story is actually a good story.

I planned on how my character will be looked like: (also written in Visual Researches)

fig. 52, character designs, Week 14 (25/11/2021)

2. Draft Sketching

I planned how the panels will work. So, I drew some very rough sketches of the paneling:

fig. 53, thumbnails, Week 11 (01/11/2021)

After that, I proceed in making the clean sketch:

fig. 54, clean sketch, Week 14 (25/11/2021)

3. Adobe Illustrator

After that, I placed all of my clean sketch in AI's artboards:

fig. 55, AI preview, Week 14 (25/11/2021)

Before I started tracing it in AI, I tried page 1 first and turns out I think I'm doing a wrong step, because the AE won't detect grouped vector. So, that's why I make them on a new file. It's also just to make easier preview for me.

Before tracing, I also marked the area that I wanted to make movement, since I thought it's near the deadline, I have to work faster.

fig. 56, movement planning, Week 14 (25/11/2021)

I traced some pages, and this is the WIP view:

fig. 57, WIP, Week 15 (30/11/2021)

I finally finished my webcomic, here's the preview:

fig. 58, Done, Week 15 (02/12/2021)

4. Webtoon

After I'm done with my web comic, I began to create the thumbnails to be posted on webtoon. To be honest I used some asset that I've made on my comic, and rearrange them. So, this's my thumbnail:

Vertical Thumbnail

fig. 59, Vertical Thumbnail, Week 15 (04/12/2021)

Square Thumbnail

fig. 60, Square Thumbnail, Week 15 (04/12/2021)

After that, I began to publish them in Webtoon:

fig. 61, Webtoon posted, Week 15 (04/12/2021)

The webtoon can be accessed here.

5. After Effects

I want to keep the flow, and I don't want to use too much motion here, so I did some simple animation for my motion comic

First I arranged them on Adobe Illustrator, using the given format. Then, I started to animate them on AfterEffects. Since mine was using simple animations, I decided to arrange them on "page" not "panel":

fig. 62, AI to AE, Week 15 (03/12/2021)

After that, I compile them at once. I noticed that it exceed the maximum durations, so I adjust some animations that I think too slow. Then, I finally got my 3 minutes motion comic!

I added a background music from my motion comic, I used this track:

fig. 63, BGM, source; (https://youtu.be/U-xs6SbOcjY), Week 15 (05/12/2021)

5. Submissions

fig. 64, Final WebComic (PDF), Week 15 (05/12/2021)

fig. 65, Final Motion Comic, Week 15 (05/12/2021)

Motion comic can be seen here. (YouTube)

Webtoon can be read here. (Webtoon)

FEEDBACKS

<back to top>

Week 9:

Week 10:

Week 11:

(01/11/2021): Good story, but the ending is a bit too flat, also the cat can maybe have more role in the climax. would be better if the horror torture related to the gashapon, the cat will save the protagonist in the ending,
(03/11/2021): The story is much better.

Week 12:

(11/11/2021): Thumbnail looks cool. Make the last cat drawings more animal-like because the last pose of the cat in the artwork looks more human or Anthropomorphic than animal.

Week 13:

Week 14:

(25/11/2021): No problem with the following narrative, just improvise the ceiling light.
(30/11/2021): Looks alright, nice flow.

Week 15:

(02/12/2021): Excellent! The flow is clear, no more further comment on the comic.

REFLECTION

<back to top>

This final task have made me believe that I'm able to do things that I thought impossible. I don't believe that I really made a webtoon and a motion comic. By doing this task, my skills on using the pen tool is getting better and better! What I've learnt from this task also, is about time management and further planning. When I planned something, things are easier and clearer compared to when I didn't make any planning. It also taught me about prioritizing which's important; which's can be done later, etc. I learnt lots of things from this task.

FURTHER READING

<back to top>

Movement and Expression

Metamorphosis of motion into lines

(https://issuu.com/niklasworisch/docs/booklet_loti_inside_inside_whole)

(all image sourced from the book)

The Doodles

fig. 1, old paintings

As a form of communication, human draw things such as doodles to masterpieces. Line drawing is the simplest form of visualization. Visualization has been used since thousand years ago.

Anthropomorphism

Most ideas in former sequential art like Trajan's Column, ideas are expressed through combining related images to make something like timelines. It's called image language, and the concept can be found in comics and caricatures. Creator started to work with more visual information and typographical elements like texts. Things like movement, expression, and emotions started to be abstracted into line. They even upgraded it to distortion, scaling, emphasis, and even exaggeration to improve more about the viewers' perceptions.

fig. 2, sequential art origin

Physiognomy

Physiognomy notions : relationship between the appearance and characteristic of something (especially on the face). Leonardo da Vinci actually said that it's "false," because it has no scientific foundation, but still, this idea can make something's more defined.

fig. 3, physiognomy

Onomatopoeia

To express the idea of emotion, expression, motion by using line, we use onomatopoeia. It's a word that phonetically imitate, resembles, or visualize and to suggest sound. Font, size, shape, coloring, distortion of the typography can define the sound more precisely.

Onomatopoeia can differ from one language to another, example:

"Quack" (English), "Coin" (French), "Mak" (Romanian), etc.

Examples:

fig. 4, onomatopoeia

MOTION LINES

This was the origin of motion line back in 1837:

fig. 5, motion lines origin

Some artists upgraded them into some shadings. Then, Cross Hatch existed and were ultimately used to define light shadow, and the direction go the movement:

fig. 6, cross hatch

Since the illustration of "une historie de pompier" by Adolf Oberlander started to use burning and smoking, Elements like fire, water, earth, started to exist anywhere.

fig. 7, elements

Then, photography existed. But, photography that time is still bad as the line still has a blurry not a sharp image.

- How do motion lines work?

fig. 8, physical equations

Using the physical equation of motion, describe motion in terms of displacement, direction, velocity, acceleration, time and speed. Some artists use velocity or gradient to create a motion.

An American book artists, Carmine Michael then assigned on "Flash Comic" and he created the visual language of Flash's speed.

fig. 9, flash

Thus, as time goes on, motion lines become more contemporary as more artists created their own visual languages:

fig. 10, contemporary lines example 1

fig. 11, contemporary lines example 2

They even used emoticons and pictogram to express emotions. As time goes by, in comics and cartoon, specific symbols were then born:

fig. 12, specific symbols example 1

fig. 13, specific symbols example 2

Reference:

Worisch, Niklas. (2015). Movement and Expression - Metamorphosis of Motion into Lines. issu

Nure-Onna

(https://en.wikipedia.org/wiki/Nure-onna)

Nure-onna is a Japanese reptilians creature with the head of woman and a body of snake. Legend said that they consume humans, but they don't have any single appearance/personality.

Similar to isoonna
Appears at sea / rivers
The name comes from the concept of how their hairs are always wet.

WEB Reference:

WIKIPEDIA. 2016. "Nure-Onna", accessed on November 25, 2021 (14.03, UTC+7), https://en.wikipedia.org/wiki/Nure-onna

Nyi Blorong

(https://3rdparallel.com/queen-of-the-southern-sea-nyi-roro-kidul-and-nyi-blorong/)

Nyi Blorong is a queen of snakes along the valley on the slope of Mt. Kemukus, and is very fond of man.

When she still ruled the kingdom as Dewi Angin Angin, she always look for young man to absorb their purity, which is a ritual to increase her power.

She's also a guard, titled as a high rank commander by Nyi Roro Kidul. They both maintain the balance of Southern Sea Kingdom.

WEB Reference:

Alona. n.d. "Queen of the Southern Sea, Nyi Roro Kidul and Nyi Blorong, Are They the Same Entity?", accessed on November 25, 2021 (16.30, UTC+7), https://3rdparallel.com/queen-of-the-southern-sea-nyi-roro-kidul-and-nyi-blorong/

Search This Blog

Abigail Kartika Darmowinoto (0350525)

Illustration and Visual Narrative / Task 3

Comments

Post a Comment

Popular posts from this blog

Experiential Design / Task 1

How to Create Jump Link

Experiential Design / Task 2