Advanced Typography / Task 2: Key Artwork and Collateral

18.9.2023 - 20.10.2023 (Week 4 - Week 8)
Johnny Lam Wee Zhe / 0363436 / Bachelor of Design (Hons) in Creative Media
Advanced Typography
Task 2 Key Artwork and Collateral

LECTURE

Lecture 3 - Context and Creativity

Why are hand writing important to study of type/typography?

The reason why hand writings are studies is because the first form of the mechanical type is created based on and imitated from hand writing.

Here is the evolution of the Latin letters:

Fig 1.1 Evolution of Latin Alphabet

The earliest writing system known is a cuneiform used between 34 Century B.C.E to the 1st Century C.E. where a distinctive wedge for was the result of pressing the blunt end of the reed onto wet clay. Cuneiform are then evolved from pictogram and is written from left to the right.

Fig 1.2 Cuneiform Tablet

Then ancient Egyptians create their own writing system which is fused with relief of carving. The system is a mix of a rebus and phonetic characters and it is the first link to the future alphabetic system.

Fig 1.3 Egyptian Writing System

Eventually, Phoenicians start to create a writing system based on the Egyptian logo-consonantal system of 22 letters. Which is the adopted by Ancient Greeks who adds the necessary vowels. The letters are written in between guideline for a more organized look and it is written in a boustrophedon format where sentences are read from left to right and then, right to left. In the time, the strokes of the letters start to grow thicker which often used in Greek inscriptions are soon adopted by the Romans in formal lettering.

The Romans uses a thick, flat brush to outline the letters and then uses a mallet and chisel to be use on inscriptions.

By the 4th Century, letters become more rounded and has less stroke for a more faster handwriting as a Roman Uncial.

The Uncial are then evolve in England into a much slanted and condensed form. However, the rest of the European continent has a more devolved writing system and requires a reform. This is when Carolingian Handwriting Reformer comes in.

After the fall of the Roman Empire, the breakdown of hand writings in various different regional styles. These writings are often kept alive through isolated, religious location.

Then a court school was established under the order of Alcuin of York where book production has increased and hand writings become standardized, adding pronunciation and writing conventions such as capital letters at the beginning of a sentence, space between words and punctuation. This is when Carolingian minuscule formed and is used to help unify the European empire. This writing system is also the start of using lower case letters.

From then on, the writing starts to develop into several different style of writing but the convention remains the same.

MOVABLE TYPES

The act of printing using wooden blocks has already been use widely in China, Korea and Japan (Dharani Sutra AD 750). The earliest known printed book is the Diamond Sutra: 16 inch scrolls with the world's first printed book.

The Diamond Sutra is printed by Koreans who established foundry to cast movable type in bronze, allowing a dismantling and resetting of text.

INSTRUCTIONS

TASK 2A - LETTER ARTWORK

IDEALIZATION

As my first step into doing task 2, I start out by creating a mind map about myself and choose how to express myself into letter forms.

Fig 2.1 Mind Map of Self Expression

From the mind map I have written down, I pull out some of the concepts to pull it off. Initially, I extracted the cyberpunk and nostalgia concept featuring one of my childhood cartoons. I then download reference image from google search, looking for directions to take. Here are some of the reference:

Fig 2.2 Reference Image (16/9/2023 Week )

From the reference above, I begin to sketch out my first draft from the reference picture and explore the design for a little. Here are the explorations sketches I have gathered.

Fig 2.3 Draft 1 Sketches

The sketch in the center of the board is derived as an attempt to mimic the Totally Spies art font. I then develop this further into the artwork on the upper right which eventually leads to bottom right sketch.

Fig 2.4 Draft 2 Sketches

DIGITIZATION

After the sketches, I start my digitization process of my key art and explore it a little further in Adobe Illustrator and test out many other possibilities for the key art. First I digitalized the key art directly from the sketch and then smooth them out a little.

Fig 3.1 Digitization Exploration 1 (27/09/2023 Week 5)

These key art are also directly digitalized from the sketches but dies quite suit the mood I'm going for especially the one at the left.

Fig 3.2 Digitization Exploration 2 (27/09/2023 Week 5)

The key art shown below is one of the mini exercises that Mr Vinod tells us to do and disregard everything (except for the basic design standard like readabiltiy) and do what we liked. This is the result of the exercise.

Fig 3.3 Digitalizing Exploration 3 (27/09/2023 Week 5)

So with that, I decide to explore this particular concept and polish it a little to see whether this works or not. Here is the more clean up version alongside other kind of exploration as well. I have also play around with the concept based on a 'Jell-O' like structure feedback from Mr. Vinod to see where it takes me.

