Advanced Typography - Final Project
Vun Wan Min (0334263)
Advanced Typography
Final Project: Design, Exploration and Application
LECTURE NOTES
INSTRUCTION
Final Project: Design, Exploration and Application
Week 9
Ideas:
1. Improve sign language typography
Making illustrations that improve the typeface for the American sign language to easily identify the gesture.
Fig. 1.1: American sign language (Idea 1) |
2. Improve Messenger sticker (Hugs and Kisses)
Fig. 1.2: Messenger stickers "Hugs and Kisses" (Idea 2) |
The typefaces on the stickers bothers me because it does not represents the words.
To improve it, my idea is to create animated images that improve Messenger stickers' typeface for it.
3. Improve game title (CookieRun)
To improve it, my idea is to create animated images that improve Messenger stickers' typeface for it.
3. Improve game title (CookieRun)
Fig. 1.3: Game Title "CookieRun" (Idea 3) |
Week 10
Continuing with idea 2.
At first, I was using Adobe Photoshop to draw the stickers because it would be convenient to make the animated GIFs with it. But the programme was slowing down, so I switch to another drawing programme, which is MediBang Paint Pro.
I use Adobe Photoshop to make the animated GIFs. I then repeat the processes that made the it.
These are the frames that made the animated GIFs.
Week 11
Week 12
I made more after Mr Vinod's feedback.
I used the mesh transform tool to make to make the waves.
I searched for references on lips and drew it.
For animating, I play with the opacity to make it faded.
Outcome:
I have refined the first 5 animated GIFs (Fig. 4.2, 5.2, 6.2, 7.2, 8.2), since "So Sorry" looked too happy and the rest was not smooth enough.
These are the refined versions of the animated GIFs:
Continuing with idea 2.
Fig. 2: Sketches |
Fig. 3.1: Adobe Photoshop |
Fig. 3.2: Drawing the stickers |
Fig. 3.3: Animating the stickers |
These are the frames that made the animated GIFs.
Fig. 3.4: Frames (Hugs!) |
Fig. 3.5: Frames (Hearts) |
Fig. 3.6: Frames (You are loved) |
Fig. 3.7: Frames (So Sorry) |
Fig. 4.1: Static sticker (Thinking of you) |
Fig. 4.2: Animated GIF (Thinking of you) |
Fig. 5.1: Static sticker (Hugs!) |
Fig. 5.2: Animated GIF (Hugs!) |
Fig. 6.1: Static sticker (Hearts) |
Fig. 6.2: Animated GIF (Hearts) |
Week 12
Fig. 7.1: Static sticker (You are loved) |
Fig. 7.2: Animated GIF (You are loved) |
Fig. 8.1: Static sticker (So Sorry) |
Fig. 8.2: Animated GIF (So Sorry) |
Fig. 9.1: Process (Good Vibes) |
Fig. 9.2: Frames (Good Vibes) |
Fig. 9.3: Static sticker (Good Vibes) |
Fig. 9.4: Animated GIF (Good Vibes) |
Fig. 10.1: Frames (Welcome) |
Fig. 10.2: Static sticker (Welcome) |
Fig. 10.3: Animated GIF (Welcome) |
Fig. 11.1: Process 1 (Kisses) |
Fig. 11.2: Process 2 (Kisses) |
Fig. 11.3: Frames (Kisses) |
Fig. 11.4: Static sticker (Kisses) |
Fig. 11.5: Animated GIF (Kisses) |
Fig. 12.1: Frames (Sorry for your loss) |
Fig. 12.1: Static sticker (Sorry for you loss) |
Fig. 12.2: Animated GIF (Sorry for your loss) |
Fig. 13.1: Frames (Love and Hugs) |
Fig. 13.2: Static sticker (Love and Hugs) |
Fig. 13.3: Animated GIF (Love and Hugs) |
These are the refined versions of the animated GIFs:
Fig. 14.1: Frames Refined in Photoshop (Thinking of you) |
Fig. 14.1: Animated GIF Before (Thinking of you) |
Fig. 14.2: Animated GIF After (Thinking of you) |
Fig. 15.1: Frames Refined (Hugs!) |
Fig. 15.2: Animated GIF Before (Hugs!) |
Fig. 15.3: Animated GIF After (Hugs!) |
Fig. 16.1: Frames Refined (Hearts) |
Fig. 16.1: Animated GIF Before (Hearts) |
Fig. 16.2: Animated GIF After (Hearts) |
Fig. 17.1: Refined Frames (You are loved) |
Fig. 17.2: Animated GIF Before (You are loved) |
Fig. 17.3: Animated GIF After (You are loved) |
Fig. 18.1: Frames Refined (So Sorry) |
Fig. 18.2: Animated GIF Before (So Sorry) |
Fig. 18.3: Animated GIF After (So sorry) |
FEEDBACK
Week 9:
Specific Feedback:
For project 2, Mr Vinod told me to put more effort on my illustration.
For project 2, Mr Vinod told me to put more effort on my illustration.
Week 10:
I showed Mr Vinod my ideas in Messenger.
Messenger Feedback:
This seems doable. Similar to type expression exercise: static idea then animate.
I showed Mr Vinod my ideas in Messenger.
This seems doable. Similar to type expression exercise: static idea then animate.
Specific Feedback:
Mr Shamsul and Mr Vinod told me to make more than 5 animated gifs in an appropriate number of the stickers.
Week 12:
I showed Mr Vinod my 5 animated GIF (Thinkg of you, Hugs!, Hearts, You are loved, So Sorry) in Messenger.
Messenger feedback:
So sorry looks happy. Refine these more.
Week 13:
Specific Feedback:
Mr Shamsul and Mr Vinod told me to make more than 5 animated gifs in an appropriate number of the stickers.
Week 12:
I showed Mr Vinod my 5 animated GIF (Thinkg of you, Hugs!, Hearts, You are loved, So Sorry) in Messenger.
Messenger feedback:
So sorry looks happy. Refine these more.
Week 13:
Specific Feedback:
The work is sufficient and appropriate. Your eporfolio is complete. However you have showed a minimun amout of process and research for the project.
Week 14:
General Feedback:
In the exercise "Type and Play", we have to upload the pictures of the object we extract from to form the letter, so our viwers could compare them. In project 2, we have to include a screen grab of the microsite and link.
Week 14:
General Feedback:
In the exercise "Type and Play", we have to upload the pictures of the object we extract from to form the letter, so our viwers could compare them. In project 2, we have to include a screen grab of the microsite and link.
REFLECTION
Experience:
Week 9: Making poster is not easy.
Week 10: Some static stickers does not bring out their uniqueness.
Week 10: Some static stickers does not bring out their uniqueness.
Week 11: Making animated gifs are challenging and fun.
Week 12: Struggling with other assignments.
Week 12: Struggling with other assignments.
Observation:
Week 9: Black and White is gothic.
Week 10: The title "CookieRun" does not look like the theme of the game.
Week 11: The stickers are about affection.
Week 12: Animations have a lot of frames to make it looked like it have smooth movements.
Week 11: The stickers are about affection.
Week 12: Animations have a lot of frames to make it looked like it have smooth movements.
Finding:
Week 9: A poster needs to have the right point size to read information.
Week 10: Sign language have their own language such as English, Spanish, Mandarin and so on.
Week 11: Colour bring more liveliness.
Week 12: My laptop did not crashing after using another drawing program.
With the heavy workload I have, I should have made a to-do list and not be confused of what to do. I had made poor time management these weeks and I plan to do better.
Week 10: Sign language have their own language such as English, Spanish, Mandarin and so on.
Week 11: Colour bring more liveliness.
Week 12: My laptop did not crashing after using another drawing program.
With the heavy workload I have, I should have made a to-do list and not be confused of what to do. I had made poor time management these weeks and I plan to do better.
FURTHER READING
4/11/2019 (Week 11)
Kinetic Typography: 42 Must-See Examples by Aaron Kitney
Kinetic Typography: 42 Must-See Examples by Aaron Kitney
Fig. 19.1: https://www.creativebloq.com/typography/examples-kinetic-typography-11121304 |
Fig. 19.2: Screenshot of Example 1 |
There were a lot of examples of animated typography. It was interesting to look at and I got some inspirations from the videos and have it in my animated GIFs.
16 Clever Typographic Animations That Visualize The Meanings of Various Words by Mindaugas Dudenas
Fig. 20.1: https://digitalsynopsis.com/design/type-in-motion-typography-animation/ |
Fig. 20.2: Screenshot of Example 2 |
ReplyDeleteThis is an awesome article, thank you for sharing.
Regards,Animation Studio