Advanced Typography Exercises

02/09/2020 (Week 1- Week 4)
Dayyan Ahmed 0344670 
Advanced Typography
Exercises

Instructions 

---

28/08/20 (week 1) Typographic Systems

In the first lecture, Mr. Vinod introduced us the Typographic Systems, there are 8 systems, Axial systems, Grid systems, Random systems...etc He talked about the definition of the systems, like how they works. He also mentioned that many designs are tend to use the grid system, but there are more systems besides the grid system. Sometimes, you may use the combination of 2 systems.

Typographic Systems

- Axial System: all elements are organised to the left or right of a single axis.

- Radial System: All elements are extended from a point of focus.

- Dilatational System: All elements expand from a central point in a circular fashion

- Random System: Elements appear to have no specific pattern or relationship.

- Grid System: A system of vertical and horizontal divisions.

- Transitional System: An informal system of layered banding.

- Modular System: A series of non-objective elements that are constructed in as a standardised units.

- Bilateral System: All text is arranged symmetrically on a single axis

Task: for the task we were asked to make 2 layouts for each of the typographic systems 

fig 1.1 axial system

fig 1.2 dilatational system

fig 1.3 random system

fig 1.4 grid systems

fig 1.5 modular systems

fig 1.6 radial system 

fig 1.7 transitional system

fig 1.8 bilateral systems

09/07/2020 (Week 2)

Type and Play 

Part 1

For the first part of the second exercise, we were tasked to make a selection of image between man-made objects, structures or nature. Then, analysis the image and identify 5 potential letterforms within the image.

Fig 2.1 Selected item (Strings on the inside)

After selecting my object i traced out the basic letter forms i was going to extract 

Fig 2.2 chosen letter forms (A,E,U,S,M)

Because of the nature of the image and the strings being very thin they were hard to trace put so i edited the picture a couple of times before tracing it in illustrator

Fig 2.3 edited picture for better tracing 

After getting a good edit i moved to illustrator to trace out the picture and get as much detail on the strings that i could 

Fig 2.4 tracing in illustrator

I used the image tracing in illustrator to get kind of detailed out lines but it just wasn't happening due to the quality of the picture and the size of the strings 

I gave it a couple tries with different settings

Fig 2.5 trace 1

Fig 2.6 trace 2

After that i decided to take a new picture of the object this time in different and a higher quality 

Fig 2.7 new image 

After getting a better picture i repeated the steps of editing for better tracing 

Fig 2.8 new image edited 

Fig 2.9 image for tracing 

After getting a satisfactory edit i moved to illustrator to trace it out 

Fig 3 letter forms trace 

After tracing the image and letter forms i used a layer on top in green as a stencil to get better outlines with manual adjustment as well

Fig 3.1 basic extracted letter forms 

After extracting my basic letterforms outlines i placed them on a base line to begin the refinement process.

Along with putting the letter forms on the baseline i also added some details line the knots connecting them and rotating the letters .

Fig 3.2 letters on base line and minor details 

After rotating and adding minor details i began straightening out the curves slightly because i wanted the curves to be present but not too much  and i reflected the letter m to match the curves of the other letters 

Fig 3.3 straightened out curve and lengths

After my first couple of refinements i noticed the curves were very uneven in all the letters so i adjusted them to curve at one side and added a couple extra points in the letter E 

Fig 3.4 Added points and curves refinements

For my final edits i did a little more curve refinement and increased the thickness of the lines to get a more clearer view

Fig 3.5 thicker and better curves

Final outcome 

Fig 3.6 final letter forms 

Further refinements and change after feedback 

fig 3.7 further refinement after feedback 

16/07/20 (week 3)

Type and play

Part 2

For the second part of exercise 2 we were given an open choice of choosing an image and integrating typography into the image, the text could be a simple word or a sentence made from around 3-4 words .

However the typographic elements should reflect the meaning of the image or message .

Choosing images :

I started of by looking for images that had certain simple message behind them and can be easily be integrated with typography 

The images i selected here were attached to these ideas :

• Explore
• Illusions
• Nirvana: the fathers of grundge
• Trust 

Fig 1.1 explore

Fig 1.2 Illusion

Fig 1.3 Nirvana the fathers of grundge 

Fig 1.4 trust 

After narrowing my choice to these pictures i started experimenting with all of them one by one to check image is more likely to support  the ideas i had for the integrated text 

Image 1 (explore)

Fig 1.5 image 1 test 

For my first test with image 1 i just individually added the letters of the whole word to allow me to move the letters independently with the rock base line

After adding and arranging the letters i add a rick texture to the words using a clipping mask

Fig 1.6 outcome image 1 test

Image 3 (nirvana the fathers of grunge)

Fig 1.7 (rough edit image 3)

For this image i added words individually instead of letters , after adding the words i use the stage walls as a baseline and the aligned the words accordingly 

I then warped the text using the bulge option to make it seem like the words were painted on the walls 

Fig 1.7 image 3 test 

Image 4 (Trust)

Fig 1.8 Trust rough test

For this image i used the pillar floor as the baseline, next i added horizontal distortion to give the text a more real depth effect 

For this image i also used the 3D option in photoshop to get a 3d text and elements

Fig 1.9 rough outcome of trust test

Chosen image for editing

I settled for the last image TRUST as it had more potential compared to the other images

progress 1 

Fig 2.1 first progress 3d text

Starting off i used a 2d text layer with the font type futura extra bold , after setting the text on the base line i open the 3d option in photoshop to convert the text to 3d 

I also horizontally distorted the text to get a depth effect 

Fig 2.2 exploring 3d effects 

After turning the text to 3d i started playing with the different lighting angles , extrusion height and textures

fig 2.3 exploring colours and lighting angles

fig 2.4 exploring colours and lighting angles

After playing around with the different i got a satisfactory view so i moved to the next stage 

fig 2.5 split effect 

This step i used a clear brush and cleared out the letters to make it see like the text is in between the two people , along with that i adjusted the opacity of the text a little to make it seem more aesthetic

Final outcome 

Fig 2.6 finalized outcome 

Revised design after feedback 

fig 2.1 revised outcome 

---

Feedback 

week 1-2

Specific feedback :

• complete your work before you lose more marks

Week2-3

Specific feedback :

• Define the joints a little more instead of too much simplification.
• Change line thickness to a little more thicker.
• Curves are not needed as the junctions already define characteristics.
• letter widths can be equal.

week 3-4

• Specific feedback :
• Text does not mimic element of the image.
• Idea is imposed.
• Rework it and update.

---

Reflections 

Week 1- 2

I was absent for the first class. The next class i attended i found out the work was to make 16 layouts. Panic alert !!. However when i actually started working on them they didn't feel very complicated just thought provoking. 

week 2 - 3

The finding type exercise i actually found very interesting , it allowed me to look at normal thing with a different perspective . Now every time i look at some things this thought of 'wow , i can use that in a typographic form' crosses my mind. Fun exercise.

Week 3 - week 4

During our final exercise i was actually lagging behind in work , but i managed to get something done. I liked the exercise in the sense that i realized to what extent typography was being used in everyday life but was overlooked . And how much thought actually goes into it.

---

Further reading