Typography // Task 03 B

October 27, 2021

Typography // Task 03 B

27.09.2021 - 00.10.2021 / Week 10 - 14
Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media
Typography Task 3 B: Type Design & Communication

LECTURES

✧ Task 03 relates back to: Task 01's PART Typography in Different Mediums.

All lecture sessions done in Task 01

Week 10: 27.10.2021

We were given a brief by Mr Vinod on Task 03 B. We are tasked to create a social greeting sticker for Taylor's community from the list sir had created on google sheets. We first need to create (1) a static sticker & (2) an animated sticker to be used in Telegram.

Fig 1.1 Festive greetings to choose from

Project details:

✧ Sticker Size: 512px (w & h)

✧ Resolution: 72 dpi

✧ Include Taylor's LOGO

✧ Choose a typeface from the 10 given

✧ Small graphic elements are allowed

✧ Prepare both in Black & White & Colour

Fig 1.2 Example from Mr Vinod

INSTRUCTIONS

EXERCISE

Task 03 (A): Type Design & Communication

Inspiration & Research: (27.10.2021)

Fig 1.1 Sticker References

I like how these stickers in Fig 1.1 have a fun and outgoing feel to them.

I've chosen 2 upcoming festivals to sketch and generate ideas from:

Christmas & Chinese New Year.

Mr Vinod suggested laying out all the 10 fonts to choose the one typeface we want to continue on with the ideation drafts.

Fig 1.2 Font Variations from the 10 given typefaces

Idea Variations & Draft Digitalisations: (28.10.2021)

1. Merry Christmas

Fig 1.3 Christmas Inspiration from Pinterest

Fig 1.4 Merry Christmas Black & White attempts

Fig 1.5 Merry Christmas Colour attempts

When we think of Christmas, we think of the iconic Christmas tree, raindeers, Santa, snowman, and many more symbolic elements to this festive. I decided to create a few drafts from one of the Christmas elements: the ornaments, Santa's hat & Christmas fairy lights. I also did a coloured variation just to see how it will look like.

#1 ORNAMENTS: I choose the font Bembo Std and wrap distorted it into a ball shape, while the hanging part of the ornament is made up of the Taylor uni's logo.

#2 SANTA'S HAT: Also using Bembo Std. I've distorted it into a santa's hat's shape that i drew using the brush tool. It also looks like a Christmas tree wearing a santa's hat in Fig 1.5's colour exploration.

#3 CHRISTMAS LIGHTS: For this design, I used Janson Text LT Std. I decided to keep it simple, making the wordings float while a thin line flows through the letter to create a connecting effect of making it a fairy light. I've also replaced the "dot" in the "I" into a light bulb containing the Taylor Logo. I've tried out 2 styles of colouring in Fig 1.5.

2. Happy Chinese New Year

Fig 1.6 Chinese New Year Inspirations from Pinterest

Fig 1.7 Chinese New Year Black & White attempts

For this idea, i decided to also create 3 drafts just to experiment with recognisable Chinese new year festive shapes that I can fit the wordings in.

#1 CNY WALL DECO: This idea has more graphical elements in it, I've tried one without the graphical elements and it looks off. It will be a slightly larger sticker with the usage of the taylor's logo as the tassel at the bottom.

#2 PAPER DECAL: I've used 2 fonts for this ideation. It was inspired by the inverted "Fu" calligraphy paper decal.

#3 MONEY: I decided to fit all the wordings into the shape and added 2 kumquats on reflecting sides to add to the feel of Chinese new year.

Fist Digitalisation : (03.11.2021)

After getting Feedback from Sir, I've decided to go with the festive: Merry Christmas, and the design I've ultimately choose the #2 SANTA'S HAT in (Fig 1.4).

Fig 2.1 Amendments from Feedback (03.11.2021)

Fig 2.2 Individual character Amendments (03.11.2021)

Sir suggested to keep the distortion minimal. In Fig 2.1, I've showed the shapes I've used to Envelop Distort the words. In the First Attempt version, the hat has more wave and curve to it, I've amended it to a simple hat with straight lines to minimise the distortion.

In Fig 2.2, I observed & realised the words are all not sitting exactly on a straight line and some letters like the "R" overlapped the other letters. I went in with the Direct Selection Tool and amended each letters by using the ruler as my guide. I think it is neater after the amendments.

Final Black & White Sticker : (03.11.2021)

Fig 3.1 Final Black & White Sticker

Colourisation of Final Design: (03.11.2021)

Fig 3.1 Colour variations

I wanted the sticker to have a soothing feel, hence I mainly played around with colours that are leaning towards the pastel shades. I experimented with a bold style as shown on Fig 3.1 's right sticker (#4). It does stand out though I am not sure if I really like it.

Fig 3.2 Adding a border

After determining the final colours, I moved on to creating the border for my type expression to sit on, as from my research most social media stickers with text will have a sort of border surrounding the type. I started with the left in Fig 3.2, which had a much sharper edge and there were some elements that i want to erase. I've rounded the edges and smoothed out the lines as seen on the right of Fig 3.2.

Fig 3.3 Amending the shape

Fig 3.4 Adding White border to final stickers

I then went into Photoshop to add the white borders as indicated in the brief.

XmasJoy Sticker Colour Options:

Fig 3.5 Pastel Colour Option

Fig 3.6 Vibrant Colour Option #1

Fig 3.7 Vibrant Colour Option #2

Fig 3.8 Making the sticker in Stickersbot

Fig 3.9 Final Stickers in Telegram

Link to XmasJoy Sticker Pack: https://t.me/addstickers/XmasJoy

Final Static Sticker: (10.11.2021)

