Typography / Task 3B: Exercise

29.10.2021 - 19.11.2020 (Week 10 - Week 13)

Adeline Wong Chyn Nee / 0344017 / Mr.Vinod N 

Typography / Bachelor of Design in Creative Media
Task 3 (B) / Type Design & Communication

---

LECTURES:

All lectures are completed from week 01-06 > Task 1 (Exercise 1 & 2)and Lectures

Week10: During class on week 10, Mr. Vinod briefed us about task 3B and its requirements.

Summary from the lecture:

- Have to use given 10 typefaces (can combine 2 or more fonts if needed)

- It is a sticker, so it is a PNG with transparent background

- White border of 7 points is needed to avoid blending in with the phone background

- Minor graphical element to aid the design

- Ensure the expression occupies the space as it is a small space on the phone

- Colours are allowed but use the appropriate color for the chosen greeting

- Sticker animation doesn't have to be complex, just a simple one is effective enough

- Need to incorporate Taylor's logo in sticker

- Can use after Effects, Photoshop timeline, or Adobe Animate

- PDF and PNG are required in the blog

Week11: During class on week 11, Mr. Vinod showed us an example of a sticker he did for Deepavali.

Fig. 1.1 & 1.2 Sticker demonstration in Adobe Illustrator by Mr. Vinod, Week 10 (29/10/2021)

---

INSTRUCTIONS:

We are required to express typographically a social message, greeting or the like, that is relevant to the campus community at Taylor's University or society and large.

Requirements:

1.  Set a margin. Create columns and rows.
2.  Choose an appropriate typeface from the 10 given
3.  Format the text while considering the point size, line
4. length, alignment, ragging, and tracking.
5.  Save as PNG (without background and with a 7pt white
6. outline), PDF, upload to G-Drive and embed onto portfolio.
7.  Screengrab your phone with the sticker sent.

We may use minor graphical elements or visuals to aid in our message and design. 

Upon completion of the static sticker, you will be required to animate the message. The animated version (512 px width, at 72 dpi) will be used on social platforms like Telegram/WhatsApp.

Choosing a greeting:

When shown the list of celebrations, I immediately looked for Christmas and wrote my name there because, since little, I have always been a Christmas lover as many good memories with my family and friends that I still remember until this day are created on that day.

Task 3B: Type Design and Communication
Variations

Sketch:

Fig. 2.1 Sketches for Christmas sticker (3 Variations), Week 11 (5/11/2021)

Idea 1: Gradient Christmas tree with a star on top and TU logo as the trunk

Idea 2: Christmas block/ land with a snowman couple standing under the TU logo (the mistletoe)

Idea 3: Christmas tree ornament with TU logo as the ornament cap

Fig. 2.2 - 2.4 Variations of Christmas sticker (B&W), Week 11 (5/11/2021)

After my sketch, I went straight to Illustrator to vectorized my ideas and these are the black and white outcomes after my first try.

I used Univers LT Std for the 3 stickers, but only using different styles.

I personally lean more toward idea 2 (Christmas block and snowman under the mistletoe) because I feel that the dynamic is present from the 3d effect of the font and graphical elements) and I also feel that it is a great balance between the graphical elements and the greeting words itself, the "block" does not solely rely on shapes but is the greeting that constructs the overall form of the sticker, so that is why I like idea 2 the most compared to idea 1 and 3.

Breakdown of idea 2 (chosen by Mr Vinod)

TU logo (mistletoe):

Fig. 2.5 TU logo as mistletoe, Week 11 (5/11/2021)

For this black and white version, I added colour to the mistletoe to give an understanding that the dots and stars are meant to be ornaments and deco. It hangs right above the head of the snowman, signifying that the pair of snowman is about to get in action. This is an action I could include in my sticker animation after finalising the vector design.

Snowmen:

Fig. 2.6 Snowmans' position

