ART DIRECTION // WHOLE PROCESS

07.09.2023 - 30.11.2023 (Week 2 - Week 114)

Devina Angeline Wiratama / 0350824
Art Direction / Bachelor of Design (Hons) in Creative Media
Whole Process

Jump link

INSTRUCTION

MIB

Brief

RESEARCH

WEEK 3 / 14.09.2023

Exercise 2: Perfect Visual Analysis.

Today, we had our first meeting to do Exercise 2. We decided on the theme, style, etc.

Fig. 1.1 / Exercise 2, Week 3 (19.09.2023)

Then compile everything into the presentation slides.

WEEK 4 / 21.09.2023

Before we start our presentation, Ms. Anis would like us to add more information about Must Have, Good to Have, and Nice to Have (referred to the previous slide).

Additional information
History of our design.

Cats and Humans are living together, however, Cats can't bear the stupidity of humans. They wanted to make a new world with the new system, which we call Revolutions. The only system that they want to keep is "slaving humans", such as humans cleaning their poop and giving them food.

On the other hand, Cats are bored with all the foods given by Humans. They wanted to explore more to other planets and new environments for inspiration. While on their journey, they had a birthday celebration.

Who is the impostor?

Among them, there are impostors whose birthdays were never celebrated before (envy), so they sneak between them and become the "clowns".

How to eject each of them?

By popping the balloons that they bring. When the balloon pops! The possesses will surprise, cry, and sulk.

How about the ghost mode?

When they're sulking, they've become introverts. They isolated themselves by hiding in a space-transparent capsule. They still can do their own tasks but other cats couldn't see them.

WEEK 5 / 28.09.2023

It's a Public Holiday.

WEEK 6 / 05.10.2023

This week, Ms Anis gave us a short explanation about our visual goals (which later on will be our next to do).

Contents:

Setting and Influences
: Determine the visual pillars in your production by looking at the central theme of the game (Genre and Style)
Lighting and Post-processing
: Lighting and post-processing help to give believable depth to the environment design and encourage immersion for the players.
Ambient Lighting
: Selections for the colour palette will be driven by the ambient lighting, rather than material colour.
UI/UX Colour Pallete
: On top of environment design, the colour palette also determines how the UI/UX of your game looks like.
Game UI Design and Layout
: The game UI should be consistent in how the players operate actions, and interact with certain stuff (i.e. UX with buttons).
Character Design
- Shape language is the key to designing characters, objects and environments.
- Value patterns (low and high contrast) help to create boundaries and contrast to define shapes and areas of interest.
- A character silhouette should be clearly identifiable at first glance with distinguishing elements of shape, size and colour.
- This is especially important in a character lineup where each one should have significant differences or unique attributes from one to another.

Fig. 1.2 / Stage of Process

PROCESS

WEEK 5 / 28.09.2023

This week is a public holiday in Malaysia. However, in a group, we have a short meeting to discuss our current sketch. I was assigned to do a sketch for environment design. Here are my references

Fig. 2.1 - 2.9 / References

This is a cafeteria but I'm not really satisfied with this idea.

Fig. 2.10 / Sketch 1

This second sketch is for the birthday party room. I also didn't have much clue or idea for this sketch.

Fig. 2.11 / Sketch 2

This is the emergency meeting. I'm quite happy with the result. It clearly shows that this is underwater.

Fig. 2.12 / Sketch 3

This is the playroom. The tree look makes the futuristic look. I put the cat "playground" also.

Fig. 2.13 / Sketch 4

This is my friends' progress.

Fig. 2.14 - 2.15 / Michelle and Luisa's sketches

Fig. 2.16 - 2.17 / Abigail's sketches

Fig. 2.18 / Cecilia's sketch

Then we decided what maps we would make

- Waiting room

- Emergency meeting

- Navigation

- Bathroom / Grooming room

- Medical

- Playroom

- Electrical

- Cafeteria

- Supply room (Whiskas supply)

Since I do the environment design with Cecilia, I discussed it with Cecilia to separate our work.

Cecil:

- Waiting room (birthday party)

- Bathroom/ Grooming room

- Medical

- Cafeteria

- Map

Devina:

- Emergency meeting

- Navigation

- Playroom

- Electrical

- Supply room

Then, my groupmates did a little bit of revisions from the previous slides and added our progressions.

WEEK 6 / 28.09.2023

This week, I am looking for more references for the sketches.

Fig. 2.19 / References

I suggest making it futuristic-looks with the birthday party touch-up.

Since it was told that we only needed to make 3 rooms, we decided to choose the rooms that related to the cat more (lobby + meeting room, playroom, grooming).

This is my friend progress.

Michelle's sketch

Fig. 2.20 / Customization colour

WEEK 7 / 05.10.2023

This week, I revised the Playroom and Meeting room sketches.

Fig. 2.21 / Meeting room

Fig. 2.22 - 2.26 / Playroom

To be honest, I like the meeting room but I don't like the playroom because is too complicated.