Fig 3.4 Digitalizing Exploration 4 (27/09/2023 Week 5)

Fig 3.5 Digitalizing Exploration 5 (27/09/2023 Week 5)

Then during class, Mr Vinod told us to choose a key art to apply onto a collateral and after much consideration, I decide to choose this one due to it's readability and matches the type of look I am going for.

Fig 3.6 Chosen Key Art (27/09/2023 Week 5)

Fig 3.7 Key Art Applied to Shirts (27/09/2023 Week 5)

The next step of the Key Art journal is to apply colors to the Key Art. I went ahead and look for a particular color scheme in Adobe Color. Here are the color scheme that I found to be interesting:

Fig 4.1 Color Scheme Chosen (27/09/2023 Week 5)

Using these color scheme, I apply these colors onto my Key Art to see which one works or not. The third color scheme is selected solely because of the high contrast and I have receive the feedback regarding the lack of contrast in some of the color scheme selected. Here is what it looks like after I apply the colors.

Fig 4.2 Color Scheme Key Art 1 (27/09/2023 Week 5)

Fig 4.3 Color Scheme Key Art 2 (27/09/2023 Week 5)

Fig 4.4 Color Scheme Key Art 3 (27/09/2023 Week 5)

For this one, I choose the third color scheme to continue this project.

KEY ART RESULT

Fig 5.1 Final Key Art (Black and White) (27/09/2023 Week 5)

Fig 5.2 Final Key Art (Colorized) (27/09/2023 Week 5)

TASK 2B -COLLATERAL

In the next part of the assignment, we are tasked with creating a huge branding for the key art work and expand upon it. As well as creating social media presence for the artwork branding and it's animated counterparts.

ARTWORK EXPANSION

As part of the collateral task, we are tasked with expanding the artwork from the first part of this project in order to be applied to social media (Instagram) and merchandise application. First I take a look at the examples given to get some inspiration on how this can be done. Here is the link:

https://www.pentagram.com/work/sector/arts-culture

From there, we will have to start to explore how each collateral would have worked. One of the example gave me an idea on the interactivity between Instagram post that give viewer a message when viewing the bigger picture. For a start, I begin with taking Mr. Vinods' orders to expand literally from the letter artwork and crate several lines.

Fig 6.1 Artwork Expansion 1 (10/10/2030 Week 7)

Fig 6.2 Artwork Expansion 2 (10/10/2030 Week 7)

Fig 6.3 Artwork Expansion 3 (10/10/2030 Week 7)

Then from there, I begin to download some pictures of various different merchandise including t shirts, hoodie, badges, tote bags and a sketchbook. Here are the original pictures I have downloaded:

Fig 7.1 Merchandise Original Picture (10/10/2030 Week 7)

I put all of these pictures into Adobe Photoshop and edit them accordingly. I clear our the marks with graphics on them, makes changes like replacing the boat wheel into a letter J, remove graphics from the tote bag and badge, blur the hoodie 'static' texture and change colors here and there. I also add the artwork to some of the merchandise.

Fig 7.2 Photoshop Merchandise (11/10/2030 Week 7)

After that, I move all these images on Adobe Illustrator and start planning out the layout for Instagram posts. I ensure that all posts looks like it interact with each other, creating shapes and lines extended from the final letter artwork, these shapes and lines will interlace other objects in another post.

Fig 8.1 Creating shapes in Interacted Parts (11/10/2030 Week 7)

Fig 8.2 Apply mask to image (11/10/2030 Week 7)

Fig 8.3 Apply interacting shape to the images (11/10/2030 Week 7)

Fig 8.4 Screenshot on how I create another posts (11/10/2030 Week 7)

By the time I finished, this is the first draft of the edit post:

And here is the final post for submission

ANIMATION

After finishing the collateral, the next task on the list for this project is to create an animation for the name art. I initially wanted to create an animation via Adobe Illustrator and Photoshop similar to what I did for the Text Expression project last semester but due to time constraints, I decide to just animate it one Adobe Aftereffects.

I first insert the word art itself onto plain black background. As an inspiration, I look back at the post I made which tends to have curvy shapes and size and decide to corporate it onto the animation.

Fig 9.1 Inserting the name art and adding timeline (25/10/2023 Week 9)

The idea here is to have the idea of waves (which is what the curvy shapes reminds me of) 'causes' the color of the letter to appear but will only be reveal if the waves of another color swoop in.

Fig 9.2 Drawing waves with pen tool (25/10/2023 Week 9)

Fig 9.3 Animate the wave movements (25/10/2023 Week 9)

