Illustration and Visual Narrative Task 4

Illustration and Visual Narrative

|| 09/12/24 - 5/01/25 (Week 11 - Week 14)
|| Leong Hui Xuan / 0365793 / Bachelor of design (Honours) in creative media
|| Illustration and Visual Narrative

|| Task 4 : Webcomic (40%)

Table of Content:

1. Instruction

2. Process Work

3. Reflection

INSTRUCTION

Process Work

Task 4: WebComic

For this task, we need to create an animated, wed-ready comic cover and a minimum 3 panels comic page based on the short story "The Monkey's Paw" by W.W. Jacobs including storytelling, composition, and animation with surrealism type af artwork.

My idea is doing the part 1 story, the story takes place beside the fireplace at Mr. White's house, and they are talking about the "monkey;s paw" in the soldier's hand. Mr. White asks the soldier if he can make three more wishes, will he use the monkey's paw? At last, the soldier decides to throw it into the fire.

Figure 1.0 sketches for story

Sketches

Based on the part of the story I chose, I draw out my sketches. The first sketch I use many similar compositions, close ups or medium close ups. So, I try to do diffirent compositions and  frame sizes to make it more contrast in my second sketch, but it still less of the communicate feelings. Lastly, I came out with my third sketch which improve the panels with different sizes, I draw the old man and the soldier with side face to have eye-contact, and the extreme close-up lens of the fire burning the monkey's paw.

Figure 1.1 Reference board

After having the final sketch, I started to find references online about the similar composition manga or the figure pose. Then, I start to digitalise it in Adobe Illustrator with my sketch. I make a outline at first, then only add the details with my pen tools. I use different color to show the contrast as the frame ink.

Digitalisation

Figure 1.2 Digitalise 1

I used red eyeballs and yellow pupils to convey the creepy feeling of being stared at.

Figure 1.3 Digitalise 2

Next, I used Image Tracing (3 colors) to make a chiaroscuro photo, then added a black elipse in the eye part and a red circle in the middle of the black elipse. To make it more surreal, I used the Pen Tool to draw some lines from the red circle to the eye as nerves. It looks like the eye is sticking out and staring at the soldier.

Figure 1.4 Digitalise 3

For the soldiers, I replaced the white part of the eyes with black and used white eyeballs to make the soldiers look a little bit surreal.

Figure 1.5 Digitalise 4

I added an eye in the middle of the monkey's paw to represent the monkey's sense of seeing through everything and to tempt people to use it. The red bloodshot in the whites of its eyes represents its evil, and I edit to color to yellow-gray to show that the monkey's paw is stiff as a corpse that has been dead for a long time.

Figure 1.6 Digitalise 5

I drew the flame shape using the Pen Tool, then added the flame's texture and clipping mask on the shape layer.

Figure 1.7 Digitalise 6

I duplicate the fire layer, lower the opacity and use an eyes drawing photo clipping mask on the copy layer as the "Mokey's eye". Then, place the fire copy layer with eye on the top to make it more realistic.

Figure 1.8 Digitalise 7

Lastly, add the text and the bubble to show their conversations.

Animation

After finish digitalise, I started to animate the panels through Photoshop and After Effects.

Figure 2.0 Animate process 1

Figure 2.1 Animate process 2

Figure 2.2 Animate process 3

I edited the size of the eyes from open to closed frame by frame, downloaded all the frames and made a GIF using Photoshop Timeline.

Figure 2.3 Animate process 4

For the second panel, I let the monkey's paw fall from the upper right to the lower left 

(the fireplace) to show that the soldier's aim was to throw the monkey's paw into the fire.

Figure 2.4 Animate process 5

For the fire part, I use After Effects to duplicate the layer of the fire with eye, then move the copy's layer to the left of the original layer and overlap it. Then, I put 4 keyframes of opacity for the first fire layer, 1st I place it at the begining and change the opacity to 40%; 2rd I place it at 1s with 80%; 3th at 2s with 50% and 4th at 3s with 100%. 

I also put 4 opacity keyframes for the second layer in the middle of each previous layer keyframes, to show an alternating effect. 1st with 20%; 2rd with 80%; 3th with 50% and the 4th with 90%.

Final Panels Animamtion:

Figure 2.7 Animation 3

Figure 2.5 Animation 1

Figure 2.6 Animation 2

COVER 

sketch

Figure 3,0 Cover Sketch

My idea for the cover is he upper part of the cover  dominated by a monkey's paw, the lower part is a flame with monkey eyes, in the middle is a person, and the monkey's paw is absorbing the person's soul.

Figure 3,1 Digitalise 1

I use Pen Tool to trace out the monkey's paw and add a black leather texture for the paw and add a blurring red color texture on the tip of the monkey's paw.

Figure 3,2 Digitalise 2

I use back the fire with the monkey's eye for the fire part at the bottom part of the cover.

Figure 3,3 Digitalise 3

For the person, I use Mask Tool erase the background and edit the color to blue-gray.

The Final Cover:

Figure 3,4  Final Cover 

Animation for Cover

Figure 4.0 Animation Process 1

I edit the fire from low opacity to high opacity in Photoshop as my animation for cover. 

Final Animation:

Figure 4.1 Animation Cover

FINAL OUTCOME

Figure 5.0 Final Outcome Cover

Figure 5.1 Final Outcome Story

Google Slide :

https://docs.google.com/presentation/d/1D-rIZIy-uMIXlVvS9cBzxy3rmCac4snr/edit?usp=drive_link&ouid=100099446047717130518&rtpof=true&sd=true

REFLECTION

The assignment was an emotional roller coaster ride filled with challenges and discoveries. Finding the right composition and visual elements for the comic required multiple iterations and adjustments. My initial sketches lacked emotional impact and contrast, which motivated me to improve the design by incorporating different panel sizes and enhancing the characters' expressions and interactions. I found online pose and composition references to be invaluable in improving the narrative aspects. For me, the process of digitising with Adobe Illustrator was a challenging learning curve. In comparison with Photoshop and the software that I was familiar to, Illustrator's layer management and clipping mask features occasionally felt confusing. With these difficulties, I experimented with various tools and techniques, such as adjusting layer opacity and overlapping textures to simulate a realisti effect. Although the process was challenging I felt a strong sense of accomplishment in bringing my ideas to life in visual form. I was having fun with surrealism themes and graphically capturing the story's creepy feel despite the technical challenges. Even with its flaws, the finished product reflects my labor, perseverance, and progress.