After getting feedback from the lecturers, I've decided to go with Vibrant Colour Option #1 as the final sticker.

Fig 4.1 Final Static Sticker

Animation Process of Final Sticker: (13.11.2021)

Fig 5.1 After Effects Tutorial

I've never used AfterEffects before, so it was a new exploration for me. I learned the basics of AE on Youtube before deciding to attempt the Rotation & Scale function, which looks easy for a beginner. I was very pleased with the end results, however, I ran into problems when using the extensions provided by Telegram to render the animation into a sticker. (as shown in Fig 5.2.1 & Fig 5.2.2)

Fig 5.2.1 & 5.2.2 Extention Errors

I went onto google the solution for both problems, the 1st was fixed relatively easily however the second error was a bit tricky. It said "should not include any images" which I then changed the input files from Ai into Vector Shapes. One thing I've discovered was that Ae could not retain the colours on the layers that contained gradient colours. Ae will turn them all into grey (as shown in Fig 5.3). At first i could not understand why this was happening, until I converted the last layer (which was a solid colour background for the type expression to sit on) retained it's colour (it is the beige colour layer shown in Fig 5.3)

Fig 5.3 Gradient Vector Shape Layer Errors in Ae

With no other ways that google suggested can fix the problem, I went and consulted Mr Vinod about the problem, which sir made a post about to share it to the rest of the class. Sir mentioned to try 2 or 3 tones in our type design.

Fig 5.4 Mr Vinod's Facebook Post about Animating Issues I've faced

Ditching the approved gradient colour option, I recreated the sticker using 2 tones back in Ai.

Fig 5.5 Recreating a new 2 tones colour sticker design

The good thing I've discovered in Ae is that, we can just copy and paste what I've toggled into a new file. Which was what i did to safe time, as what i wanted to animate is still the same items. (Fig 5.6, shows my artboard)

Fig 5.6 Recreating a new Ae file for the new 2 tones design

Elements animated:

1. Santa's hat ball puff with the Taylor's Logo.

I used the rotate function, toggled (aka key frame) it to be 0 at the beginning and I've keyed in "2" and toggled it towards the end of the duration. (not sure if I'm doing a justice in this explanation, but this was how I made the element rotate)

2. Stars

For this I want to animate the stars blinking in and out. I used the scale function. After determining the key frames, i switched into this graph view to adjust how fast + how big or small I want the stars to appear. This process was duplicated through the duration and is also copied onto the other 2 stars.

Fig 5.7 Scaling the stars graph view in Ae

Even with the amended 2 tones colour design, I was still unable to export it as a telegram sticker. I did not let my efforts done in Ae waste, I exported it into a GIF format using MediaEncoder.

Fig 5.8 Exporting GIF in MediaEncoder

Final Sticker GIF: (15.11.2021)

Fig 5.9 XmasJoy Sticker GIF

Final Compilations: (15.10.2021)

Fig 6.1 Final XmasJoy Sticker Black & White PNG

Fig 6.2 Final XmasJoy Sticker Approved Colour Option PNG

Fig 6.3 Final XmasJoy Sticker GIF 2 tones Colour Option PNG

Fig 6.4 Final XmasJoy Sticker Colour Options PDF

Fig 6.5 Final XmasJoy Sticker GIF

FEEDBACK

Week 11: Review of Draft Digitalisation (03.11.2021)

Lecturer's Feedback:

Fig 1.1 Lecturer's comment on Sticker Ideation Draft

✧ The distortion for (Fig 1.4) #1 Ornament & #2 Santa's Hat works, especially the hat. It works as it is kind of describing Santa.

✧ In (Fig 1.4) #3 Christmas Lights, looks cool though there might be too much negative space, it might affect the impact of the sticker when it is small on a phone. Taylor's logo is a bit too small

✧ In (Fig 1.4) #2 Santa's Hat, suggestions to not make the distortion so curvey, the letters can be standing straight so long as it assembles the shape of a Santa's Hat

Week 12: Review of First Digitalisation (10.11.2021)

Lecturer's Feedback:

Fig 2.1 Lecturer's suggestion

✧ Good job & excellent work on the stickers.

✧ Suggest to go with 2nd design (shown in Fig 2.1)

Week 13: Submission (17.11.2021)

Lecturer's Feedback:

✧ Excellent progression. Good documentation. Good job.

✧ Very Good Progress and well organized; excellent & thorough progression posts!

REFLECTIONS

Experience

This is an easier task compared to the other tasks we were given. Little did I know, that this later became one of the hardest tasks (😂😅). The ideation for this task was fairly easy for me as I already had ideas of how to navigate around this task from reading the other seniors' blogs. The idea of creating a sticker by using type only intrigues me. I have never used Adobe After Effects before this task, so it took some time for me to go through and learn the function and buttons within the software. It took me about 2 hours to complete a 3 secs looping animation, which got me appreciating animators for creating all the animations we see online. I was pleased and overjoyed with my animation. However, my happy experience with After Effects seems to stop there, I had multiple problems when I want to export the animation into Telegram. I've tried to solve it, even with sir's suggestion to the solution, it was still to no avail. So I ended up just creating a GIF 🥲😭)

Observations

The overall creation of the type expression was done fairly fast as the foundations for typography were honed in on us. However, I also realised the more I learn about typography, the more I am interested in the ways a type can transform the design. For instance, we are to use the word "Merry Christmas" to express the festive, and it is truly a good task to end this module as it tests our typography knowledge, which we did in fact start our tasks by creating type expressions.

Findings

To Never Underestimate An Easy Task.

To Never Judge A Book By Its Cover.

I think if you'd read my blog, you will know what these two phrases refer to :)