Illustration & Visual Narrative | Task 4: Web Comic
28/11/25 - 5/1/25 (Week 10 - Week 15)
Nicco Chew Jin Xun (0366563)
Illustration & Visual Narrative | Bachelor of Design (Hons) in Creative Media
Task 4: Web Comic
Lectures
[ Week 11 ]
Scott McClouds Transitions
Scene-to-Scene
Aspect-to-Aspect
Movement-to-movement
Action-to-Action
Subject-to-Subject
Dave Mcken Covers
.comiccover.jpg)
Instructions
<iframe
src="https://drive.google.com/file/d/128BYgQAGI6Lx6RqcZLlstbxrcf0Amodn/preview"
width="640" height="480" allow="autoplay"></iframe>
Assignment Brief
- create an animated, web-ready comic cover and a minimum 3 panel comic
page based on the short story "The Monkey's Paw" by
W.W. Jacobs
-This assignment brings together storytelling, composition, and animation to capture the eerie atmosphere of the narrative, formatted for a mobile-friendly, portrait display. https://www.sfu.ca/~swartz/monkeys_paw.htm
-This assignment brings together storytelling, composition, and animation to capture the eerie atmosphere of the narrative, formatted for a mobile-friendly, portrait display. https://www.sfu.ca/~swartz/monkeys_paw.htm
- Design an illustrated masthead for the comic cover in Adobe
Illustrator. Apply Scott McCloud’s comic transition types (from
Understanding Comics) to tell a part of the story visually,
emphasizing animated transitions that enhance the
storytelling.
- use photoshop Photoshop to manipulate images, adding textures and
effects inspired by Dave McKean’s Sandman covers to achieve a
surreal, atmospheric style. This will be key for creating a
suspenseful, eerie mood that aligns with The Monkey’s Paw. Search
for “surrealistic adobe illustrator artwork”
Webcomic Animation: Using Google Slides, students will
create a portrait-oriented comic cover and a one-page comic with
animated GIFs.
- animate at least three panels of the comic, and may also animate
parts of the cover to draw viewers’ attention.
- Week 11: Introduction, story analysis, and animation basics in Google Slides
- Week 12
- Week 13: Focused tutorials, animation techniques, panel composition, feedback sessions, and work time.
- Week 14: Final critique, presentation, and submission.
Task / Work Process
Reference
Chosen Part
He took the paw, and dangling it between his forefinger and thumb, suddenly threw it upon the fire. White, with a slight cry, stooped down and snatched it off.
"Better let it burn," said the soldier solemnly.
"If you don't want it Morris," said the other, "give it to me."
"I won't." said his friend doggedly. "I threw it on the fire. "If you keep it, don't blame me for what happens. Pitch it on the fire like a sensible man."
Rationale
I chose this part of The Monkey’s Paw because it’s such a key moment where you can feel the tension building. The back-and-forth over the paw really shows the conflict between fear and curiosity. I used close-up shots and bold colors to make the scene feel intense, especially with the fire and the paw standing out. The panel layout helps show the characters' emotions and the rising drama. My goal was to make the scene visually exciting and really bring out the eerie vibe of the story.
Sketches
Colour Palette
Process in [ Photoshop ]
- making cover using pen tool and trace each layers
- digitising comic started with 5 panel
- Using the Pen Tool, I traced the hand and paw with clean, precise lines, emphasizing the contours of the fingers and the monkey paw. Besides, I draw curve lines beside the thumbs to emphasize this sentence 'he took the paw, and dangling it between his forefinger and thumb'. Then, I applied the effects of grain and mosaic tiles to the background.
I used the Pen Tool to draw the hands and paw, adding curved lines and details.
The fire was created with 3 layers to give it a glowing, flickering appearance.
Besides, I put the bold words 'Better let it burn' beside the hands. Then, I applied the effects of grain and mosaic tiles to the background.
I applied the effects of grain and mosaic tiles to the background too.
We also given task to animate at least 3 panels of the comic. Then, I decided to animate each panel. First, I transferred the ai file into adobe after effects to animate them.
- Panel 1: I animated the hands moving up and down, related to this sentence "He took the paw, and dangling it between his forefinger and thumb"
- Panel 2: I animated the fire's opacity so that it looks like glowing
- Panel 3: I animated the fire's opacity and move it position every 2 seconds so that it looks like glowing. Besides, I also make the words 'Better let it burn' rotate.
- Panel 4: I animated the monkey paw moving up and down, and the sentence "If you don't want it Morris," and "give it to me."
- Panel 5: I animated the window so it looks like raining and lightning, and the sentence "If you keep it, don't blame me for what happens. Pitch it on the fire like a sensible man."
Final Outcome
- JPEG -
- MP4 -
Reflections
This project was one of the most challenging yet rewarding experiences this semester. It required a lot of time and patience, especially since every element had to be created from scratch using Illustrator. Along the way, I explored tools and techniques I hadn’t used before, and learning to animate and create a GIF was a completely new and exciting skill for me. There were definitely struggles, like managing layers and figuring out the animation process, but with weekly feedback and guidance, I managed to improve and complete it. This task really brought together everything we’ve been taught throughout the module, and while it was tough, it was also incredibly satisfying to see the final outcome.
Comments
Post a Comment