Illustration & Visual Narrative/Final Task: Webcomic
28/11/24 - 05/1/24 (Week 10-Week 14)
Alicia Lo Yann Wei (0357917)
Illustration and Visual Narrative / Bachelor of Mass Communication (Hons) in Digital Media Production
Final Task: Animated Webcomic Cover and One-Page Comic for "The Monkey's Paw"
Task 4: Webcomic
Task Description
For this assignment, we must design a comic cover based on "The Monkey’s Paw," featuring an illustrated masthead created in Illustrator and surreal textures or imagery manipulated in Photoshop, drawing inspiration from "Sandman" covers or surreal Adobe Illustrator artwork. Optional subtle animations can be included to enhance a haunting atmosphere. Additionally, we are to create a one-page animated webcomic in portrait orientation, containing at least three animated panels (in GIF format), assembled in Google Slides. The focus should be on smooth panel-to-panel transitions to preserve suspense and continuity for viewing on mobile devices or tablets.
Process
1. Research/Inspiration
After reading The Monkey's Paw, I chose to draw inspiration from Part 3 of the story for my comic. Below is the paragraphs that I chosen:
Part III
In the huge new cemetery, some two miles distant, the old people buried their dead, and came back to the house steeped in shadows and silence. It was all over so quickly that at first they could hardly realize it, and remained in a state of expectation as though of something else to happen – something else which was to lighten this load, too heavy for old hearts to bear.
But the days passed, and expectations gave way to resignation – the hopeless resignation of the old, sometimes miscalled apathy. Sometimes they hardly exchanged a word, for now they had nothing to talk about, and their days were long to weariness.
It was about a week after, that the old man, waking suddenly in the night, stretched out his hand and found himself alone. The room was in darkness, and the sound of subdued weeping came from the window. He raised himself in bed and listened.
"Come back," he said tenderly. "You will be cold."
"It is colder for my son," said the old woman, and wept afresh.
The sounds of her sobs died away on his ears. The bed was warm, and his eyes heavy with sleep. He dozed fitfully, and then slept until a sudden wild cry from his wife awoke him with a start.
"THE PAW!" she cried wildly.
The passage describes the old man waking in the dead of night to find himself alone, only to hear his wife sobbing by the window. Her grief over their son’s death is profound, and her haunting words, "It is colder for my son," cut through the silence. The room, shrouded in darkness, amplifies the weight of their loss. Later, her sudden, frantic cry of "THE PAW!" injects a jarring intensity, signaling the desperation that grief has stirred within her.
For visual inspiration, I conducted research on monochromatic art styles to capture the tone and atmosphere I envisioned for The Monkey’s Paw. I explored platforms like Pinterest, using keywords such as “monochromatic graphic novel” and “vintage style comic art,” which led me to a variety of designs that felt haunting yet timeless.
Figure 1.1 Monochromatic Art Style Reference
After analyzing the story, I decided to focus on the following key elements in my design:
- Walking Back Home - The somber and shadowy walk home will set the tone.
- Mr. White Waking Up - The moment Mr. White wakes up in the middle of the night to find himself alone, his surroundings cloaked in darkness.
- Talking to His Wife - The intimate and emotional exchange between Mr. White and his wife.
- Shocked by His Wife - The sudden and startling moment when Mr. White is awoken by his wife’s frantic cry.
2. Sketches
Sketches for Cover Page:
Figure 2.1 Sketch for Cover Page
Sketches For Webcomic Page:
Figure 2.2 Sketch for Webcomic
3. Digitalization & Animation
Reference for Cover Page:
.png)
Figure 3.1.1 Reference for Cover Page
Cover Page Design Process:
First, I imported the monkey’s paw illustration into Adobe Illustrator and began by applying an image trace. Using a 3-color trace, I simplified the design. With the Direct Selection Tool, I carefully deleted parts of the traced image piece by piece to reduce complexity, ensuring the final paw appeared less intricate but still recognizable.
Figure 3.2.1 The Monkey's Paw
Next, I worked on creating a woody background to place behind the hand. I researched withered wood for inspiration and traced out the design using the Pen Tool. To achieve a dense, layered look, I duplicated and reflected the traced wood, arranging it so the branches seemed to intertwine and cover the hand.
Figure 3.2.2 The Withered Tree
Figure 3.2.3 The Monkey's Paw and Withered Tree
For a dramatic effect, I wanted blood to flow from the tips of the fingers. Using the Pen Tool, I illustrated dripping blood, adjusting the details until I was satisfied with the realistic, eerie effect.
Figure 3.2.4 The Bloody Finger
For the overall background of the image, I aimed to create a bloody, textured backdrop. I researched suitable references online and traced an image using a 3-color trace to produce a gradient-like effect with red tones and dots. However, I found the result too busy, so I used the Direct Selection Tool to remove excessive details and also change the color of the elements, simplifying it for better visual balance.
Figure 3.2.5 The Bloody Background
Finally, for the text, I wanted a woody, eerie font to complement the overall theme. I explored Dafont and downloaded a font that conveyed a creepy, scary vibe, aligning perfectly with the unsettling atmosphere of the piece.
Figure 3.2.6 DaFont
Panel-by-Panel Breakdown of the Webcomic Design Process:
Panel 1: Walking Back Home
For the first panel, I depicted Mr. White and his wife walking home separately to emphasize the somber tone of the scene. Their isolation is highlighted by their shadows, creating a sense of sadness and distance. I used image trace to simplify the house in the background, removing unnecessary elements for clarity. Next, I used direct selection tool and some pen tools to adjust the angles by lengthen some of it in order to expand the square image into a rectangle frame.
Figure 3.3.1 Walking Back Home
To enhance the eerie atmosphere, I drew withered wood using the Pen Tool, duplicated and positioned it around the house, and applied a 3D effect to tilt the wood, making it appear as shadows on the ground.
Figure 3.3.2 The Withered Trees
Panel 2: Entering the House
This panel captures the couple pushing the door open as they enter the house. Shadows were added to reinforce the dark and melancholic atmosphere. To add dynamic movement, I later animated the door-opening action with several frames to simulate realism.
Figure 3.3.3 Hand Movement
Figure 3.3.4 Hand Movement Animation
Panels 3 & 4: Waking Up
From a high-angle perspective, I illustrated Mr. White lying on his side in bed. I search a high angle view of bed online and try to illustrate the basic shape of the bed. Then, I added the pillows and the blanket for the bed as well. Mr.White is the last thing I added.
Figure 3.3.5 Bed Illustration
In the next two panels, I focused on his gradual realization that his wife is no longer beside him, showing movement by movement as he stirs awake.
Figure 3.3.6 Touching Beside
Panel 5: Establishing Shot
This panel depicts Mr. White sitting upright in bed, tilting his head slightly towards the window as he notices his wife standing there, silhouetted against the outside. To enhance this moment, I added an animation showing the gradual movement of Mr. White pushing himself up from the bed and subtly tilting towards the window. I also find the similar angle of bedroom online for reference.
Figure 3.3.7 Sitting Upright Movement
Figure 3.3.8 Sitting Upright Animation
Panel 6: Wife Turning Back
Here, the wife turns her head slightly to look back at Mr. White. Since the bedroom is shrouded in darkness, Mr. White appears entirely in shadow, adding to the suspenseful mood.
Figure 3.3.9 Mrs.White Angle
Panel 7: Close-Up of the Wife
A closer angle shows the wife replying to Mr. White, her head tilted slightly. To visually emphasize her speech, I applied a 3D effect to the text, making it slightly skewed to indicate her voice, distinguishing it from Mr. White’s silence.
Figure 3.4.0 Mr.White Angle
Panel 8: Mr. White Dozing Off
This panel captures the animation of Mr. White dozing off, showing subtle movements as his head dips and rises. I paid close attention to the shifting shadows, ensuring they matched the motion for a realistic effect.
Figure 3.4.1 Dozing Off Movement
Figure 3.4.2 Dozing Off Animation
In the final panel, I illustrated Mr. White’s shocked expression using the Pen Tool, with bold lines to emphasize his sudden reaction. The accompanying quote, representing his wife’s loud cry, was placed beside him in a large font size to amplify the impact and volume, visually emphasizing the startling moment.
Figure 3.4.3 Awaken Illustration
4. Final Outcome
Cover Page:
Figure 4.1.1 Cover Page
One-page Comic
Figure 4.1.2 Webcomic Page
Link to Google Slides
Figure 4.2.1 Google Slides
Concept Board
Figure 4.2.2 Concept Board
5. Reflection
This task felt like a real challenge. Although we had plenty of time, I spent a lot of effort just on the sketching phase. While I could visualize the images clearly in my mind, translating them onto paper was a struggle. It felt frustrating at first, but as I became more proficient with tools like AI, Photoshop, the Pen Tool, and Brush Tool, I gained confidence.
At the start, I was anxious, worried I wouldn’t complete the task well. However, as I mastered the basics and tackled new artistic challenges—like shifting from a cute style to a creepy one—I found the process both difficult and exhilarating.
This project wasn’t just about creating artwork; it required skills in comic storytelling, composition, and animation. It taught me that good design involves careful attention to countless details, and what I once thought of as simple artwork now seems much more intricate. This experience gave me a new appreciation for art and the effort behind it.
Comments
Post a Comment