Typography | Task 3B: Type Design & Communication
27/10/21 - 10/11/21 (Week 10 - Week 12)
Jane Chong Yun Ann (0344255)
Typography
/ Free Elective in Bachelor of Design in Creative Media
Task 3B: Type
Design & Communication
LECTURE NOTES
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/17Pcc6te7YofVyQeTHGc726eL8o3sJSHD/preview"
width="640" height="480" allow="autoplay"></iframe>
EXERCISES
Task 3B: Type Design and Communication
Things to take note of:
- Size of sticker is 512px by 512px, so it will be kinda small
- White border (7pt) needed
- Use one of the 10 typefaces to express a greeting
- Integrate Taylor's logo somewhere in your sticker
- Avoid graphical elements
- Create a monotone and colourful version
- PDF and PNG version
Inspo / Visual Research
So since the greeting I chose is "Merry Christmas" (because, who doesn't
like Christmas???) I went to search some related inspirations.
Figure 1.1: Some inspirations, Week 11 (31/10/21)
The Christmas samples had quite obvious graphic elements, but I liked the
simple 'flat' feeling it had (but since its font resembles a somewhat
handwritten font, I don't think it would suit the 10 typefaces). Other than
that, most of the stickers had words with lesser letters than "Merry
Christmas", which consists of a whopping 14 letters. Nevertheless, I
got to sketching.
Sketches
Coming up with ideas was harder than I thought but it was fun to start
thinking about Christmas this early :D The usual Christmas elements are
mistletoes, festive lights, Santa hats, ornaments, Christmas trees...etc. So
I tried to incorporate some elements into the sketch.
Figure 2.1: Wishing you many Merry Christmas-es in 10 typefaces, Week 11
(2/11/21)
Figure 2.2: Christmas sticker sketches, Week 11 (2/11/21)
Sketches 2, 3, and 4 were variations of each other. The idea was a playful
arrangement to showcase the free-spirited nature of Christmas, with some
graphical elements to enhance it. Sketch 5,6 and 7 composes of the Christmas
tree and wreaths, but may have too much reliance on graphical elements
too... Sketch 1 actually looks pretty decent for me but may appear too
cramped or small for a Whatsapp/Telegram sticker.
Digitization
Some initial digitization attempts of sketch 3 + 4:
Figure 2.3: First digitization attempts, Week 11 (2/11/21)
The "R" in the form of a Christmas tree doesn't work well with Taylor's logo
(and I can't remove the logo so bye-bye Christmas tree). I felt that the
serif font worked better in this style compared to the sans serif one,
especially the version where the edges are rounded and the strokes are
adjusted to have a sense of wonkiness to it - maybe it helps brings out a
festive jolly mood~
Following Mr Vinod's feedback, I explored more on the wreath idea.
Figure 2.4: Digitization progress, Week 12 (9/11/21)
I used Gill Sans Std Bold Condensed for this. While I made it into a
wreath-like shape using the Type to Path tool, it felt too 'jagged'. Thus,
like the digitization attempts above, I also rounded the edges of the
text.
Figure 2.5: Made it safer for babies, Week 12 (9/11/21)
Maybe because it is in greyscale, it didn't look that appealing... so I
tried to add colour.
Figure 2.6: Questionable colour attempts, Week 12 (9/11/21)
The gold wasn't working out, my friends commented its readability wasn't the
best. Moreover, the border is..um..., and the black is just too dark for
Christmas.
Thus, to solve my dilemma, I went digging for more inspiration.
Figure 2.7: More references, Week 12 (9/11/21)
I liked the gold effect of the first one as it gives the grand, magical
feeling of Christmas :D. The other two references had this very cute
cartoonish, 'balloon'-like feel to it, which I think can help communicate
the jolly feeling of Christmas~
Figure 2.8: Better colour attempts, Week 12 (9/11/21)
YeahHHH it's finally coming together, I can already feel the Christmas
spirit coming!!!! I think I will add more depth and shine effect to the
words later on~ I chose white words as it gave the brightness that is
appropriate for the season of Christmas, as compared to green and red.
I then uploaded the designs as a sticker pack in Telegram and tested them
out.
Figure 2.9: Testing stickers, Week 12 (9/11/21)
Feedback was given and I followed the suggestion to try a variation with red
colour. It was also at this point when I realised my layers
were...everywhere.....but I think I'll worry about that in the animating
stage.
Figure 2.10: A glimpse of the layers, Week 12 (11/11/21)
Figure 2.11: Sticker testing 2.0, Week 12 (11/11/21)
I think I will keep two variations in the sticker pack but animate the red
one as it has a more festive feel.
It was brought to light that gradients and AE aren't good friends, so we had
to change those parts of our designs to make it either completely flat
coloured or two/three-toned. I adjusted those layers and finally organized
my layers to start the animation (now only if it were that
straightforward..):
Figure 2.12: Organizing layers, Week 12 (14/11/21)
Animation
Given that AE works with RGB mode and AI usually works in CMYK mode (I
think..) I had to change the colour settings of the file, otherwise, the
colour will end up looking very..ugly (as shown in Fig 3.2).
Figure 3.2: Wonky colours (left), RGB mode in AI (right), Week 13
(15/11/21)
SO...I can finally start my animating process after
Figure 3.3: Animation keyframes, Week 13 (15/11/21)
The animating process wasn't the most difficult part, per se, it was the
exporting-with-bodymovin-extension parts that made this whole process
29314038x harder than it needed to be (bodymovin is an extension to make
Telegram animated stickers).
Time to list out what went wrong:
1) Render Failed! Composition should not contain any imAgEs
Figure 3.4: AE not cooperating with rendering, Week 13
(15/11/21)
I think this error should be worded better, maybe "YOU CAN'T KEEP YOUR
AI FILES WITH THIS EXTENSION" would have been more efficient.
To make a shape layer out of your vector (AI) layers, you need to
right-click. the AI files > Create > Create Shapes from Vector, then
there will be a 'star' icon beside it.
Figure 3.5: The only stars that matter, Week 13 (15/11/21)
2) Don't get too excited with your blending modes.
Maybe this was my own mistake, something I overlooked, but let's not get
to that. I could only use the 'Normal' blending mode because, after
changing the vector files to shape layers, the colours will decide to just
yeet themselves out and replace itself with some other forbidden colour.
Figure 3.6: More wonky colours, Week 13 (15/11/21)
3) I only have a stack of KBs to work with
Figure 3.7: AE not cooperating with exporting, Week 13 (15/11/21)
The sticker was already simplified because of all the 'fancy' effects but
I guess it was still pretty...big :,). Okay, fine, I edited the AI file to
have lesser colours (on top of removing any extra blending modes) and
sifted through 400+ layer 'Groups' and deleted unnecessary layers, and had
to rE-aNimAte all of it again because the original AI file changed.
Though pretty inefficient of me, I thought this was the final stretch; I
went through changing layers, deleting layers, re-animation,
re-re-animation...all that's left is putting it into the telegram bot,
which, from prior experience, wasn't too much of a hassle. That's it,
right?
Haha...that's where the fourth problem came in.
4) ....
Figure 3.8: something went wrong here, Week 13 (15/11/21)
I don't know where to begin
Some random squares were flying around, the baubles are just GONE, the
white border seems to be dissolved into nothing and the animation itself
seems to be 0.5x the speed??????? Needless to say, there was much
disappointment after hours of work.
But not all hope is lost:
5) No clipping allowed
As the title suggests, I couldn't clip anything within a shape otherwise
these squares will show up and ruin the party. So I had to remove the
inner stripes of the bauble (and I discovered MORE redundant layers in the
process, so keep your layers in check kids).
This realization came after removing the layers one by one...to see which
was causing the hideous squares....
Figure 3.9: Many sticker attempts later, Week 13 (15/11/21)
Of course, I didn't turn off layer by layer blindly (it would have taken
way way way more trials and errors). I judged by what the layer was
covering (eg: the yellow cheese square covered everything behind the
bauble layer, and the red square only covered the second bauble
string)...but the process of finding out was just...troublesome :D...
Final Submissions (yay)
Figure 4.0: Final black and white sticker (PNG), Week 13,
15/11/21
Figure 4.1: Final coloured sticker (JPG), Week 13, 15/11/21
Figure 4.2: Final stickers (PDF), Week 13 (15/11/21)
<iframe src="https://drive.google.com/file/d/1r1pYKOeGvaRgNLs7NOjp5j2pqmN1oka4/preview" width="640" height="480" allow="autoplay"></iframe>
Figure 4.3: Final sticker animation (transparent background) (GIF),
Week 13 (15/11/21)
Time Taken
Sketch: ~1 hour
Digitize: ~ 4-5 hours
Re-Digitizing for Animation: ~1 hour
Installing AE extensions and troubleshooting: ~2 hours (it was not
fun)
Animating + Making Animated Sticker: 7.5 hours :,D....
Blogging: ~5 hrs
Total: ~20-21 hrs
FEEDBACK
Week 11
Specific Feedback: Sketch 6 & 7 are stronger, can explore with
that. 6: reduce the size of the graphical element and place Taylor's logo on
the ornament or in between the words (as 'dots'), increase the size of the
greeting. 7: Add "tree leave" shapes to make it look more like an 'R'
Week 12
Specific Feedback: Looks good, keep the simpler ball (not
the shiny one). The flat white design is better but try it with a red
overall gradient as well.
Week 13
Specific Feedback: Fantastic work. A class apart. Good job on the still and then the gif. (thanku cher :,)) )
REFLECTION
Experience
This task was something I was a little skeptical at the start because I
wasn't so confident in actually starting as I didn't really have any
'strong' ideas in my opinion. But after adding colour, I think it ended up
being something I was really happy with. However, I was very careless and
'reckless' with my layering and, in the end, created a lot of redundant
layers that I had to delete (more on that later).
The animation part was actually pretty fun! I tried to make it have a cute
looping bounce. The exporting issues with the bodymovin extension, on the
other hand, took a lot of repeated testing and patience :,)... I may not be
well versed with AI / AE enough to know how to properly portray the effect I
want (eg: gradient) buT as of now, this is the best that I can do.
Do I want to do it again though? Most probably... not anytime soon ;,D
Observations
Other peers had very cool and interesting takes on different festivals as
well! Some made use of punctuations as their 'graphical element', which I
thought was pretty creative and cool :D
Findings
The bodymovin extension is really useful in creating animated telegram
stickers, but with it comes a lot of things to be particular about (which, I
guess with time, can be easily mastered). While it was a test of patience, I
feel satisfied in the end that it was all figured out.
FURTHER READING
From the book list that were recommended, I chose "Typographic design:
Form and Communication" by Rob Carter, Philip B. Meggs, Ben Day, Sandra
Maxa and Mark Sanders.
Reference: Carter, B., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.,
(2015). Typographic design: Form and Communication. Hoboken, New Jersey:
John Wiley & Sons, Inc.
Figure 5.1: Book cover of Typographic design: Form and Communication,
Week 13 (15/11/21)
The part I read touched on the topic of legibility and digital
typography.
Due to the digital era of technology, there are endless possibilities for
typeface manipulation. Thus, this also brings light to having too much
freedom to manipulate type thoughtlessly and follow common cliches. Thus,
designers are responsible for creating a legible typeface.
Software tools (to manipulate type) have an ideal usage: to express a visual
idea instead of filling out a page with words. Drastic distortions can
change the optical relationships between each letter. The proportions of the
letter (in terms of height, width as well as stroke width) also
changes.
Figure 5.2: Distortion examples, Week 13 (15/11/21)
Comments