09.06.2022 - 24.06.2022 / Week 11- 13
Yung Siew Weng / 0339847
Typography / Bachelor of Design (Hons) in Creative Media
Task 3B / Type Design & Communication
WEEK 10 : TASK 3B BRIEFING
During the class session, Mr. Vinod had briefed us on the task 3B.
THE IMPORTANT NOTES :
1. Research lettering before all things started.
2. Read the article on “how to make Telegram sticker".
3. The social message can be chosen in the feedback form, which having a tab called “task 3b”. Choose any one of the greetings, or even can add it at the bottom if the greeting is not labelled but make sure inform before added.
4. Sketch at least five ideas down.
5. Digitalise the sketch by B&W, no shading, just the composition of letters and playing with the form and composition.
6. We can create the sticker by create own lettering (by brushes, drawing a letter), modify existing letter (take an existing typeface and modify it) or use existing type to communicate the social greetings.
7. After completed the B&W version, colored it. Make sure no gradients and blur shadows used, but flat shadow is allowed. Ended up the sticker by using the shades of red, white and black.
8. Sticker should be sized in 512x512 px, at 72 dpi.
9. Add the Taylor’s mark within the sticker that you create.
10. After the lettering are done, save it as ‘png’, create a white outline (7px) in transparent background. Go to telegram and search for “sticker bot”, which can help to create the sticker.
TASK 3B : TYPE DESIGN AND COMMUNICATION
MODULE INFORMATION
INSTRUCTION
In this task, we are tasked to express typographically a social message, greeting or the like, that is relevant to the campus community at Taylor's University or society at large. We are allowed to use minor graphical elements or visuals to aid in the message and design. You may use the appropriate colour schemes such as red, white and black after getting the black and white version approved. Ensure that the expression occupies the space and is legible and readable for its intended use.
EXPLORATION
After having the briefing from Mr. Vinod (Week 10 @ Task 3B Briefing above), I started the exploration on researching the letterings and typefaces.
After some study and discovery into how a sticker is made, I begin my sketches using the application 'Procreate'. Fig 1.1 below is my first version of sketch for the telegram sticker :
Fig 1.1 first sketch (week 11 / 07.06.2022)
WEEK 11 / 08.06.2022
GENERAL FEEDBACK : Too much graphic elements.
After obtaining comments from Mr. Vinod, I realised that I was utilising too many pictures and visual elements in my first sketch, which would not suit the project theme, so I took more research and reattempted the sketch.
Fig 1.2 sketch #2 (week 12 / 13.06.2022)
Then, as I was quite satisfied with the sketch and I started the adventures on digitalise it in Adobe illustration. At first, I created a B&W and coloured version :
Fig 1.3 digital version #B&W (week 12 / 13.06.2022)
Fig 1.4 digital version #coloured (week 12 / 13.06.2022)
WEEK 12 / 15.06.2022
#DIGITALIZE 1
GENERAL FEEDBACK : For #1, there is a little bit of manipulation to the font which is great.
SPECIFIC FEEDBACK : Suggest to add more manipulation to make it more interesting. For example, can make the tail of letter r come out a little bit, or maybe the terminal of letter A can cut the letter M, etc. If you using the existing typefaces, make sure you did some bits of medication to call it as your letterings.
#DIGITALIZE 6
GENERAL FEEDBACK : For the #6, it is nice. #6 are having a young view to it.
SPECIFIC FEEDBACK : You might need to add on outer shape and make the letter pop such as create a shadow. You may go with #6 but make sure you having the outer things and the background. It was 80% completed.
Following the receipt of feedback, I chose the #digitalize 6 as my final sketch version (fig 1.4) and start the adventures to make the outcome to be more preferable :
Fig 1.5 selected version (week 12 / 15.06.2022)
I added on “blocks” to make words to shape in 3D, and I also added outlines for stickers.
The difference between before (the top) and after the amendments (the bottom) :
Fig 1.6 before and after amendments (week 12 / 15.06.2022)
And, as I wanted to try whether can I created the sticker on my side in class before the class session ends, I take the latest version for the attempt :
Fig 1.7 latest version, PNG (week 12 / 15.06.2022)
Once I import the latest version in PNG, I started to import it on Telegram by following the link instructions that given by Mr. Vinod :
1. Find the @stickerbot on the telegram and follow their instructions.
2. Download the outcome!
*In case the document can't be read, find the @stickerator_bot and follow their steps, download the generated png from that bot.
Here is the result of the telegram sticker (I changed the background to the default telegram background) so I can see the outcome in a public perspective.
Fig 1.8 outcome of sticker, screenshot (week 12 / 15.06.2022)
Then, I showed my progress to Mr. Vinod for some clarifications :
WEEK 12 / 15.06.2022
#CLARIFICATION FOR THE SHADOWS
Yes, after you add those blocks had make your sticker pop out more than the previous. But, it were probably looks more outstanding if you color it differently, add it more tones and shades.
Yes, after you add those blocks had make your sticker pop out more than the previous. But, it were probably looks more outstanding if you color it differently, add it more tones and shades.
I came up with how to construct the sticker and then continued to make it great by selecting the colour that would go best with it. I tried a pink schema instead a red (pink = red + white. Below (fig 1.8) are the comparison on different composition and the outcome after adding the Taylor's mark.
Fig 1.9 comparison (week 12 / 16.06.2022)
As I felt that the outline might be some rough, I make an adjustment by re-created the outline, and this moment, I make it in 7px white outline, which instructed by the guidelines.
Fig 1.10 before and after the recreated the outline (week 12 / 16.06.2022)
Following the changes, I attempted to recreate the sticker on Telegram for observing the results :
Fig 1.11 sticker attempt #2 (week 12 / 16.06.2022)
Following sticker attempt #2, I realised that the colour schemes in the phone views were either too light or too loose (not so attractive). So, attempted to reconstruct the colours :
Fig 1.12 experiment #1 (week 12 / 18.06.2022)
After the colour texting, I received some feedbacks for my peers. And, i felt that the composition of melting at the "happy" might not so worked with the colours, seems a bit massy from first time viewer's sight. So, I decided to make some amendment by trying the melting effect on the word "birthday" or even nope.
I re-digitalize the sticker to create more possibility from it. The process of developing were recorded under fig 1.12 :
Fig 1.13 development (week 12 / 18.06.2022)
Then, I continued to the experiments on colours :
Fig 1.14 experiment #2 (week 12 / 18.06.2022)
Fig 1.15 experiment #3 (week 12 / 18.06.2022)
After the colour experiments, I preferred the one at the left of experiment #2 , which not having the melting effect (fig 1.13). To be focused, figure 1.15 below are the preferred.
Fig 1.16 preferred design (week 12 / 18.06.2022)
As, in my opinions, the sticker are designed motionless so the melting effect had seems to be too complicated in this situation. But, if the sticker are designed as GIF, it might be worked as I can created the sense of melting effects in the GIF.
Fig 1.17 Taylor's mark idea (week 12 / 18.06.2022)
Moreover, I like the idea of Taylor's mark in experiment #3, which indirectly connected the typo and the mark. Then, I continued my adventures on developing the best composition.
Take figure 1.15 as a reference, I develop a new colour composition by using the "Mickey Mouse colour code". My notion was when I developing or experimenting with the colours, I felt that my chosen colours are a bit "ultraman". I did not want the idea of it then I think of what character can I referred by having red, white, black (not out of the topic). Then, I discovered on the "Mickey Mouse colour code".
Fig 1.18 "Mickey Mouse colour code" (week 12 / 18.06.2022)
I like the colour code, as it mostly solved my issues on having a too loose (too bright) colour code. The "Mickey Mouse colour code" had a more contrast colours compared to the my previous attempts.
Fig 1.19 small 'detail' (week 12 / 18.06.2022)
I even make a "small detail" on the sticker. Instead of having lines, I used the brush tool to draw a "rough" Taylor's mark.
After, I tried it with my initial design idea (fig 1.5) for more possibilities.
Fig 1.20 experiment #4 (week 12 / 20.06.2022)
After experiment #4, I started to finalise my latest possibilities :
Fig 1.21 latest possibilities (week 12 / 20.06.2022)
Then, I started to import the possibilities to telegram, created the sticker for comparison :
Fig 1.22 screenshot, telegram default background (week 12 / 20.06.2022)
Fig 1.23 screenshot, telegram night mode background (week 12 / 20.06.2022)
WEEK 13 / 22.06.2022
GENERAL FEEDBACK : No orange can be used but can use the shade of red.
SPECIFIC FEEDBACK : Orange in contrast to red looks orange, but if use it as a shade within the red may work. Mr Vinod suggest on using "vermillion" as a reference for the orange part. Mr. Vinod like what I did with the logo, which insert it as the part of the words, but the "small detail" at the line are not necessary.
After received feedback from Mr. Vinod, I recoloured the "orangish" part. Below (fig 1.23) are my new design composition after the amendments :
Fig 1.24 After amendments, possible draft outcomes (week 13 / 22.06.2022)
I even create the possible outcomes (fig 1.23) into Telegram sticker.
Fig 1.25 screenshot, draft outcome (week 13 / 22.06.2022)
WEEK 13 / 22.06.2022
GENERAL FEEDBACK : The #1 looks fine but
make sure have a white outline around it.
SPECIFIC FEEDBACK : Mr. Vinod suggests on converting the black outline to a path, outline stroke and then outline the outline stroke.
As the adventures continued, I developed an outline for my final outcome based on Mr. Vinod's guidance :
Fig 1.26 guidance (week 13 / 22.06.2022)
Based on Mr. Vinod's guidance, create the outline stroke by click [object > path > outline stroke] :
Fig 1.27 before and after (week 13 / 22.06.2022)
After I felt satisfied on my outcome, I export it as PNG, 512x512 px, 72 dpi to create the telegram sticker :
Fig 1.28 Final draft outcome, PNG (week 13 / 22.06.2022)
Fig 1.29 screenshot, process of creating telegram sticker (week 13 / 23.06.2022)
Fig 1.30 preview on desktop, telegram sticker (week 13 / 23.06.2022)
Fig 1.31 - 1.32 preview on phone, day and night mode (week 13 / 23.06.2022)
FINAL OUTCOME OF TASK 3B
Black and White, PNG :
Fig 1.33 Final outcome of Task 3B, 'Happy Birthday' - Black & White, PNG (week 13 / 23.06.2022)
Coloured, PNG :
Fig 1.34 Final outcome of Task 3B, 'Happy Birthday' - coloured, PNG (week 13 / 23.06.2022)
Final outcome, B&W and coloured, PDF :
Fig 1.35 Final outcome of Task 3B, 'Happy Birthday' - PDF (week 13/ 23.06.2022)
Sticker Pack download link : https://t.me/addstickers/HBD_Jacq
FEEDBACK
WEEK 11 / 08.06.2022
#SKETCH
GENERAL FEEDBACK : Too much graphic elements.
WEEK 12 / 15.06.2022
#DIGITALIZE 1
GENERAL FEEDBACK : For #1, there is a little bit of manipulation to the font which is great.
SPECIFIC FEEDBACK : Suggest to add more manipulation to make it more interesting. For example, can make the tail of letter r come out a little bit, or maybe the terminal of letter A can cut the letter M, etc. If you using the existing typefaces, make sure you did some bits of medication to call it as your letterings.
#DIGITALIZE 6
GENERAL FEEDBACK : For the #6, it is nice. #6 are having a young view to it.
SPECIFIC FEEDBACK : You might need to add on outer shape and make the letter pop such as create a shadow. You may go with #6 but make sure you having the outer things and the background. It was 80% completed.
GENERAL FEEDBACK : For the #6, it is nice. #6 are having a young view to it.
SPECIFIC FEEDBACK : You might need to add on outer shape and make the letter pop such as create a shadow. You may go with #6 but make sure you having the outer things and the background. It was 80% completed.
#CLARIFICATION FOR THE SHADOWS
Yes, after you add those blocks had make your sticker pop out more than the previous. But, it were probably looks more outstanding if you color it differently, add it more tones and shades.
Yes, after you add those blocks had make your sticker pop out more than the previous. But, it were probably looks more outstanding if you color it differently, add it more tones and shades.
WEEK 13 / 22.06.2022
#EXPERIMENT 4
GENERAL FEEDBACK : No orange can be used but can use the shade of red.
SPECIFIC FEEDBACK : Orange in contrast to red looks orange, but if use it as a shade within the red may work. Mr Vinod suggest on using "vermillion" as a reference for the orange part. Mr. Vinod like what I did with the logo, which insert it as the part of the words, but the "small detail" at the line are not necessary.
#AFTER AMENDMENTS
GENERAL FEEDBACK : The #1 looks fine but
make sure have a white outline around it.
SPECIFIC FEEDBACK : Mr. Vinod suggests on converting the black outline to a path, outline stroke and then outline the outline stroke.
REFLECTION
EXPERIENCE
The experience for task 3B was really enjoyable and informative! We have more flexibility and perspectives to work or create with throughout this exercise since we are not confined to fonts this time, therefore we may design utilising typefaces other than the 10 offered. Overall, I had a great time designing and experiencing the adventures of creating the sticker.
OBERVATIONS
Throughout my observations, I observed that various colours elicit distinct feelings in the audience or viewers. For example, my sticker (happy birthday) appears to be a pleasant and fun day; yet, if I produced the sticker in black, it may not be able to reflect the "happiness" of the day; however, if I built the sticker in a soft pastel colours, it may be able to show the joy and the soft feelings of the day.
FINDINGS
I discovered that making stickers is not as straightforward as it looks. Progress involves idea inquiry, composition, experimenting, and more to produce a finished sticker. Even a basic design requires a lot of work, but yet w hen my sticker is finished, no words can explain my feeling.
FURTHER READING
1. How to Use Type (2012)
Fig 2.1 cover page of "How to use Type (2012)"
Type of source : e-book
Name : How to Use Type
Author : Marshall, Lindsey, Meachem, Lester
Year of publication : 2012
- Color of type (p.120 - 129)
COLOR OF TYPE
There are many ways that can use color to create impact with type and layout. Whichever chosen, remember that colors interact and react with each other: some work together, some fight each other and cancel each other out. Also, the background and any images have to be considered as they can affect the colors used for the type.
TINTS
A tint is a color with white added to make it lighter. Although the term derives from printing, the principle is the same in screen-based work, except that the lightening in tone is created by increasing the proportion of white light rather than white ink.
Moreover, tints are useful for differentiating areas of a design. For example, a tint may provide the background or the border for a box containing an extra or distinct piece of information.
Tints may be used for the type itself or as a background to the type, as in tables. Tints are usually represented as a percentage of the original color (where 100% is the full value of the original color and 0% is white) and most software programs will allow you to adjust these values easily.
Fig 2.2 sample of poster that apply tints
For example, based on the sample above (fig 2.2), Dimitris Kanellopoulos has used a gradient from black to bright pink, which reinforces the image of the lightbulb and creates a dark background for the reversed- out text.
USING COLOR TO CREATE HIERARCHY
Layering of information is usually referred to as hierarchy. Color is a useful tool for creating hierarchy both in print and on screen.
A strong, bright color, such as shocking pink can used to attract attention to a title or a key word or phrase within the body text. The reverse may also work, where a muted color stands out from a strong, boldly colored section of text or design. Contrasting colors can be effective. They can make something stand out or, if they are complementary opposites, they may react with each other, causing the interface between the two colors to seem to vibrate. This can be effective in creating hierarchy by drawing the eye to a specific area of the design.
Fig 2.3 sample of color hierarchy, by Nils Carlson
This technique is often used in packaging—of cleaning products. For example, Nils Carlson has used the metaphor of cleaning products for this design; the link is made immediately clear to the viewer through the recreation of the bright contrasting colors associated with the packaging for this category of product.
- Color and symbolism (p.130 - 131)
COLOR AND SYMBOLISM
Fig 2.4 color wheel
It is almost impossible to avoid associating colors with meanings, and it is important to consider these connotations in relation to the context or subject matter of the design.
One obvious link is between color and temperature: as shown on the color wheel, we think of reds and oranges as “warm” colors and blues and purples as “cold” colors. Of course, there are many other links—red as a symbol of danger or warning, black as the color of mourning.
However, if you are designing for an international audience, bear in mind that color symbolism may differ between cultures. For example, in China red is associated with good fortune not danger, and the color of mourning is white not black. Regional differences aside, these allusions can help direct the reader/viewer and also convey the context or feel for the design. If your design relates to a hot climate, the obvious color choice would be within the warm range, but if you wanted to create contrast or impact, you might choose colors from the cooler range. Interestingly, placing warm colors near cool colors can make the warm color appear warmer and vice versa.
- Technical issues relating to color (p.132)
TECHNICAL ISSUES RELATING TO COLOR
Color in print, for example, is reproduced differently from that on screen. In print it is usually produced using the four process color inks, cyan, magenta, yellow, and black (CMYK), whereas color for screen is produced from red, green, and blue (RGB) light. When designing on screen for print, be aware that certain colors visible on screen may not be replicable in CMYK.
When considering how color will print on your finished design, bear in mind that the stock can affect the depth of color. If the stock is very absorbent, for example, the color may appear less bright. However, the PANTONE® system shows how colors appear on different stocks, and so will help to avoid disappointing results.
- Type and movement (p.133 -147)
TYPE AND MOVEMENT
The illusion of movement is often created in print typography using all manner of techniques, including basic flip books, blurring effects, and by the typeface design itself.
Fig 2.5 sample of movement
For example, this poster (fig 2.5) by Small Stakes suggests movement by integrating the silhouettes of the birds with the black type.
REFERENCE
Marshall, L., & Meachem, L. (2012). How to Use Type. Laurence King Publishing.
Comments
Post a Comment