Illustration &; Visual Narrative - Task 2
2023.10.6 - 2023.10.20 / Week 7 - Week 9
Velicia Raquel Dewi Setiawan / 0369188 / Bachelor of Design (Honours) in Creative Media
Illustration and Visual Narrative
Task 2
JUMPLINK:
- Task 1 | Vormator Exercises
- Task 2 | Decisive Moment
- Task 3 | Digital Triptych
- Task 4 | Self Titled
- Final Compilation &; Reflection
1. LECTURE
Week 6 - Online Class (Oct 30, 2023) Composition and Depth
<iframe src="https://drive.google.com/file/d/19pMqVJUUA74BtQd4CG7a91lvtupCzuLt/preview" width="640" height="480" allow="autoplay"></iframe>
1. COMPOSITION THEORY 1 // VISUAL TYPES AND SHOTS
The most challenging part in composition is how to arrange the elements in your visual effectively – and the answer is to arrange them in a way that brings out meaning. One of the movies that did a good job at it is "The Grand Budapest Hotel"
Aspect Ratio
For the scenes taking place in the 1980s, the aspect ratio is 1.85:1 and this is how the movie begins. Then we move back in time to the 1960s and the aspect ratio changes to 2.40:1. The central story that took place in the 1930s is shown in a 1.3:1 ratio. Each period is presented using the ratio that could have been used in a movie at the time.
![]() |
|
|
Colors
For the 30's, we have more red/pink colors cast in the overall image and a bit Harsher Light. For the 60's part, the image looks warmer and tinted towards yellows and oranges. Have a look at the 2 frames below:
![]() |
|
|
Framing
The framing throughout the movie is consistent and very unique to Wes Anderson. We can see a lot of symmetrical compositions and shots that are constructed to reflect the perspective of a specific character in a film. Lots of straight-on views and quite a heavy usage of wide-angle lenses.
![]() |
|
|
In the below frames we can see some interesting composition choices that would not be possible with wider aspect ratios:
![]() |
|
|
The most interesting shot is the one when Edward Norton enters the frame through the hole in the floor when he discovers that the prisoners are gone. The 4:3 frame and a low-angle shot allow the director to show the soldiers standing behind him.
![]() |
|
|
In many shots, the high or low camera placement allows to fill the 4:3 frame more naturally instead of keeping the headroom on top of the characters.
The last interesting visual component of the movie is the frame in a frame kind of shots. This one specifically works really nicely in this particular aspect ratio creating natural frames that are aligned with the frame nicely.
![]() |
|
|
1. Visual Narrative
Visual storytelling is a formidable force at the cinematic experience's core. It speaks directly to our emotions, forming a profound connection between the audience and progressing the story being told through creative, visual means.
![]() |
Fig 1.1 Violet Evergarden, Episode 10: "Loved Ones Will Always Watch Over You" (Kyoto Animation, 2018), Week 6(Oct 30, 2023). |
Components like the atmosphere of the setting or the clothing that the characters wear can all change the way that viewers see the plot. And by altering these components during the film, we can show the progression of the plot or the change in the characters.
Symbolism is a powerful tool, enabling us to convey meaning through carefully chosen visuals. From the use of color symbolism to indicate emotions and themes, to the juxtaposition of images to create narrative parallels.
Lighting plays a crucial role in setting the mood and atmosphere. Examples such as the warm hues of a sunset that give a sense of tranquility, or the stark contrast of harsh shadows that heighten tension.
Visual storytelling techniques leverage framing and composition to convey relationships between characters, establish power dynamics, and highlight key narrative elements. The placement of characters within the frame, the use of different angles, and the incorporation of negative space all contribute to the storytelling process.
Visual metaphors and motifs are a staple in visual storytelling. By using allegorical images or recurring visual motifs, filmmakers can convey complex ideas, emotions, or themes without explicitly stating them in dialogue.
Montages and parallel editing are also effective visual narrative techniques. Through the juxtaposition of different images or sequences, filmmakers can convey the passage of time, the development of characters, or the progression of events. Montages can condense moments into a powerful sequence that propels the story forward.
Non-verbal communication plays a significant role in visual storytelling as well. Actions, gestures, and expressions become a language of their own, allowing characters to convey their thoughts, feelings, and intentions without uttering a word also deepening our understanding of the characters and their relationships. Whether it’s a lingering glance, a subtle smile, or a tense body posture.
Example
One standout example is the opening sequence of “Up” (2009), where the life story of the protagonist, Carl Fredricksen, is depicted in a beautifully poignant montage. Without a single word of dialogue, we witness the love, loss, and dreams of Carl and his wife Ellie through a series of perfectly composed visuals.
![]() |
|
|
Another notable example is the opening sequence in “Back to the Future” (1985). This opening is so jam-packed with exposition, it’s unbelievable. We learn everything we need to know about Doc Brown, one of the main characters, from a single tracking shot. Doc’s obsessed with time, he’s an inventor, his inventions often don’t work, his mansion burned down, he has a dog named Einstein, somebody stole some plutonium, and – oh, wait – it’s under the table. All that information is subliminally given to the viewers in less than four minutes before you’re introduced to any of the main characters.
![]() |
|
|
2. Visual Flow
Your composition also determines the path of a viewer’s eye through the visual. in Demon Slayer: Kimetsu no Yaiba the "water breathing technique" is often used to guide the viewer's eyes.
![]() |
Fig 2.1 Demon Slayer: Kimetsu no Yaiba – The Movie: Mugen Train (UFOTABLE, 2020), Week 6(Oct 30, 2023). |
3. Visual Balance
Even though you can’t know the exact path a viewer’s eye is going to take, you can nudge things one way or another.
![]() |
|
|
Composition in Cinematography / BLADE RUNNER 2049
4. Visual Hierarchy
The way you visualize and focus your subject matters can have huge effects on the composition the artists make
![]() |
Fig 4.1 Christina of Denmark &; Anne of Cleeves (The Hans Holbein
Younger,(1538, 1539), Week 6(Oct 30, 2023). |
2. Type of Shots
1. Establishing
An establishing shot is a shot in filmmaking or television that sets up the context for the scene ahead, designed to inform the audience where the action will be taking place. It shows the relationship between people and objects and establishes the scene's geography.
Harry Potter establishes many of its' scenes with shots of Hogwarts. They're often used to convey seasons changing, or the movement of the school year. One way to do this is to cut to the same shot of the school we saw several sequences back, but now the new shot has a snow-covered Hogwarts, indicating it's now wintertime.
2. Bird's Eye View
Also known as overhead shots, is when the POV is directly above the subject. It's somewhere around a 90-degree angle above the scene taking place.
- To capture action
- For Power, a bird's eye view shot is used in American Psycho, In one scene, Patrick Bateman tries to time a chainsaw drop onto a fleeing woman, and the overhead view shows us both the view of the woman and Patrick's process of timing the drop.
- To capture the details in a scene, filmmakers often use insert shots to isolate and give meaning to those details.
- and more in
3. Frame within Frame
Whether you choose to use foreground or background shapes to create this effect, the technique emphasizes and highlights the underlying meanings within your story and breaks up the information in your frame.
![]() |
|
|
What is a frame within a frame used for?
- Direct the viewer's focus
- Create deeper meaning
- Establish an observational perspective
4. Medium shot
Captured at a medium distance from the subject. It is used for dialogue scenes but also depicts body language and more of the setting.
![]() |
Fig 4.1 Titanic, Week 6(Oct 30, 2023). |
Why use a medium shot?
- Show important actions and costumes.
- Glue together separate shots through constant actions.
- Present visuals that are disarming, comedic, and informal.
You can see how the filmmakers used the medium shot to show a bit of confusion while still keeping both actors in the frame so that the viewer understands The Stakes.
![]() |
Fig 4.2 Hunger Games, Week 6(Oct 30, 2023). |
Arrange the focus to be in the middle ground, by using size differences and light/shadow contrast to highlight the main focus.
Focus on the furthest view of the visual in the background, by using shapes and light/shadow contrast to highlight the main focus.
Reference:
5. Close Up
The close-up is an intimate moment, a look into a character’s mind. It causes us to “catch” emotions, as the rest of the scene plays out.
- Generate strong emotions
- Signal something important
- Show an actor's facial expressions
![]() |
Fig 5.1 Get Out (Universal Pictures, 2017), Week 6(Oct 30, 2023). |
6. Worms Eye View
This shot makes the subject seem extremely tall and superior.
![]() |
|
|
Reference:
- BOOK ; FRAMED INK
- ebenschumacherart
- https://thefutur.com/
- mob psycho animation (explosion 100)
- newscientist.com
- Using the Rule of Thirds in Graphic Design
Week 7 - Online Class (Nov 6, 2023) Composition and Depth
<iframe src="https://drive.google.com/file/d/1P8T6j8n4_zW21eWyBdDrsz5dlegvn3XQ/preview" width="640" height="480" allow="autoplay"></iframe>
1. COMPOSITION THEORY 3 // FORE, MID AND BACKGROUND
Composition refers to how the image is put together, and if used right can take your art to a new level. When composing a scene there are usual elements of foreground, midground, and background.
![]() |
|
|
![]() |
Fig 1.2 Adventure Time (Cartoon Network, 2010), Week 7(Nov 6, 2023). |
![]() |
Fig 1.3 Adventure Time (Cartoon Network, 2010), Week 7(Nov 6, 2023). |
![]() |
Fig 1.4 Adventure Time (Cartoon Network, 2010), Week 7(Nov 6, 2023). |
2. DESIGN FLOW
Good arrangement of visual focus using foreground, middle-ground, and background should also indicate a sense of movement, and rhythm in your design. From Hibike! Euphonium
![]() |
|
|
![]() |
|
|
![]() |
|
|
![]() |
|
|
Design flow is the way that your eye moves or is led around a composition. A design with good flow will lead the viewers’ eye throughout the layout, moving from element to element with ease. As a designer, you’ll be able to influence the way the viewer will digest your design. You can do this by using a combination of type, line, contrast, color, and photography.
![]() |
|
|
How to Create a Clear Visual Flow:
- Generally, visitors will gravitate towards the most prominent visual on the screen, often a photo but sometimes a headline or call-to-action.
- Imagery should be selected carefully so that it enhances the message you are trying to convey, not distract from it.
- Ask yourself, “What do I want my users to find first”? Then make it easy and quick to act on it.
- Use the direction of images to control the speed and direction of flow.
- Create barriers when you want to reverse the eyes’ direction. (For example, you can use color blocks or whitespace to guide the viewer around.)
- Create open paths to allow easy movement through your design.
- Use contrasting colors and shapes to pull the eye where you want it to go.
![]() |
Fig 2.6 Web Design, Week 7(Nov 6, 2023). |
![]() |
|
|
![]() |
Fig 2.8 Someone as the foreground, another as a middle ground, the wall as the background, Week 7(Nov 6, 2023). |
![]() |
Fig 2.9 The middle ground as the focus, highlighted by the candlelight,
Week 7(Nov 6, 2023). |
![]() |
Fig 2.10 Someone as the foreground, another as a middle ground, the wall as the background, Week 7(Nov 6, 2023). |
- dribble
- Great Gatsby Movie (has great composition)
Week 9 - Online Class (Nov 20, 2023) Limited Animation
1. Example Animated GIFS
From ThunderPaw Comic
![]() | |
|
![]() |
Fig 1.2 ThunderPaw Gif Comic, Week 9(Nov 20, 2023). |
![]() |
Fig 1.3 ThunderPaw Gif Comic, Week 9(Nov 20, 2023). |
![]() |
Fig 1.4 ThunderPaw Gif Comic, Week 9(Nov 20, 2023). |
From Rebecca Mock Illustration
![]() |
Fig 1.5 Rebecca Gif Illustration, Week 9(Nov 20, 2023). |
![]() |
Fig 1.6 Rebecca Gif Illustration, Week 9(Nov 20, 2023). |
![]() |
Fig 1.7 Rebecca Gif Illustration, Week 9(Nov 20, 2023). |
2. Videos about Secondary Action
3. Secondary Action
This action adds to and enriches the main action and adds more dimension to the character animation, supplementing and/or re-‐ enforcing the main action. A secondary or continuation of action prompted by the primary action where all of these actions work together to create a more seamless animation.
For example, the action of flapping a cloth. The arm swinging is the primary action, while the cloth movement compliments the action.
Fig 3.1 Secondary Action, Week 9(Nov 20, 2023). |
A fast and effective way to heighten the interest in the animation is by adding a realistic complexity by underpinning the impact of an action by aesthetically unfolding a series of connected actions. However, this is more likely to be minor actions supporting a main action.
|
4. Stable Diffusion
Stable Diffusion is a computer program that creates images when provided with text prompts. In addition to generating images, it can replace parts of an existing image and extend images to make them bigger. Adding or replacing elements within an image is called inpainting, and extending an image to make it bigger is called outpainting. These processes can alter any image, whether the original image was made with AI or not.
![]() | |
|
Stable Diffusion uses something that’s known as a latent diffusion model (LDM). It starts with random noise that resembles an analog television's static. From that initial static, it goes through many steps to remove noise from the picture until it matches the text prompt. Stable Diffusion was trained on many images from the internet, primarily from websites like Pinterest, DeviantArt, and Flickr. Each image was captioned with text, which is how the model knows what different things look like, can reproduce various art styles, and can take a text prompt and turn it into an image.
|
Make an animated GIF with Stable Diffusion (step-by-step)
Stable diffusion tutorial. ULTIMATE guide - everything you need to know!
- Choose an urban legend that interests you and aligns with the editorial theme.
- Research the chosen legend thoroughly and gather visual references.
- Create a concept mood board to explore the style, color scheme, and overall visual direction.
- Write a brief description of your chosen urban legend and how you plan to interpret it in a minimalist style.
- Begin sketching your editorial illustration. Focus on creating a clear and compelling composition.
- Develop your illustration in Adobe Illustrator. Pay attention to clean lines, simple shapes, and minimalism.
- Experiment with the use of color and typography, keeping the editorial context in mind.
- Start planning the minor animations you intend to incorporate.
- Refine your illustration, paying close attention to details, balance, and visual impact.
- Add animations to your design using Adobe Illustrator or other animation software.
- Test the animations to ensure they enhance the overall narrative without being distracting.
- Write a short artist statement explaining your design choices, including how your illustration reflects the chosen urban legend and the editorial context.
- Submit your completed editorial illustration as a high-resolution digital file (preferably vector format).
- Include a link to a presentation or video demonstrating the animations.
- Submit your artist statement and any process documentation.
- Concept and interpretation of the urban legend (20%)
- Design quality and minimalist style (30%)
- Effective use of color, typography, and layout (20%)
- Integration of minor animations (15%)
- Artist statement and process documentation (15%)
- Interpret a passage of text (story); illustrate the decisive moment (any of the turning points).
- You Must use Adobe Illustrator to create the assets.
- The outcome must be a portrait.
- The end product must be animated (limited animation).
- You Must use Adobe Illustrator to create the assets and you may animate it in Adobe Photoshop.
- The outcome must be a portrait.
3. WORK PROCESS DECISIVE MOMENT
3.0. Exercise
In this exercise, we were given an illustration of a group of people and we needed to choose one person to give it a combination of gradient and grain texture as shading.
![]() | |
|
In this exercise, we were given an example template of couple words and line drawing of a couple objects that we need to redraw it using the pencil tool following the tutorial in the lectures.
![]() | |
|
![]() | |
|
3.1. Research
Rationale
The story of Si Manis Jembatan Ancol seems familiar to the people of English. Since being made into the title of films and soap operas, His story has become more famous. Not only as a horror story on the screen but also as an urban legend of the capital.
|
Fig 3.1.1 Ancol Bridge, Week 7(Nov. 6, 2023). |
Si Manis Jembatan Ancol is synonymous with the figure of a woman who died tragically in a place that is now part of a famous tourist attraction in Jakarta. It's been a long time, but the scary impression is still felt. Although what is seen on the screen is a fictional story, it turns out that Si Manis Jembatan Ancol has origins related to history. There are several versions of the origin of the story, but They all have in common: the tragic part of death.
|
Fig 3.1.2 Poster of the movie, Week 7(Nov. 6, 2023). |
The most famous version is the story related to the history of Jakarta in the past when it was still called Batavia. Strengthened by the evidence of living witnesses in the research of historian Ridwan Saidi, his story is quite interesting to explore. It was the beginning of the 19th century, and Batavia was still under Dutch colonial rule. There is a 16-year-old village flower in north Jakarta named Siti Ariah. Together with her mother and brother, Siti Ariah lives in a Wealthy Merchant's House. It turned out that the rich merchant intended to edit Siti Ariah but as a mistress. Siti Ariah chose to run away because she was not willing to be a mistress.
During her escape, Siti Ariah met Oei TAdd Sia, a Batavian man who was famous for being rich and fond of playing women. Oei also had a great influence in Batavia, especially in Ancol. Siti Ariah thought she would be saved, but it turned out that Oei was worse. After being invited to a brothel in the Ancol area, Siti Ariah also became the target of Oey as a concubine. Siti Ariah also fled for the second time. Oei orders people to find Siti Ariah. When found, Siti Ariah fought hard. But instead, he was tortured by Oei's men to death around Lake Sunter. Her body was wrapped in sacks and dumped in an area close to the Ancol bridge.
After the fateful event, many people talked about mystical events. It's as if Siti Ariah's spirit is curious and wants revenge on the people who killed her. Not a few residents claim to have had a mysterious experience with the Sweetie. The location of the unnatural death event is then believed to be a haunted place. It is said that until now residents still believe in the existence of supernatural beings there. Not only did she appear for an instant, but Sweet also transformed into someone in red who needed help.
In general, the target is a person who is driving a vehicle. Sweet asked to be dropped off at night but suddenly disappeared before reaching her destination. It turned out that the driver was found in an accident in the morning. Not only the driver who happened to pass by but there were also motorcycle taxi drivers who claimed to experience similar disturbances.
The Ancol Bridge, which is actually straight, will look winding, if road users who cross the night do not turn on the horn three times and may lose their direction and plunge into the ravine. On the bridge which is one of the accesses in and out of Ancol, there are often traffic accidents associated with the waiting figure there. It is not uncommon for many accidents to occur here. Based on confessions from survivors, the accident began with a female figure who appeared suddenly in the Ancol bridge area and crossed the road, making Motorists lose focus.
|
Fig 3.1.3 The appearance of the ghost in the movie, Week 7(Nov.
6, 2023). |
Not only that, in 1985 it rained lightly. One of the painters in Ancol named Mbak Broto, was once visited by a beautiful woman at his painting stall. The woman asked to be painted. When the painting was only half-finished, suddenly Mbah Broto asked to say goodbye for a while to go to the bathroom. Upon her return, the woman was no longer there and her friends did not know her whereabouts.
Another story that is no less interesting was experienced by a tire patcher around the Ancol bridge area, Alexander 21 years old, had seen the figure of Si Manis. Si Manis often stands on the bridge on Friday Kliwon wearing an umbrella and dressed in red while crying. Unfortunately, when approached the figure of the woman disappeared.
"Every Friday night there is often a figure of a woman dressed in red using an umbrella, I once greeted her, when I was a child. When it's close, it's even giving. I ran straight to the opening," Alexander said.
|
Fig 3.1.4 The appearance of the ghost in the movie, Week 7(Nov. 6, 2023). |
Another story was also told by Yudi, 37 years old, whose residence is not far from the location of the bridge. In 2017, he saw a taxi car that plunged into the river.
Based on information from several parties, the incident was triggered because car users did not honk. Other accidents include a motorcyclist being run over by a container truck, and looking out at the sea as if a woman was waiting there.
"In the past, when the fire incident in Mangga Dua was, there was also a car stuck under the bridge. That's a risk if you don't turn on the horn here. It seems strange, but it happened like that," Yudi said.
Sketch
In interpreting this urban legend in a minimalist style, I want to capture the presence of the supernatural without overwhelming the Viewer. The focus will be on the brief but obvious form of red of the ghost. The color palette will be muted, with subtle hints of red to evoke the mysterious transformation of the ghost. The environment surrounding the silhouette will be subtly bathed in red light and distorted, conveying a sense of otherworldliness.
The minimalist approach will emphasize the emotions and atmosphere surrounding the haunted location. Abstract forms and textures will suggest the presence of supernatural beings without explicitly showing it. The goal is to evoke a subtle sense of unease and curiosity, leaving room for viewers to wonder about the nature of the Ghost of Ancol Bridge.
![]() |
Fig 3.1.5 #1 sketch, Week 8(Nov. 13, 2023). |
![]() |
Fig 3.1.6 #2 sketch, Week 8(Nov. 13, 2023). |
![]() |
Fig 3.1.7 #2 sketch, Week 8(Nov. 13, 2023). |
Moodboard
![]() |
Fig 3.1.8 Moodboard, Week 8(Nov. 13, 2023). |
![]() |
|
|
![]() |
|
|
![]() | |
|
![]() |
Fig 3.3.1 Process, Week 10(Nov 27, 2023). |
![]() | |
|
![]() | |
|
What's surprising is when I tried to export the #2 attempt, because I used JPEG instead of PNG like I did in the #1 attempt the colors and the details were washed out. And when I make too many frames the same thing happens. I don't know why this happens, maybe Photoshop is just not strong enough to support the colors and details of it.
What I got from Mr Hafiz is I think that the animation has too many moving elements and asked if I needed to animate the feet in the #1 attempt of animation, and I suggested just animating the sky, grass, and the ghost. Mr hafiz agreed and said that the final result looked better.
![]() |
Fig 3.3.4 Attempt #1, Week 10(Nov 27, 2023). |
![]() |
Fig 3.3.5 Final Animation, Week 10(Nov 28, 2023). |
![]() |
Fig
7.1
Long or wide shot, Medium shot, Close-up, Extreme
close-up, Week 8(Nov. 13, 2023).
|
![]() |
Fig
7.2
Rule of thirds, Week 8(Nov. 13, 2023).
|
![]() |
Fig
7.3
Lighting, Week 8(Nov. 13, 2023).
|
![]() |
Fig
7.4
Lines and Curved Shapes, Week 8(Nov. 13, 2023).
|
![]() |
Fig
7.5
Cutting in, Week 8(Nov. 13, 2023).
|
![]() |
Fig
7.6
Size difference, Week 8(Nov. 13, 2023). |
![]() |
Fig
7.8
The main character's look direction, Week 8(Nov. 13,
2023). |
![]() |
|
|
![]() |
|
|
![]() |
Fig 7.11 Type Lens, Week 8(Nov. 13, 2023). |
![]() |
Fig 7.12 A-1 wide-angle lens, Week 8(Nov. 13,
2023). |
![]() |
Fig 7.13 C-1 long lens, Week 8(Nov. 13, 2023). |
![]() |
Fig 7.13 C-2 long lens, Week 8(Nov. 13, 2023). |
Comments
Post a Comment