Week 10 - Week 13 : 6 Oct 2021 - 19 Oct 2021
Tan Yi Yun 0345559Bachelor of Design (Hons) in Creative Media
Task 3(B) / Type Design and Communication
Lecture notes 1-5 were jotted down at Task 1/Exercises.
Lecture notes 6 were jotted down at Task 2/Typographic Exploration & Communication.
INSTRUCTIONS
TASK 3(B): Type Design and Communication
With the knowledge and experience gained in the previous tasks, this time
we are to express typographically a social message/greeting that is relevant
to the campus community at Taylor's University or society at
large.
Visual Research
I started off with some typographic sticker designs that are available on
the Internet.
|
| Figure 1.1, Typography stickers, Week 10 (29/10/2021) |
The greeting I chose is "Happy Mid Autumn Festival". The central legend
associated with Mid-Autumn Festival concerns the goddess Chang'e. This
tale tells of how, long ago, the Earth had 10 suns, and there was a great
archer, Hou Yi shot down nine of the suns, saving life on Earth. As a
reward for this feat, Hou Yi was given the elixir of immortality, which he
was planning to share it with his beautiful wife, Chang’e. But while Hou
Yi was away hunting, his wicked apprentice, Feng Meng, came to his home to
steal the elixir. Chang’e, determined to keep it out of Feng’s hands,
drank the potion and ascended to the heavens, where she took the moon as
her home.
But why rabbits as the mascot of Mid Autumn Festival? The Jade
Rabbit is a character from Chinese folklore, who lives on the moon with
Chang-e, and is always seen preparing the elixir of life for the
immortals.
Once upon a time, there were three animals living in a forest: a fox, a
rabbit, and a monkey. Three immortals, pretending to be old beggars, went through the forest
asking for food. The fox and the monkey quickly offered them
food. The rabbit, who had no food but very pious, felt guilty. She said, “I’m
so sorry I couldn’t offer any food to help you, but I can give myself,”
and jumped into the fire. The three immortals were moved by the rabbit’s sacrifice, and decided to
make the rabbit an immortal, sending her to live in the Moon Palace with
Goddess Chang E.
The Legend of Mid-Autumn Festival & How to Celebrate
Figure 1.2 shows some typographic designs related to this festival, but
what I mostly found is poster design.
|
|
Figure 1.2, Mid-Autumn Festival Designs, Week 10 (29/10/2021) |
Before I start sketching, I typed out the text using the given 10
typefaces. I chose Bold for all the typefaces to ensure it is readable for
its intended use. The typefaces I prefer are Futura Std and Serifa Std and
Univers LT Std.
|
| Figure 1.3, Test the greetings using 10 typefaces, Week 10 (29/10/2021) |
Sketches
These are some of the sticker design sketches I did in Clip Studio Paint.
The graphical elements I plan to include are rabbit, tanglong, moon and
clouds. I will only pick 1-2 graphical elements to add in the final sticker
design.
|
| Figure 1.4, Sketches, Week 10 (29/10/2021) |
Digitise the Sticker
I chose to digitise Design #A (with rabbit) and Design #B (with moon)
sticker as shown in Figure 1.4.
|
|
Figure 1.5, 6 designs , Week 11 (5/11/2021) |
|
| Figure 1.6, Colour palettes, Week 11 (5/11/2021) |
I tried several colour versions as shown in Figure 1.7.
|
|
Figure 1.7, Colour variations, Week 11 (5/11/2021) |
I applied gradient, drop shadow and texture to Design #A. I get the texture
pattern from the Internet because I think the silhouette of rabbit looks a
bit plain and boring.
Figure 1.9 is the designs I showed in class. I didn't pick the wavy text
(Design #B) and reddish rabbit (Design #A). I think the wavy text is
distracting and it doesn't look satisfying for me. For Design #B I prefer
the blue rabbit because I think the blue rabbit are more suitable for the
theme of mid-autumn festival. The red rabbit gives the vibe of Chinese New
Year.
Feedbacks were given based on Figure 1.9. I chose to make improvement on Design #B. I need to add more expressions
to the text itself, and thus, I came out with another variation, which I
think is much better than what I have shown in Figure 1.9.
To export the sticker animation with transparency, I faced a little issue
here. I first exported it in MOV. Then, I exported it again in Photoshop
as a GIF.
I think my first attempt in animated GIF is a bit slow for Telegram sticker. I used another version for submission because some issues occurred when I animate for Telegram sticker (as shown in the next section), so I had no choice but to simplify and shorten my animation.
I looked for solutions and a quick way to fix that is to create shapes
from vector layers. When I thought everything should be okay now, I
realised that one of my layer is the text and therefore, I couldn't create
shapes from it. To solve this, I created outlines for the text in
Illustrator, and re-imported that particular layer into After
Effects.
However, when I tried to export again...that rabbit appears again!
I tried to reduce my 3 seconds animation into 1 second, combined
unnecessary layers and rendered again. Still, that rabbit didn't want to
let me go.
Typographic Design : Form and Communication
Legibility
There is an interesting finding says that lowercase letters can be ranked according to their distinctiveness as follows :
I have learnt about the nature of letterforms which I never pay attention to, and it is important to understand their legibility so that word recognition can be achieved.
|
|
|
|
|
Figure 1.9, Coloured stickers , Week 11 (5/11/2021) |
|
|
Figure 2.1, Stickers published in Telegram , Week 11 (5/11/2021) |
I removed the gradient because we need to animate in After Effects. The
gradient would have to modify with a few tones. Opacity or drop shadow
need to be replaced with flat tones that mimic a flat shadow.
I also change the design of clouds because the initial design is not
appealing without gradient. That's why I redesigned the cloud to add more
details.
|
|
|
|
|
|
|
||||
|
Sticker Animation
I animated the sticker by importing layers from Illustrator to After
Effects. I kept the animation simple because Telegram animated simple has
a bunch of restrictions.
|
|
|
I tried using Media Encorder to export as GIF but I couldn't export it
with transparency.
|
|
Figure 2.6, Changed to Alpha channel in After Effects, Week 12
(12/11/2021) |
|
|
|
 |
| Figure 2.8, Animated GIF (first attempt), Week 12 (12/11/2021) |
I think my first attempt in animated GIF is a bit slow for Telegram sticker. I used another version for submission because some issues occurred when I animate for Telegram sticker (as shown in the next section), so I had no choice but to simplify and shorten my animation.
Telegram Animated Sticker
Creating the animated sticker and publishing in Telegram is a pain... I
have watched several tutorials but it keeps failing.
|
||
|
|
| Figure 3.1, Bodymovin-tg.zxp to be added in support files, Week 12 (12/11/2021) |
|
|
Figure 3.2, Bodymovin for Telegram Stickers, Week 12
(12/11/2021) |
The first issue I faced is to install the Bodymovin in After Effects. I
couldn't extract the ZXP file. The ZXP Installer is not working. The
solution I found is to rename it as .zip so that I can be extracted and
drag into the support files of After Effects.
|
|
Figure 3.3, Bodymovin for Telegram Stickers is installed, Week 12
(12/11/2021) |
When I tried to render, the annoying rabbit keeps telling me this :
|
|
|
|
|
|
|
|
|
|
| Figure 3.7, Render failed again and again, Week 12 (12/11/2021) |
I still stuck at this stage. Solution will be provided if I succeed. Wish
me luck...
---After N hours of trying---
Hello I am back! And yes finally my animated sticker is published on Telegram! Wohoo!
 |
| Figure 3.8, Successfully published in Telegram, Week 12 (16/11/2021) |
 |
| Figure 3.9, Sending greetings to friend in Telegram, Week 12 (16/11/2021) |
So.....how do I reduce the file size? I decided to remove all the highlights on the clouds since it is not visible when I published as static sticker. So I reduced some layers of that. Then, I remove multiple layers of orange and yellow of the moon, and kept only 2 shades of yellow. Lastly, I checked all the layers (especially the clouds) and removed those unwanted layers.
I saved the file separately and redo the animation keyframes in After Effects. This time I did not animate the rabbit because I already merged it with the text layer.
 |
| Figure 4.1, Bye bye rabbit, Week 12 (16/11/2021) |
Final Submission - Task 3 (B) / Type Design and Communication
|
|
Figure 4.2, Final Black and White Sticker in PNG, Week 12
(16/11/2021) |
|
|
Figure 4.3, Final Coloured Sticker in PNG, Week 12
(16/11/2021) |
Figure 4.4, Final Sticker in PDF, Week 12 (16/11/2021)
 | |
|
|
||||
|
Link to download static sticker pack :
Link to download animated sticker pack :
Estimated Time Spent
Visual research, sketch : 3 hours
Digitisation of sticker : 5-6 hours
Animating GIF sticker : 3-4 hours
Troubleshooting for AE extension : 3 hours
Rendering as Telegram sticker : 3-4 hours
Documenting Blog : 6-7 hours
Total : 23-27 hours
FEEDBACK
Week 11 :
General Feedback
Try to maximise the space given. Do
take note of the use of graphical
elements, they should be minimalistic.
Focus on the expression of the
text.
Specific Feedback
Mr. Vinod like the first idea
(sticker with rabbit). He said
there are several variations I
can go with. One thing to take
note is to complete the shape,
never leave open
spaces.
General Feedback
Try to maximise the space given. Do
take note of the use of graphical
elements, they should be minimalistic.
Focus on the expression of the
text.
Specific Feedback
Mr. Vinod like the first idea
(sticker with rabbit). He said
there are several variations I
can go with. One thing to take
note is to complete the shape,
never leave open
spaces.
Week 12 :
General Feedback
We need to make sure that graphical elements should be as minimal as
possible. We should also make sure the sticker published on Telegram has
7pt white outline.
Specific Feedback
For the sticker that has rabbit on it, there is a lot of space in
between. For the moon sticker, I should increase the font size to fit
the empty space. Mr. Vinod advised me to express a little bit more on the type design
to add a little bit of festival vibe. The design itself is fine. The
silhouette of the rabbit to replace "l" is fine as well.
Week 13 :
General Feedback
No general feedback.
Specific Feedback
Well developed e-port. Good progression and documentation. Clever solution to the animation. Still feel some work needed on the type. That's said good job. Labels are so inviting and welcoming! Very good progress and well organized! Keep this up!
REFLECTION
Experience
It is a fun process to design our own sticker pack and get it published on Telegram. Everything is exciting except rendering the final animated sticker for Telegram. I faced a lot of issues trying to render as Telegram sticker, but in the process I also learnt a lot. This project is less stressful compared to the previous one because we already had the basic knowledge of type designing. Overall, it is satisfying and exciting to use the sticker I design in real life.
Observation
I observed that sir asked us to focus on black and white sticker has its purpose. He wants us to focus on the composition and the legibility of text and don't get distracted by colours. Once our black and white sticker is being approved, then it should not have much issues in colour. I also observed that most of my peers used gradient in our sticker designs. Things get tricky when we realised gradient will cause a lot of troubles when animating in After Effects. This is time I observed how everyone solved this issues by replacing that with several layers of flat tones.
Findings
I have learnt about the importance of legibility when designing the sticker. Because of the size, some details will not be visible when the stickers is published. For example, the orange highlight on the cloud is not visible from distance. The silhouette of the rabbit can be improved as well to make it more recognisable (but I think what I have done is still acceptable).
FURTHER READING
Typographic Design : Form and Communication
by Rob Carter, Philip B.Meggs, Ben Day, Sandra Maxa and Mark Sanders
 |
| Figure 5.1, Cover of "Typographic Design : Form and Communication", Week 12 (15/11/2021) |
Legibility
The content starts with a statement that designers often neglected and misunderstood typographic legibility. This is a subject requires careful study and constant evaluation. Typographers and designers have this responsibility to make it as clearly and appropriately as possible. This responsibility is suggested by Henry David Thoreau in Walden : "A written word is the choicest of relics. It is something at once more intimate with us and more universal than any other work of art."
Why letterforms must be designed with clarity? It is because the primary purpose of a letterform is to convey a recognizable meaning to the mind. The most legible typefaces are characterized by 3 qualities : contrast, simplicity and proportion.
 |
| Figure 5.2, Sufficient contrast must exist between letterforms, Week 12 (15/11/2021) |
There is an interesting finding says that lowercase letters can be ranked according to their distinctiveness as follows :
d k m g h b p w u l j t v z r o f n a x y e i q c s.
 |
| Figure 5.3, Letter shapes are cues to distinguish from one another, Week 12 (15/11/2021) |
I have learnt about the nature of letterforms which I never pay attention to, and it is important to understand their legibility so that word recognition can be achieved.