T&H Week 10 - Week 13 Kinetic Typography
8/11/2017 - 29/11/2017 Week 10 - Week 13
Gilbert Evander Aligoey [0332508]
Typography & Hypertextuality
Final Project Kinetic Typography
Lecture / Tutorials
Week 11
15th of November '17
No lecture, just showing posters that previous students made as an example
Week 12
22nd of November '17
Mr. Vinod started off with giving a lecture about indicating paragraph, highlighting text, headlines between text and cross alignment.
Cross alignment : Two columns of paragraphs but the lines are always parallel to each other maintaining a cross alignment.
Mr. Vinod also mentions that your leading and paragraph spacing needs to be the same.
Indent : a line of text or position a block further from the margin than the main part of the text.
Mr. Vinod explained that if we were going to use indent, first we have to make sure our paragraph is using justified alignment otherwise it will be an uneven body of the text.
Widow : a short line of text left alone at the end of the column of a text.
Orphan : a short line of text left alone at the start of the column of text.
The way to fix paragraphs that has a widow or an orphan or both is to reformat the text by adjusting the kerning of the letters or by increasing the number of words.
To emphasise a word, a phrase or a sentence, it's okay to use italics for a number of 5 or 10 lines. To give emphasis in Bold, if it's a body of text then select the entire paragraph and reduce the font size by 0.5 if the boldness isn't really thick. And another thing you can do is to create a highlight.
Week 13
29th of November '17
No lecture was conducted, Mr. Vinod just checking the progress and giving some feedback or helping us to make the work better.
Instructions
Instructions
Final Project
Kinectic Typography
Requirements:
- Adobe Illustrator CC 2017
- Adobe After Effects CS6
- Adobe Photoshop CC 2017
Instructions:
- Look up for kinetic typography posters online as a reference
- Search for statements, dialogues, quotes, etc. that you want
- Sketch out your ideas of the poster on an A4 or graph paper or in Adobe illustrator directly
- Digitize your poster on Illustrator then animate it on After Effects or Animate CC or Photoshop
Since the font that I chose was a display font, I search for simple, Elegant type of poster where it looks minimalistic and good to look at. For reference, I look for a few posters that fit my font style.
Img 1.1 References
Img 1.2 Few tries of making the poster
The second poster idea was actually made by Mr. Vinod as he saw me struggling to find the characteristic, not the whole thing but just the big black circle and then just told me to fill it with my font's letters, numbers and symbols. After showing the poster, he said that the right poster is good, but needs a little bit of work in the lower area, and refine the words inside the O to be more rounded. So i work on it again.
Img 1.3 Final Attempt
So, I changed the colors of the O, because i think that it's more colorful. Then I animate it in After Effects. Here's the animated GIF.
Img 1.4 First Animation
The first animation that I made wasn't quite satisfying for me, so I'm trying to do something different.
Here is the second animation Process in After Effects Thumbnails,
Img 1.5 Thumbnail 1
Img 1.6 Thumbnail 2
Img 1.7 Thumbnail 3
Img 1.8 Final Animation of the poster
 |
Img 1.1 References  Img 1.2 Few tries of making the poster
The second poster idea was actually made by Mr. Vinod as he saw me struggling to find the characteristic, not the whole thing but just the big black circle and then just told me to fill it with my font's letters, numbers and symbols. After showing the poster, he said that the right poster is good, but needs a little bit of work in the lower area, and refine the words inside the O to be more rounded. So i work on it again.
|
 Img 1.3 Final Attempt
So, I changed the colors of the O, because i think that it's more colorful. Then I animate it in After Effects. Here's the animated GIF.
Here is the second animation Process in After Effects Thumbnails, 
| ||||
|
Feedback
Week 11
General Feedback : Kerning and Letterspacing are two different things and we need to learn that in order to create a font. Next week we have to print the final fonts from illustrator.
Specific Feedback : After Mr. Shamsul and Mr. Vinod checked my work, and said that my curves are not consistent with my style, other parts have to have like a straight horizontal or vertical line.
I have to change the curves on my numbers and symbols aswell. Positive symbol needs to be bigger and matches the others. other than that is quite consistent and good.
Week 12
General Feedback : We are supposed to submit the project today or it would be considered late.
Specific Feedback : When the lecturer checked my blog, he told me to make the reflection part longer as it's one of the important part of the blog, for the poster design, he said that my first design isn't good, where my design have to show the characteristic of my font. But after quite a while, I think he sees that I haven't got any idea on how to design a good poster, so he gave me some.
Week 13
General Feedback : Mr. Vinod told us that the final submission of portfolio and e-portfolio have to be submitted next week.
Specific Feedback : When the lecturer checked my progress on the poster, he said that it's good but the lower area needs some work. After I fixed it and work on the animation, He said that the upper animation is amazing, but I was kinda too focus on the upper part and not too focus on the lower area.
Reflection
- Experience
It was relaxing until Mr. Vinod said next week is the final submission for the animated poster and printed poster. Well the process might be hard overall, but it was worth it. I have finally learn the whole process of making a poster.
- Observation
I feel like im relying on making the works digitally, because it makes everything easier, if you made a wrong move then you can just undo it and problem solved. So I realised that I have improved so much digitally, even things that I don't actually think I could do, like animating stuff.
- Findings
When I started to make the design of the poster, I want it to be good and satisfying to look at, but without any references, I really just can't decide myself how it would look like, it's kinda look boring and so lack of ideas, so I have to be better at making and think of new ideas.
Book of The Week
The Layout Book
by Ambrose / Harris
by Ambrose / Harris
 |
| Img 2.1 The Front Cover of The Book |
The Layout Book pretty much explains the hows, whys, and why nots of layout, it's a good guide book for those who wants to get started on understanding how layout works.
 |
| Img 2.2 Classicism |
This book gives some of examples that is quite interesting, and important basic knowledge of layouts.
Classicism refers to the predominant characteristics of classical art deived from ancient Greece, such as simplicity, harmony, proportional representation and emotional restraint.
The Parthenon (first image like a building)
That building was built using a principle according to the proportions of the golden spiral (below the building image), which established by the golden ratio (8:13). These ratios continue to be used in modern times due to the timeless, classical and harmonious proportions they provide.
 |
| Img 2.3 Typographical Balance |
in addition to providing information, text forms a block of colour in many designs and often needs to be handled as a graphic element in order to achieve a harmonious balance with other elements.
Balance in units (First image)
Letterforms are not used in isolation as they form visual blocks in design, as shown in this specimen sheet from the 1728 edition of Cyclopaedia issued by English printer and type founder William Caslon.
Balance in single form (Second Image)
"A" Picture illustration from Luca Pacioli's De Divina Proportione (1509), created by Leonardo da Vinci, based on his study of the golden ratio, which he used to create characters with very attractive proportions.