Here is our presentation slide.

WEEK 8 / 12.10.2023

This week, I plan to focus on animation first instead of map design. Here are my references.

Reference 1

Reference 2

I plan to make it cut by cut scene, so it's clearer to see the expression. Here is a rough ideation.

Fig. 2.27 / Rough Ideation

After receiving feedback from my groupmates, I think it's better to stay in among us style.

Here is Cecil's progress for the Environment Design colour.

Fig. 2.28 / Cafeteria Colour

Fig. 2.29 / Bathroom/ Grooming

Fig. 2.30 / Waiting Area

WEEK 9 / 26.10.2023

This week, I tried to make the second ideation for killing/ ejection animation. Here is my reference.

Reference 1

Reference 2

Then I tried to draw the 3/4 front, 3/4 behind, side view, etc.

Fig. 2.31 / Sides

Then I tried to make the rough ideation based on the Among Us style.

Fig. 2.32 / Ejection Animation #2

Then I added another animation for customization.

Fig. 2.33 / Customization

Here is my groupmates' progress.

Amendment Logo by Cecil

Fig. 2.34 - 2.35 / Logo

Font by Abigail.

We voted for the font choices.

Fig. 2.36 - 2.37 / Font Choices

Fig. 2.38 / Font Chosen

Tasks Ideation by Abigail

Fig. 2.39 - 2.42 / Task Ideation

Halloween Customization by Michelle.

Fig. 2.43 / Halloween Edition

WEEK 10 / 02.11.2023

This week, I will animate the suggestion from Ms Anis about the jumpscared.

Fig. 2.44 - 2.72 / Ejection#2 rough animation.

Then I transferred it to Adobe Animate.

Fig. 2.73 / Adobe Animate

Here is the video without sound.

Fig. 2.74 / Rough animation without sound

Then I wanted to put the sound effect. I did research first.

Then I edit it on the Adobe Audition first.

Fig. 2.75 / Kill sound#1

Then I combined it with the sound in Adobe After Effects. Here is the result.

Fig. 2.75 / Sketch kill2 with sound

Then my groupmates recommended with to change the crying sound into this.

Banana Cat Crying

WEEK 11 / 09.11.2023

Then I plan to make a simple animation for the ejection scene.

Fig. 2.76 / Ejection Idea scene

I will change the background with the assets that we have (fish and other ocean creatures).

Then I want to digitalise the customisation animation. So I have to trace front, front right 3/4, right, back 3/4 right, behind, back 3/4 left, left, front 3/4 left sides.

First I traced it in Adobe Illustrator since all the character is in PNG (pixelated when I changed the size).

Fig. 2.77 - 2.78 / Character all sides