From the black and white static sticker, we can assume that both the snowman are about to hug and from that position, both snowmen have a height difference, and this sight is usually seen between couples. The snowmen are a representation of couples on Christmas Day, enjoying the holidays, having each other on their side, and most definitely, embodying the Christmas spirit by kissing under the mistletoe.

Snow surface:

Fig. 2.7 Snow as the surface of the cube, Week 11 (5/11/2021)

Although never seen in Malaysia, Christmas Day is always associated with winter and snowy weather, so I incorporated a white surface of snow for the top of the cube which helps change the overall look of the sticker, so I think that this element is a suitable choice frot his sticker.

Depth on texts:

Fig. 2.8  Text with 2-tone for depth, Week 11 (5/11/2021)

As for the text, I decided on a 2-tone color to show the depth of the Christmas cube/ land. With the work 'MERRY' in a darker shade and 'CHRISTMAS' in a light shade this signifies that the light is coming from the right side, thus the choice to make 'CHRISTMAS' lighter.

Texts effect:

Fig. 2.9  Added effect behind the text, Week 11 (5/11/2021)

Finally, I added another layer which is in white color and 1pt font size bigger than the one in front, I added it behind the texts to try and create even more depth to the greeting.

Revising progress

Week 10:

Fig. 3.1 & 3.2 of snow (before and after Mr. Vinod's advice)

During progress feedback on week 10, Mr. Vinod advised me to add height to the snow instead of a floor of snow which can make it look flat and ineffective. From his advice, I added the snow piles behind the snowman by using the direct selection tool and just altered the nodes of the original one.

Fig. 3.3 overall view of snow (after Mr. Vinod's advice)

Not only that, but during week 10, I shared with Mr. Vinod that the cube is originally supposed to be a present box with ribbons on the side, I couldn't execute the original idea on week 10, however, was encouraged by Mr. Vinod to do it anyway and we'll then see which idea suits better.

Week 11:

During the progress feedback on week 11, I showed both my colored stickers in class, and multiple details were painted out by Mr. Vinod.

Fig. 3.4 2 colored stickers developed from idea 1

Other than the snow pointed out in week 10, after progress on week 11, Mr. Vinod pointed out the white text behind made the text in front look messy and advised me to alter that into something else.

Fig. 3.5 close-up of white outline (before progress feedback)

Fig. 3.6 & 3.7 close-up of white outline (after progress feedback)

The next thing Mr. Vinod pointed out is the choice of the red, white and green gradient can be changed into a solid colour so it outs more focus on the text rather than the colour of the cube.

Fig. 3.8 & 3.9 gradient vs solid colours (before and after progress feedback)

Not only that, but Mr Vinod pointed out that the snowman's choice of colour made them blend into the white background so he advise me to add a radial gradient over each of the circles to give it depth and create contrast from the background.

Fig. 3.10 & 3.11 snowman (before and after progress feedback)

Finally, the snow element on top of the sticker took too much space so Mr Vinod advised me to decrease the amount of snow and bring up the size for the sticker to fill in the space.

Fig. 3.12 & 3.13 snow on top (before and after progress feedback)

Final Refinements

Fig. 3.14 Final sticker PNG (before animation)

Changes:

- Added snow pile instead of flat snow

- Added radial shadow to snowmen to avoid blending with the background

- Changed white outline by adding Gaussian blur

- Changed cube shapes from gradient to solid colour

- Change the amount of snow on top and increase the size of the sticker to fill the space

Fig. 3.15 Final sticker PDF (before animation)

Animation Process:

To start my animation process, I prepared each of the layers I am going to animate and which I am not going to animate. For example, the animation is not needed for the base of the sticker, so that is why I exported only the base as a PNG and imported it into Photoshop for the rest of the animation in the timeline.

Next, I separated each element that I am going to animate in Photoshop such as snow and the snowman, and named them in groups for the animation process later.

Fig. 4.1 Screenshot of named layers prepared for animation

I then transferred the layers into Photoshop and arranged them in the correct layer order, then I put them all in my timeline and it was ready for animating.

Fig. 4.2 Screenshot of named layers arranged in a timeline

For my animation, I decided to create a simple and cute motion for the snowmen, along with the snow and mistletoe on top of them. Below is a screenshot of my animation timeline and the keyframes I added for each of the layers.

Fig. 4.3 Screenshot of keyframes and effects on each layer

Final Outcome of GIF:

Fig. 4.4 Final sticker GIF

Fig. 4.5 Screenshot of sent sticker on Telegram

The link to download the sticker: https://t.me/addstickers/Snowmanlove

The sticker were made using Sticker Bot in Telegram

---

FEEDBACK

Week 11

General feedback: Too many graphical elements and reliance on them.

Specific feedback: Can make the snow into mountains and try executing the present idea and see how it goes from there.

Week 12

General feedback: White outline around the background (7 pt).

Specific feedback: Gradient should change into a solid color, can try adding gradient on the snowman to create depth and contrast from the background, 

REFLECTION

Experience

I initially had the thought that creating a sticker would be a lot of work but turns out it was a super fun process to go through and I learned a few important things or two throughout this task. To match the color with our chosen greeting was easier than I thought it would be, as I was quick to choose Christmas as my greeting. Thanks to the previous experiences of developing in Illustrator and bringing the design into Photoshop, this process was a lot smoother than the first time I did it. It was a fun experience overall and if I had the time I would want to create multiple stickers of different greetings instead of just one.

Observation

When creating the design on Illustrator, I realized that the resolution we picked before creating a canvas makes a huge difference in our exported PNG. What I did was I forgot to switch the resolution to 71 dpi in the beginning and so when I copy and pasted my 300 dpi design onto a 71 dpi canvas, the quality completely dropped and I had to redo the elements which were affected by the change. I have learned my lesson from that.

Findings

For this task, I  finally learned the way to create a sticker using Sticker Bot in Telegram. Before this, I was absolutely oblivious to the fact that stickers in telegram were added using a bot, so the process of learning how to use the commands fascinates me. Although it is a simple process to do, I still feel like I learned a pretty cool thing that I won't usually find by myself.

---

FURTHER READING:

Fig. 5.1 'Typography Referenced' book cover, Week 10 (29/10/21)

For further reading, I dig deep into one of the important typography principles, Grid.

Reference:

Henderson, K., Haley, A., Saltz, I., Tselentis, J., Poulin, R., Leonidas, G., Seddon, T., & Alterman, T. (2012). Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography (0 ed., Vol. 1). Rockport Publishers.

Typeface Pairing By Allen Haley

In this task, we are allowed to combine different typefaces into our sticker, so I decided to study Typeface Pairing.

Pairing typefaces should be more about contrast than similarity. For example, using Helvetica and Arial together in a composition does little to no good for the average viewer who won’t notice the differences between the letterforms.

Example of good typeface pairing:

Fig. 5.2 Flannery 0'Connor 'A Good Man is Hard to Find' book cover, Week 10 (29/10/21)

In each of Shelby Guergis’s book covers for A Good Man Is Hard to Find, handwritten letterforms announce the title, with a calmer sans serif face identifying the author. Custom lettering, Gotham, Centaur York University Department of Design, Canada.

No matter the pairing, make sure the selected fonts honor the content, ensure readability, and speak to any conceptual undertones that need to come across.

Fig. 5.3 Poster example, Week 10 (29/10/21)

Designing this predominantly typographic poster required a combination of a sans serif (Trade Gothic), a serif (Engravers MT), and a wood typeface (Berkeley Oldstyle Book). Each typeface denotes a particular level of information, from the headline to the subhead down to the dates and events at the bottom. 

From my observations, good typeface pairings have a subtle change in typeface, and its readability is present given the use of different typefaces in a single design. At the same time, it has to have that oomph to the choice of typeface, choosing one typeface that matches the purpose of the design than a readable typeface for the rest is a common choice of typeface pairing style I see.