To make thing interesting, since we are making an animation in GIF form, I wanted to make the animation loop but figure I should try something turn the GIF back to an empty black screen. Not wanting to animate something too simple like fading the artwork into darkness or have a black wave rolls in and cover the whole thing but don't want it to be too complicated that it takes a long time (due to time constraints), I look up on YouTube tutorials for inspiration and found this:

Fig 9.4 Master Motion Graphics to make you a pro in after effects

Using what I learn from this video, I decide to incorporate this onto my animation as well as creating an flash explosion effect would flood the entire background white and 'blind' the screen, as the graphic sets into place.

Fig 9.5 Insert a polygon shape onto the animation (26/10/2023 Week 9)

Fig 9.6 Adding more detail to the graphic (26/10/2023 Week 9)

Fig 9.7 Adding a flash that it 'blinds' the screen (26/10/2023 Week 9)

Here is the result:

Fig 10. Final Animation Artwork (26/10/2023 Week 9)

FINAL TASK 2 SUBMISSION

Fig 11.1 Final Key Artwork (Black and White) (27/09/2023 Week 5)

Fig 11.2 Final Key Artwork (Colorized) (27/09/2023 Week 5)

Fig 11.3 Final Key Artwork (Colorized Alternative) (27/09/2023 Week 5)

Fig 11.4 Final Animated Artwork GIF(26/10/2023 Week 9)

Fig 11.5 Final Collateral 1: Shirt (11/10/2023 Week 7)

Fig 11.6 Final Collateral 2: Tote Bag (11/10/2023 Week 7)

Final 11.7 Final Collateral 3: Pin (11/10/2023 Week 7)

Final 11.8 Final Collateral 4:Sketchbook (11/10/2023 Week 7)

Final 11.9 Final Collateral 5: Hoodie (11/10/2023 Week 7)

Final 11.10 Key Artwork Expansion 1 (11/10/2023 Week 7)

Fig 11.11 Final Instagram Profile and Post (11/10/2023 Week 7)

Instagram account: https://www.instagram.com/typographicjohnny/

Fig 12. Project 2 Final Submission (29/10/2023 Week 9)

FEEDBACK

Week 4

Specific Feedback

No feedback. The artwork silhouette is good enough.

Week 5

General Feedback

Explanation for your artwork needs to be more solid than simply expressing one's preference for the appearance of the artwork. Think of the art work in black and white, rather than colored.

Specific Feedback

Further develop the letter art and explore other structures other than the jell-o like structure. Letter artwork does not really match my actual appearance (further development needed?)

Week 6

Specific Feedback

Choose a color scheme with complementary colors and ensure it's not to mono chromatic.

General Feedback

Use aspect of the name mark in repetition instead of the entire name mark. Expand your name mark in a more different yet interesting way and ensure you do not ditch the original work mark in the process. As a beginner, it is advised to stick with one color scheme.

Week 7

General Feedback

Gradients in key art reduces the readability. Add your animated key art as part of your Instagram post. To make your Instagram account more interesting, have the each of the post 'interact' with each other in some way (For example: graphical element of one post extends to another one or more posts)

Week 8

No Feedback. Independent Learning Week.

REFLECTION

Experience

For this project, I find it a little odd that we have to create a brand after us and that makes me feel somewhat self centered? However it is not an entirely unpleasant project. I should have grown used to the number of self entitled project especially with how much projects (including those outside advanced typography) revolve around yourself as a whole and upload said expression onto the internet. It is an interesting concept to try to turn whatever represent yourself into a letter form. Naturally, animating is my favorite part of this whole process.

Observation

There is one thing I have observe in all of this. There is at one point where Mr. Vinod has ask us to print out own name mark on the T shirt and the print color does not match the color I have pick for my key art. Due to that, the purple shade of are less pronounced in a black shirt when it's supposed to be bright purple. I have lost sight of the possibilities that printing may differs from the display on the screen. I will have to keep that in mind if I every do happen upon a project that require printing.

Findings

I find that missing just one class would result in a drastic push back and would requires effort in order to catch up again and that properly prioritizing assignments is required to help getting catch up with other peers. In addition, I would also missed the chance of getting important feedback. The second step is to clarify my visual style repeating graphics styles and color palette for each post and even the way I was pictured. The book also suggest different photo styles for creative content strategies which includes creating a grid layout (which what I had done) as well as motivational quotes, shoppable post, user generated content, product photography, ad like images, giveaways and contest, hiring posts and throwback images and using creative commons content.

Search This Blog

Johnny Lam Wee Zhe (0363436)