Then I gave it to Abigail for UI/UX (since UI/UX couldn't have video, I had to make it frame by frame).

Fig. 2.79 / All sides for customise

WEEK 12 / 16.11.2023

Then I did research on the sound.

Fig. 2.80 / Sound

Here is what I found on YouTube

Emergency Meeting

Reveal/ sus

Among Us sound effect

Victory and Defeat sound

I prepared the background and assets for the reveal, discussion, emergency meeting, dead body report, etc.

Fig. 2.81 - 2.83 / Assets

Then I tried to make the animation for the reveal scene. The 'ssshhh' before revealing the character/ role. I planned to make the head turn and shut the mouth as if 'silent'.

Fig. 2.84 / Ssshhh

WEEK 13 / 23.11.2023

This week I planned to make all the animations. I add the shadow for the cat, as if the light is coming from above.

Fig. 2.85 / Lighting and Shadow

I make the reveal scene, impostor and crewmates.

Fig. 2.86 - 2.87 / Reveal 1

Then I realised we had to add the balloons. However, my friend's work is in PNG, not vector. So I had to trace again, not only the balloon but also the other characters.

Fig. 2.88 / Characters in PNG

Even though there is image trace in AI, however some of the colours AI couldn't read. For example this blue-grey-ish bodyguard cat. It became fully black and I couldn't edit it. In this case, I have to trace one by one.

Fig. 2.89 / AI couldn't read

I trace almost everything in AI.

Fig. 2.90 / Trace Characters.

Then I added the shadows and prepared to export it to After Effects.

Fig. 2.91 / Characters with shadow

Then I asked Michelle to help me to make the sea creatures as well as the background.

Fig. 2.92 / Sea

Then I realised the impostor should be not an ordinary cat but a clown cat. The win scene for Crewmates should be a lot of people. I revised it again.

Fig. 2.93 / Revised for the impostor

Then I combined the reveal impostor, reveal crewmate, and the 'sshhh' into one video.

This is the win/ victory scene from different perspectives.

Fig. 2.94 - 2.95 / Victory different perspective

Then I combined again between win impostor and win crewmates.

Next, I animate the ejection scenes. I replaced the background with the one that I did in the beginning.

Fig. 2.96 / Replace

This is the background animation.

Background sea animation

Then I animated the emergency meeting and discussion.

Fig. 2.97 - 2.98 / Emergency Meeting

I want to make these cats talk to each other and look at us as if they're judging as as if they know what I did.

Fig. 2.99 / Discussion

Then for the dead body report, I'm using the second emergency meeting since I have 2 types of emergency meeting animation.

Fig. 2.100 - 2.101 / Dead body reported

Then I combined the emergency meeting, dead body report, and discussion into one video. I added a meeting chat from UI for the discussion background.

Fig. 2.102 / UI meeting chat

Then I digitalise the animation for the killing scene. I used procreated to draw frame by frame.

Fig. 2.103 / procreate

Then I transferred it to Adobe animate for smoothness.

Fig. 2.104 - 2.105 / Adobe Animate

Then I export it to After Effects for adding sound, background, zooming effects, etc.

Fig. 2.106 - 2.107 / After Effect Killing

I was planning to combine the UI and Animation into one video. So that can present in one video and make it as a demo for playing the game. However, my friends haven't finished making the background, which postponed the UI to finish as well.

Then we prepared our presentation slides.

WEEK 14 / 30.11.2023

Before the presentation, I tried to compile everything (agak-agak) with the button sound and ambient sound.

Fig. 2.108 / Compile

Button sound effect

Among Us Themed sound

Fig. 2.109 / Sound Effect

FEEDBACK

WEEK 4 / 21.09.2023

- Rearrange Character finder and not hero but rendering

- font diff 0 and o

- report button,

- Stick with among us without indicating "MeowPha" thing

- landscape finder (bar bigger),

- more details about the theme (is and is not)

- suggestion based on good and bad

- No one has ever done this project without killing.

WEEK 6 / 05.10.2022

Feedback

a. Character

- suggest: Put the hat and other elements of the costume on birthday

b. Environment

- Futuristic look can but not too futuristic, still include the cute or birthday party element

- In the cafeteria, remove the door

- Make only 3 rooms (lobby + meeting room, playroom, grooming)

c. Logo

- It's still Among us

- Add something that is related to clown things (it's giving a hint to the player that the impostor is a clown, etc)

- The shapes towards rounded - to indicate our game identity.

d. UIUX

- Copy-paste is your best friend

- Play in colour scheme/ utilize colour

WEEK 7 / 12.10.2022

Ms Anis

- straight-forward

- Well done

- Logo: Prefer the Abi's sketch, the last one ("O" with batman's face)

WEEK 8 / 19.10.2022

Groupmates

- Can but it will become a new innovation and can add the cat's expression animation.

WEEK 10 / 02.11.2022

Ms Anis

- I like the newest killing scene

WEEK 11 / 09.11.2022

Michelle

- try using Zoom out entirely

WEEK 13 / 23.11.2022

Michelle

- Don't forget to make the dead body report animation scene

Abigail

- I think for impostor should be not an ordinary cat but a clown cat.

NEXT COURSE OF ACTION

WEEK 4 / 21.09.2023

- Can start to sketch

WEEK 5 / 28.09.2023

- Landscape & Environment:

Map (floor plan)

Background from the player's POV

- UI/UX:

Wireframe together with the page sketches

- Characters:

Skin customization

Character expression & movement (crying cat, popping balloon, impostor, etc.)

WEEK 6 / 05.10.2023

- Make the logo

- Compile everything into a proposal (strengths and weaknesses, stylisation range, visual references and samples, etc)

- Synchronise the artwork dan the outline

- Following everything in the slides that have been given.

WEEK 7 / 12.10.2023

1. Logo

- App Icon

2. UIUX

- Task to do

- Voting panel

- chat (in ipad)

- How to play/ tutorial in each task

3. Character

- Colour

4. Environment

- Colour

5. Animation

- kill/ eject

- Loading

- Voting

WEEK 8 / 19.10.2023

- Ejection Animation

WEEK 9 / 26.10.2023

- Revised Ejection Animation

- Another Animation

- Environment Design Colour

WEEK 10 / 02.11.2023

- Digitalise customise animation

- Another animation

WEEK 11 / 09.11.2023

- ideation for other animation

WEEK 12 / 16.11.2023

- Prepared all the assets for animation

WEEK 13 / 23.11.2023

- Finish all the animation

- Prepared for presentation

SUBMISSION: Whole Process

Ejection Scene

Dead body report, Emergency meeting, and discussion

Kill Animation

Revealing scene

Victory with different points of view

Compilation UI + Animation

REFLECTION

This is my first time having a group project about Art Direction. There are a lot of obstacles, internal and external. Through all of these obstacles, I gained a lot of experience. I observed that I needed my groupmates cooperation, I couldn't do all of it on my own. There are many brains in a group but we have to decide what is our mind. I find it very tiring and exciting at the same time. I'm grateful I've taken this module with amazing groupmates and supportive Ms Anis.

Jump Link

Devina Angeline Wiratama (0350824)

Search This Blog

ART DIRECTION // WHOLE PROCESS

Comments

Post a Comment