9.23.2021 - 10.21.2021 (Week 5 - Week 8)
Audrey Gracia Djohari / 0348120
Illustration & Visual Narrative
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Task 2: Decisive Moment
LECTURES
WEEK 5 : Chiaroscuro & Rhythm/Movement
- Chiaroscuro
Chiaroscuro refers to the use of light and dark to create the illusion of three-dimensional volume on flat surface.
- "Chiaro" = Bright, "Scuro" = Dark
Figure 1.0: Simple Chiaroscuro
- It's all about balancing the light and the negative space a design can be balanced.
- Examples of Chiaroscuro: Comics
What happens if a design doesn't use Chiaroscuro:
- The design would become monotonous and flat.
- The design would lack the flow and visual hierarchy.
- The design would lack impact.
Why Chiaroscuro is used:
- Increase dramatic tension.
- Create sensational effects. (create movement and flow)
- Pull viewers' attention to a subject in an intense way.
- Create a tasteful composition of negative vs positive spaces.
Figure 1.1: Other Chiaroscuro Usage
Studying Chiaroscuro in Adobe Illustrator:
- Go to Windows > Adjustments > Play with Brightness, Contrast, Levels, Curves
- Play with these tools until you find the right lighting that definitely hits the spot of your artwork.
Figure 1.2: Chiaroscuro in Adobe Illustrator
- Rhythm & Movement
- Rhythm/flow is one of the most difficult design principles to be achieved in art.
- The sense of rhythm/flow and movement is created when the composition flows into a direction of a specific point.
- Flow and movement helps to narrate the illustration effectively by the use of visual hierarchy.
- To create visual hierarchy, we need to see certain aspects of design, such as: the story, main subject, composition.
- To create a good composition we must look at the value tones, shapes, positive & negative space, chiaroscuro, perspectives/spatial depth.
Utilizing the Shapes & Lines in making a composition:
- Maximize Overlaps: Once you create the plane, try to use many different shapes and line to have a more interesting layout. It will create a much more dynamic scene.
- Establish Patterns and Rhythms: Layering different shapes and patterns to create the rhythm.
Figure 1.3: Using different shapes & lines
Figure 1.4: Maximizing Overlaps
Figure 1.5: Establishing Patterns and Rhythms
Figure 1.6: Example of Movement
"Good artists imitate, Great artists steal"–Pablo Picasso
What to do before producing a final output:
- Sketch using black and white to explore the design.
- Try to overlap the multi planes and determine the source of light to create the positive and negative space.
- Look at the flow and movement of the visual.
INSTRUCTIONS
- Task 2/ Decisive Moment -
Instruction
Figure 2.0: Instruction
WEEK 5:
Visual Research
- Movie : Bohemian Rhapsody
- Movie Details:
Box office: $904.4 million
Story by: Anthony McCarten; Peter Morgan
Awards: Academy Award for Best Actor in a Leading Role
- Decisive Scene : 1985 Live Aid Concert
Queen were massive in the UK, however they popularity had waned a bit by
1985 and they had gotten a lot of backlash for playing Sun City in South
Africa. This concert was in the midst of the apartheid era and tensions were
pretty high. Also, it was kind of the first time they played live
since gossip and speculation about Freddie's health was rampant in the
tabloids. They were actually planning on taking some time off, but Bob
Geldof talked them into appearing.
And I think the band believed they still had something to prove in this scene.
This concert is nearly at the ending of the movie, and it really wraps up the
whole story with the perfect music and shows how great Queen actually is. Rami
Malek's performance was super iconic and it was brilliant, It's impossible to
not get goosebumps while watching this scene.
The time of the concert was in the afternoon and the audience was tired
because of all the performance they've watched. But when Freddie Mercury
took over the mic and sing, his energy flows to all of the audience and it
was the best 20 minutes in the history of Live Aid Music Festival. I think
the fact that Queen killed the concert proves they were still a force to be
reckoned with and it immortalized Freddie Mercury's status as the greatest
singer and performer.
Figure 2.1: Bohemian Rhapsody, Aa-yoo! Live Aid Scene, Youtube
Figure 2.2: Bohemian Rhapsody, Radio Gaga Live Aid Scene, Youtube
Figure 2.3, 2.4 and 2.5: References
Idea Exploration & Process
I initially chose Squid Game as my movie reference, I made 3 sketches of
it. But I feel like my design is not impactful enough. So I decided to
search for other movie.
Figure 2.6: Squid Game Sketch, 10.07.2021
These are my thumbnail sketches for Bohemian Rhapsody. I like the design
and I know the scene very well because it's one of my all-time favorite
movie. I wanted to put 'We Are The Champions" as a quote.
Figure 2.7: Bohemian Rhapsody Sketch, 10.07.2021
WEEK 6:
Digitization in Adobe Illustrator
Before I started, I searched for the right color palette using Adobe
Color. I wanted to combine contrast colors so the design will appear
stronger and I could apply the Chiaroscuro principle. So I chose shades
of purple and yellow with a little bit of white and black, similar to
the movie poster's color. I used purple for darker parts and yellow for
lighter parts. Furthermore, these shades really represent the movie
itself so it helps viewers to recognize my movie poster.
Figure 2.8: Color palette from Adobe Color, 10.14.2021
Figure 2.9: Adobe Illustrator Artboards, 10.14.2021
Figure 2.10: Details, 10.14.2021
I created every frame in Adobe Illustrator with multiple artboards. I
kept everything simple without too much gradient, I only used gradient
for the sky, stage and some dots). I actually like how the body of
Freddie Mercury turned out, the colors play their roles very well in
forming the clothes and his body shape. I also managed to make the
yellow color shapes the body as a light reflection.
Applying Chiaroscuro
Chiaroscuro method helped me a lot in determining the light source and
its reflection. I could easily saw where I should emphasize the
lighting. I used Adobe Photoshop to adjust the brightness, levels,
contrast and curves.
Figure 2.11: Applying Chiaroscuro by using Adjustment, Adobe
Photoshop, 10.14.2021
Applying Movement & Rhythm
Figure 2.12: Flow & Movement, 10.14.2021
Utilizing Shapes & Lines
Learning about utilizing shapes and lines in a setting of a
scene really opened my mind on how I create an environment.
I tried applying it on this poster. I actually made 5 layers
of setting, but I only marked out 3 in the figure
below.
Layers:
-
The first and the closest one (to the viewer's point of view) is the drums. I made them as minimalist silhouettes.
- The second layer is the stage, where Freddie Mercury stands. I managed to create a one-point perspective here to give the sense of distance.
- The third layer is the sound system boxes. They are all black silhouettes and I placed them at the top of the stages.
- The fourth layer is the stadium and the crowd.
- The last layer is the sky.
Figure 2.13: Overlaps, 10.14.2021
WEEK 7:
Animation in Adobe Photoshop
For the animation, I wanted to emphasize the sense of moving and I
want to show how grand and crowded the concert is. I made Freddie
Mercury do his iconic hand pose (just like in the real concert)
and I also made the whole frame move towards him (zooming), making
the drums slowly disappears. Other than that, I made the audience
in the form of moving dots to create a crowded illusion. As the
frame zooms Freddie Mercury, the dots become more crowded and
higher. The black background is the stadium and the half circle
with gradient above it is the afternoon sky.
Figure 2.14 & 2.15: Animation Ideas, 10.21.2021
Figure 2.16: Making Animation in Adobe Photoshop, 10.21.2021
I ended up using 20 layers as frames to make the animation. I added
the Queen's logo and the movie title "Bohemian Rhapsody by Brian
Singer". Not only that, I also added my favorite song as a quote,
"We Are The Champions" which is also the most impactful song in the
movie in my opinion.
Figure 2.17: Timeframe, 10.21.2021
IMPORTANT NOTE:
I really wanted to try making animation using Video Timeline, but
unfortunately I cannot use that fiture in my Macbook with M1 chip,
there's no option for Video Timeline, I can only use Time Frame.
I've tried many different things and read many websites to fix
this problem but turns out it's because of the M1 Chip.
Adobe hasn't make Video Timeline available for my laptop.
So I used Time Frame instead and make the GIF frame by frame.
Figure 2.18: My Frame Animation Option (No Video Timeline),
10.21.2021
WEEK 8 & 9:
Animation Experimentation
On my first attempt, I moved the sky upward so the stadium also
became bigger, this made the whole animation looks too shaky and the
background part's movement is not natural. Also the crowd moved in a
weird way like they are flying. I wasn't satisfied at all with this
one.
Figure 2.19: 1st Attempt, 10.21.2021
On my second attempt, I didn't move the sky and stadium at all. This
appeared to make more sense. Logically, the stadium and the sky
shouldn't appear moving because their distance is too far, so the
zooming effect is not far enough to affect their sizes (the change
of size would be too slight to be visible). I also added the title
of the movie and the quote "We Are the Champions" by adjusting their
opacity in each frame, which appeared as fade in effect.
Figure 2.20: 2nd Attempt, 10.21.2021
I still thought the second attempt wasn't enough. So I added the
Queen's (band) logo at the front frame. And I made the whole
animation fades out at the end. And the figure below is my third
attempt.
Figure 2.21: 3rd Attempt, 10.21.2021
Final Outcome
Figure 2.22: "Bohemian Rhapsody", Final Outcome in JPG,
10.21.2021
Figure 2.23: "Bohemian Rhapsody", Final Outcome in PDF, 10.21.2021
Figure 2.24: "Bohemian Rhapsody", Final GIF, 10.21.2021
Figure 2.25: "Bohemian Rhapsody", Final Video with Audio, 10.21.2021
Google Drive Link:
https://drive.google.com/drive/u/1/folders/1-4m0sNBS6ssfjSiToO8PXDBIkrGHW8Ww
FEEDBACK
WEEK 9:
Miss Jennifer said my animation looks really good. Poster
composition is well done. Though she would like to acknowledge
what's the decisive moment behind the design. (I've written the
reason why this design is decisive in the Visual Research part).
REFLECTION
Experience
I love this task so much because it involves movie scenes. I had a
quite hard time finding the ideas, but once I got the inspiration, I
knew exactly what I had to do. I enjoyed this task as it allows me to
create my own scene and composition.
Observations
This task made me did many research on movie scenes and it was very
fun. And I observed how important a decisive moment in a movie is. And
I realized that it's a designer's job to be able to emphasize a
complex story in a design and still wraps up the whole excitement of
that story.
Findings
I discovered many new tricks in Adobe Illustrator and Photoshop,
especially in making animation.
FURTHER READING
FURTHER READING
Toromanoff, A. (2017) Impossible photography: Surreal pictures that challenge our perception. Eken Press, London.
Tillman, B. (2015) Creative character design. Focal Press, Taylor & Francis, New York & London.
Comments
Post a Comment